diff --git a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- default.snap.png b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- default.snap.png index 4e69becff3..fd817f73d1 100644 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- default.snap.png and b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- default.snap.png differ diff --git a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- disabled days.snap.png b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- disabled days.snap.png index 0db05ee805..65fc4dc08f 100644 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- disabled days.snap.png and b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- disabled days.snap.png differ diff --git a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- event list.snap.png b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- event list.snap.png index 07a4e4ff3e..e9595f280a 100644 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- event list.snap.png and b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- event list.snap.png differ diff --git a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- min and max.snap.png b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- min and max.snap.png index f717e8fd68..489f88c2e6 100644 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- min and max.snap.png and b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- min and max.snap.png differ diff --git a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- next month.snap.png b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- next month.snap.png index f37a789473..9193de4f15 100644 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- next month.snap.png and b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- next month.snap.png differ diff --git a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- next year.snap.png b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- next year.snap.png index 6f68fd1855..5d2dd52f58 100644 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- next year.snap.png and b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- next year.snap.png differ diff --git a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- prev month.snap.png b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- prev month.snap.png index 6f1633fa6c..73e94b749a 100644 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- prev month.snap.png and b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- prev month.snap.png differ diff --git a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- prev year.snap.png b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- prev year.snap.png index 5c91d63163..96cc2636af 100644 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- prev year.snap.png and b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- prev year.snap.png differ diff --git a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- range in progress with disabled.snap.png b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- range in progress with disabled.snap.png index a4ebb23a0b..2132473f83 100644 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- range in progress with disabled.snap.png and b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- range in progress with disabled.snap.png differ diff --git a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- range in progress.snap.png b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- range in progress.snap.png index f491462514..7b2b0162d4 100644 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- range in progress.snap.png and b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- range in progress.snap.png differ diff --git a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- range.snap.png b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- range.snap.png index 56c91f24b4..b48d2edda0 100644 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- range.snap.png and b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- range.snap.png differ diff --git a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- set value.snap.png b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- set value.snap.png index 0edcefebf7..79e17d027e 100644 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- set value.snap.png and b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- set value.snap.png differ diff --git a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar keyboard navigation -- navigate with `Down`, `Left`, `Up`, `Right` arrows.snap.png b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar keyboard navigation -- navigate with `Down`, `Left`, `Up`, `Right` arrows.snap.png index c48a07fed4..4f0be6af86 100644 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar keyboard navigation -- navigate with `Down`, `Left`, `Up`, `Right` arrows.snap.png and b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar keyboard navigation -- navigate with `Down`, `Left`, `Up`, `Right` arrows.snap.png differ diff --git a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar keyboard navigation -- set value with `Enter` and `Space`.snap.png b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar keyboard navigation -- set value with `Enter` and `Space`.snap.png index 68c7b28f38..308da7c5b8 100644 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar keyboard navigation -- set value with `Enter` and `Space`.snap.png and b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar keyboard navigation -- set value with `Enter` and `Space`.snap.png differ diff --git a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- default.snap.png b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- default.snap.png index f897ef5b68..f5afdf65e0 100644 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- default.snap.png and b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- default.snap.png differ diff --git a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- disabled days.snap.png b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- disabled days.snap.png index 7a1fc17e90..1ae3e8398e 100644 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- disabled days.snap.png and b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- disabled days.snap.png differ diff --git a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- event list.snap.png b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- event list.snap.png index fae837ca4c..cdf8320268 100644 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- event list.snap.png and b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- event list.snap.png differ diff --git a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- min and max.snap.png b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- min and max.snap.png index d836410a37..7dc2855b40 100644 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- min and max.snap.png and b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- min and max.snap.png differ diff --git a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- next month.snap.png b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- next month.snap.png index 8f2d583363..25fc08c5ce 100644 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- next month.snap.png and b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- next month.snap.png differ diff --git a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- prev month.snap.png b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- prev month.snap.png index 5dddc8d6b8..f8e5f65cb8 100644 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- prev month.snap.png and b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- prev month.snap.png differ diff --git a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- range in progress with disabled.snap.png b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- range in progress with disabled.snap.png index 3da8da68a5..f70e204c69 100644 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- range in progress with disabled.snap.png and b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- range in progress with disabled.snap.png differ diff --git a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- range in progress.snap.png b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- range in progress.snap.png index 80ca423048..c801275196 100644 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- range in progress.snap.png and b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- range in progress.snap.png differ diff --git a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- range.snap.png b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- range.snap.png index 1cf2026148..c801275196 100644 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- range.snap.png and b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- range.snap.png differ diff --git a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- set value.snap.png b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- set value.snap.png index 3ed0474360..25d849a978 100644 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- set value.snap.png and b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- set value.snap.png differ diff --git a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble keyboard navigation -- navigate with `Down`, `Left`, `Up`, `Right` arrows.snap.png b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble keyboard navigation -- navigate with `Down`, `Left`, `Up`, `Right` arrows.snap.png index 6fcf33b5c3..38467b5129 100644 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble keyboard navigation -- navigate with `Down`, `Left`, `Up`, `Right` arrows.snap.png and b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble keyboard navigation -- navigate with `Down`, `Left`, `Up`, `Right` arrows.snap.png differ diff --git a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble keyboard navigation -- set value with `Enter` and `Space`.snap.png b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble keyboard navigation -- set value with `Enter` and `Space`.snap.png index bf61ec3ea2..06f27cbd9a 100644 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble keyboard navigation -- set value with `Enter` and `Space`.snap.png and b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble keyboard navigation -- set value with `Enter` and `Space`.snap.png differ diff --git a/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePicker -- default.snap.png b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePicker -- default.snap.png new file mode 100644 index 0000000000..5635216b12 Binary files /dev/null and b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePicker -- default.snap.png differ diff --git a/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePicker -- prop defaultDate, enableContentLeft, enableContentRight.snap.png b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePicker -- prop defaultDate, enableContentLeft, enableContentRight.snap.png new file mode 100644 index 0000000000..5ab3f0b08e Binary files /dev/null and b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePicker -- prop defaultDate, enableContentLeft, enableContentRight.snap.png differ diff --git a/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePicker -- prop disabled, readOnly.snap.png b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePicker -- prop disabled, readOnly.snap.png new file mode 100644 index 0000000000..5877ad4ee9 Binary files /dev/null and b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePicker -- prop disabled, readOnly.snap.png differ diff --git a/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePicker -- prop format.snap.png b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePicker -- prop format.snap.png new file mode 100644 index 0000000000..422e941f96 Binary files /dev/null and b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePicker -- prop format.snap.png differ diff --git a/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePicker -- prop input date.snap.png b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePicker -- prop input date.snap.png new file mode 100644 index 0000000000..91236ff941 Binary files /dev/null and b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePicker -- prop input date.snap.png differ diff --git a/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePicker -- prop input masked date.snap.png b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePicker -- prop input masked date.snap.png new file mode 100644 index 0000000000..2953a644d6 Binary files /dev/null and b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePicker -- prop input masked date.snap.png differ diff --git a/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePicker -- prop label, leftHelper, placeholder.snap.png b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePicker -- prop label, leftHelper, placeholder.snap.png new file mode 100644 index 0000000000..9b61a18844 Binary files /dev/null and b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePicker -- prop label, leftHelper, placeholder.snap.png differ diff --git a/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePicker -- prop placement.snap.png b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePicker -- prop placement.snap.png new file mode 100644 index 0000000000..1538da7c5b Binary files /dev/null and b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePicker -- prop placement.snap.png differ diff --git a/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePicker -- prop size l.snap.png b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePicker -- prop size l.snap.png new file mode 100644 index 0000000000..82b25bb82a Binary files /dev/null and b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePicker -- prop size l.snap.png differ diff --git a/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePicker -- prop size m.snap.png b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePicker -- prop size m.snap.png new file mode 100644 index 0000000000..5da8521ec5 Binary files /dev/null and b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePicker -- prop size m.snap.png differ diff --git a/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePicker -- prop size s.snap.png b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePicker -- prop size s.snap.png new file mode 100644 index 0000000000..a12a6d5ead Binary files /dev/null and b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePicker -- prop size s.snap.png differ diff --git a/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePicker -- prop size xs.snap.png b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePicker -- prop size xs.snap.png new file mode 100644 index 0000000000..cfe4cda62f Binary files /dev/null and b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePicker -- prop size xs.snap.png differ diff --git a/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePicker -- prop valueError, valueSuccess.snap.png b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePicker -- prop valueError, valueSuccess.snap.png new file mode 100644 index 0000000000..a9d024dbec Binary files /dev/null and b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePicker -- prop valueError, valueSuccess.snap.png differ diff --git a/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePickerRange -- default.snap.png b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePickerRange -- default.snap.png new file mode 100644 index 0000000000..3a5232fa93 Binary files /dev/null and b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePickerRange -- default.snap.png differ diff --git a/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePickerRange -- prop defaultDate, enableContent.snap.png b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePickerRange -- prop defaultDate, enableContent.snap.png new file mode 100644 index 0000000000..5f5e85b3eb Binary files /dev/null and b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePickerRange -- prop defaultDate, enableContent.snap.png differ diff --git a/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePickerRange -- prop disabled, readOnly.snap.png b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePickerRange -- prop disabled, readOnly.snap.png new file mode 100644 index 0000000000..31b2661785 Binary files /dev/null and b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePickerRange -- prop disabled, readOnly.snap.png differ diff --git a/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePickerRange -- prop format.snap.png b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePickerRange -- prop format.snap.png new file mode 100644 index 0000000000..707a03a8d5 Binary files /dev/null and b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePickerRange -- prop format.snap.png differ diff --git a/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePickerRange -- prop input date, double calendar.snap.png b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePickerRange -- prop input date, double calendar.snap.png new file mode 100644 index 0000000000..9308adc3d8 Binary files /dev/null and b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePickerRange -- prop input date, double calendar.snap.png differ diff --git a/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePickerRange -- prop input date.snap.png b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePickerRange -- prop input date.snap.png new file mode 100644 index 0000000000..f81f3fe12b Binary files /dev/null and b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePickerRange -- prop input date.snap.png differ diff --git a/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePickerRange -- prop label, leftHelper, placeholder.snap.png b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePickerRange -- prop label, leftHelper, placeholder.snap.png new file mode 100644 index 0000000000..dd4c9bc912 Binary files /dev/null and b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePickerRange -- prop label, leftHelper, placeholder.snap.png differ diff --git a/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePickerRange -- prop placement.snap.png b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePickerRange -- prop placement.snap.png new file mode 100644 index 0000000000..0f6a9b8100 Binary files /dev/null and b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePickerRange -- prop placement.snap.png differ diff --git a/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePickerRange -- prop size l.snap.png b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePickerRange -- prop size l.snap.png new file mode 100644 index 0000000000..2938da5b1e Binary files /dev/null and b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePickerRange -- prop size l.snap.png differ diff --git a/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePickerRange -- prop size m.snap.png b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePickerRange -- prop size m.snap.png new file mode 100644 index 0000000000..b3f1f1cd47 Binary files /dev/null and b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePickerRange -- prop size m.snap.png differ diff --git a/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePickerRange -- prop size s.snap.png b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePickerRange -- prop size s.snap.png new file mode 100644 index 0000000000..a1c9d88797 Binary files /dev/null and b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePickerRange -- prop size s.snap.png differ diff --git a/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePickerRange -- prop size xs.snap.png b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePickerRange -- prop size xs.snap.png new file mode 100644 index 0000000000..c386f8c074 Binary files /dev/null and b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePickerRange -- prop size xs.snap.png differ diff --git a/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePickerRange -- prop valueError, valueSuccess.snap.png b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePickerRange -- prop valueError, valueSuccess.snap.png new file mode 100644 index 0000000000..4a8ccaecb4 Binary files /dev/null and b/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePickerRange -- prop valueError, valueSuccess.snap.png differ diff --git a/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-b2c Dropdown -- default.snap.png b/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-b2c Dropdown -- default.snap.png index 9d8ae4820a..08409e0507 100644 Binary files a/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-b2c Dropdown -- default.snap.png and b/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-b2c Dropdown -- default.snap.png differ diff --git a/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-b2c Dropdown -- prop listHeight, listOverflow.snap.png b/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-b2c Dropdown -- prop listHeight, listOverflow.snap.png index 8a636479b9..957c924f2e 100644 Binary files a/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-b2c Dropdown -- prop listHeight, listOverflow.snap.png and b/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-b2c Dropdown -- prop listHeight, listOverflow.snap.png differ diff --git a/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-b2c Dropdown -- prop listWidth.snap.png b/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-b2c Dropdown -- prop listWidth.snap.png index 75c77d5f43..f340a32912 100644 Binary files a/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-b2c Dropdown -- prop listWidth.snap.png and b/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-b2c Dropdown -- prop listWidth.snap.png differ diff --git a/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-b2c Dropdown -- prop offset.snap.png b/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-b2c Dropdown -- prop offset.snap.png index f4f8644421..88a64ac2dc 100644 Binary files a/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-b2c Dropdown -- prop offset.snap.png and b/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-b2c Dropdown -- prop offset.snap.png differ diff --git a/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-b2c Dropdown -- prop placement.snap.png b/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-b2c Dropdown -- prop placement.snap.png index 7e4e65daea..4cee6a4d97 100644 Binary files a/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-b2c Dropdown -- prop placement.snap.png and b/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-b2c Dropdown -- prop placement.snap.png differ diff --git a/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-b2c Dropdown -- prop size, variant.snap.png b/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-b2c Dropdown -- prop size, variant.snap.png index 5b6b4ffd36..5ff6c6257c 100644 Binary files a/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-b2c Dropdown -- prop size, variant.snap.png and b/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-b2c Dropdown -- prop size, variant.snap.png differ diff --git a/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-b2c Dropdown -- prop size.snap.png b/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-b2c Dropdown -- prop size.snap.png index fefa8e6e17..28a2b10fde 100644 Binary files a/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-b2c Dropdown -- prop size.snap.png and b/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-b2c Dropdown -- prop size.snap.png differ diff --git a/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-b2c Dropdown -- prop trigger.snap.png b/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-b2c Dropdown -- prop trigger.snap.png index 21fe320868..af0aea8c79 100644 Binary files a/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-b2c Dropdown -- prop trigger.snap.png and b/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-b2c Dropdown -- prop trigger.snap.png differ diff --git a/cypress/snapshots/b2c/components/Range/Range.component-test.tsx/plasma-b2c Range -- _disabled & _readOnly.snap.png b/cypress/snapshots/b2c/components/Range/Range.component-test.tsx/plasma-b2c Range -- _disabled & _readOnly.snap.png index b1c985b81d..6e2e93cb02 100644 Binary files a/cypress/snapshots/b2c/components/Range/Range.component-test.tsx/plasma-b2c Range -- _disabled & _readOnly.snap.png and b/cypress/snapshots/b2c/components/Range/Range.component-test.tsx/plasma-b2c Range -- _disabled & _readOnly.snap.png differ diff --git a/cypress/snapshots/b2c/components/Range/Range.component-test.tsx/plasma-b2c Range -- _error & _success.snap.png b/cypress/snapshots/b2c/components/Range/Range.component-test.tsx/plasma-b2c Range -- _error & _success.snap.png index 284a51bc50..01b7265a47 100644 Binary files a/cypress/snapshots/b2c/components/Range/Range.component-test.tsx/plasma-b2c Range -- _error & _success.snap.png and b/cypress/snapshots/b2c/components/Range/Range.component-test.tsx/plasma-b2c Range -- _error & _success.snap.png differ diff --git a/cypress/snapshots/b2c/components/Range/Range.component-test.tsx/plasma-b2c Range -- _size.snap.png b/cypress/snapshots/b2c/components/Range/Range.component-test.tsx/plasma-b2c Range -- _size.snap.png index 94361da9b2..230a157fd1 100644 Binary files a/cypress/snapshots/b2c/components/Range/Range.component-test.tsx/plasma-b2c Range -- _size.snap.png and b/cypress/snapshots/b2c/components/Range/Range.component-test.tsx/plasma-b2c Range -- _size.snap.png differ diff --git a/cypress/snapshots/b2c/components/Range/Range.component-test.tsx/plasma-b2c Range -- simple divider as icon.snap.png b/cypress/snapshots/b2c/components/Range/Range.component-test.tsx/plasma-b2c Range -- simple divider as icon.snap.png index 5b019017d3..9d0faad7e2 100644 Binary files a/cypress/snapshots/b2c/components/Range/Range.component-test.tsx/plasma-b2c Range -- simple divider as icon.snap.png and b/cypress/snapshots/b2c/components/Range/Range.component-test.tsx/plasma-b2c Range -- simple divider as icon.snap.png differ diff --git a/cypress/snapshots/b2c/components/Range/Range.component-test.tsx/plasma-b2c Range -- simple filled value.snap.png b/cypress/snapshots/b2c/components/Range/Range.component-test.tsx/plasma-b2c Range -- simple filled value.snap.png index 4c789b611d..99423c85aa 100644 Binary files a/cypress/snapshots/b2c/components/Range/Range.component-test.tsx/plasma-b2c Range -- simple filled value.snap.png and b/cypress/snapshots/b2c/components/Range/Range.component-test.tsx/plasma-b2c Range -- simple filled value.snap.png differ diff --git a/cypress/snapshots/b2c/components/Range/Range.component-test.tsx/plasma-b2c Range -- simple.snap.png b/cypress/snapshots/b2c/components/Range/Range.component-test.tsx/plasma-b2c Range -- simple.snap.png index 00927f3f7e..72d1ed608f 100644 Binary files a/cypress/snapshots/b2c/components/Range/Range.component-test.tsx/plasma-b2c Range -- simple.snap.png and b/cypress/snapshots/b2c/components/Range/Range.component-test.tsx/plasma-b2c Range -- simple.snap.png differ diff --git a/cypress/snapshots/b2c/components/Segment/Segment.component-test.tsx/plasma-web Segment -- navigate with arrow`.snap.png b/cypress/snapshots/b2c/components/Segment/Segment.component-test.tsx/plasma-web Segment -- navigate with arrow`.snap.png index e147810504..16918cb106 100644 Binary files a/cypress/snapshots/b2c/components/Segment/Segment.component-test.tsx/plasma-web Segment -- navigate with arrow`.snap.png and b/cypress/snapshots/b2c/components/Segment/Segment.component-test.tsx/plasma-web Segment -- navigate with arrow`.snap.png differ diff --git a/cypress/snapshots/b2c/components/Segment/Segment.component-test.tsx/plasma-web Segment -- with fixed width.snap.png b/cypress/snapshots/b2c/components/Segment/Segment.component-test.tsx/plasma-web Segment -- with fixed width.snap.png index ae12fe0048..b7b2f4203e 100644 Binary files a/cypress/snapshots/b2c/components/Segment/Segment.component-test.tsx/plasma-web Segment -- with fixed width.snap.png and b/cypress/snapshots/b2c/components/Segment/Segment.component-test.tsx/plasma-web Segment -- with fixed width.snap.png differ diff --git a/cypress/snapshots/b2c/components/Tabs/TabsBase.component-test.tsx/plasma-core Tabs -- autoscroll.snap.png b/cypress/snapshots/b2c/components/Tabs/TabsBase.component-test.tsx/plasma-core Tabs -- autoscroll.snap.png index 23f59034e7..9bc5a0d617 100644 Binary files a/cypress/snapshots/b2c/components/Tabs/TabsBase.component-test.tsx/plasma-core Tabs -- autoscroll.snap.png and b/cypress/snapshots/b2c/components/Tabs/TabsBase.component-test.tsx/plasma-core Tabs -- autoscroll.snap.png differ diff --git a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- default.snap.png b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- default.snap.png index 40b2665565..c9b01b3549 100644 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- default.snap.png and b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- default.snap.png differ diff --git a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- disabled days.snap.png b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- disabled days.snap.png index 104dc14a12..8d5ed81177 100644 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- disabled days.snap.png and b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- disabled days.snap.png differ diff --git a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- event list.snap.png b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- event list.snap.png index f9c2d239f1..14f1fff71a 100644 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- event list.snap.png and b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- event list.snap.png differ diff --git a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- min and max.snap.png b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- min and max.snap.png index 02b6478745..9f4678208e 100644 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- min and max.snap.png and b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- min and max.snap.png differ diff --git a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- next month.snap.png b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- next month.snap.png index a737847085..62b8adab2d 100644 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- next month.snap.png and b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- next month.snap.png differ diff --git a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- next year.snap.png b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- next year.snap.png index b113995564..14ea48f537 100644 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- next year.snap.png and b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- next year.snap.png differ diff --git a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- prev month.snap.png b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- prev month.snap.png index 05884f3e37..1b770b1574 100644 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- prev month.snap.png and b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- prev month.snap.png differ diff --git a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- prev year.snap.png b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- prev year.snap.png index 44f80b9673..62649ed2a8 100644 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- prev year.snap.png and b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- prev year.snap.png differ diff --git a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- range in progress with disabled.snap.png b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- range in progress with disabled.snap.png index 7aed3e3f24..55de8a907f 100644 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- range in progress with disabled.snap.png and b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- range in progress with disabled.snap.png differ diff --git a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- range in progress.snap.png b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- range in progress.snap.png index 399b127cd4..63ddef2bad 100644 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- range in progress.snap.png and b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- range in progress.snap.png differ diff --git a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- range.snap.png b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- range.snap.png index 9f81477c12..f3331966af 100644 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- range.snap.png and b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- range.snap.png differ diff --git a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- set value.snap.png b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- set value.snap.png index 03a9582679..ce801e9572 100644 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- set value.snap.png and b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- set value.snap.png differ diff --git a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar keyboard navigation -- navigate with `Down`, `Left`, `Up`, `Right` arrows.snap.png b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar keyboard navigation -- navigate with `Down`, `Left`, `Up`, `Right` arrows.snap.png index fef6de502f..a80c5283f8 100644 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar keyboard navigation -- navigate with `Down`, `Left`, `Up`, `Right` arrows.snap.png and b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar keyboard navigation -- navigate with `Down`, `Left`, `Up`, `Right` arrows.snap.png differ diff --git a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar keyboard navigation -- set value with `Enter` and `Space`.snap.png b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar keyboard navigation -- set value with `Enter` and `Space`.snap.png index 1f148f701f..0cb556671c 100644 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar keyboard navigation -- set value with `Enter` and `Space`.snap.png and b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar keyboard navigation -- set value with `Enter` and `Space`.snap.png differ diff --git a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- default.snap.png b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- default.snap.png index 3014e6d77a..890d8be55d 100644 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- default.snap.png and b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- default.snap.png differ diff --git a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- disabled days.snap.png b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- disabled days.snap.png index 73865122f4..308ed8f668 100644 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- disabled days.snap.png and b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- disabled days.snap.png differ diff --git a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- event list.snap.png b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- event list.snap.png index d9b0d42d94..6d37593815 100644 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- event list.snap.png and b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- event list.snap.png differ diff --git a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- min and max.snap.png b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- min and max.snap.png index 193adf1569..1ed57dd5e8 100644 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- min and max.snap.png and b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- min and max.snap.png differ diff --git a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- next month.snap.png b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- next month.snap.png index 270d0953e3..c6e10906a7 100644 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- next month.snap.png and b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- next month.snap.png differ diff --git a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- prev month.snap.png b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- prev month.snap.png index 75bf647840..04f23e6ad0 100644 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- prev month.snap.png and b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- prev month.snap.png differ diff --git a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- range in progress with disabled.snap.png b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- range in progress with disabled.snap.png index 5f8ef5dbdd..dd8515ac84 100644 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- range in progress with disabled.snap.png and b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- range in progress with disabled.snap.png differ diff --git a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- range in progress.snap.png b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- range in progress.snap.png index ff5e649adc..13b79d1831 100644 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- range in progress.snap.png and b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- range in progress.snap.png differ diff --git a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- range.snap.png b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- range.snap.png index 5eded726dc..13b79d1831 100644 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- range.snap.png and b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- range.snap.png differ diff --git a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- set value.snap.png b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- set value.snap.png index 2d6e62dbd7..61fa40203e 100644 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- set value.snap.png and b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- set value.snap.png differ diff --git a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble keyboard navigation -- navigate with `Down`, `Left`, `Up`, `Right` arrows.snap.png b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble keyboard navigation -- navigate with `Down`, `Left`, `Up`, `Right` arrows.snap.png index f446f0323f..cacd0353b2 100644 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble keyboard navigation -- navigate with `Down`, `Left`, `Up`, `Right` arrows.snap.png and b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble keyboard navigation -- navigate with `Down`, `Left`, `Up`, `Right` arrows.snap.png differ diff --git a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble keyboard navigation -- set value with `Enter` and `Space`.snap.png b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble keyboard navigation -- set value with `Enter` and `Space`.snap.png index 60c15d08f4..24b5a01ced 100644 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble keyboard navigation -- set value with `Enter` and `Space`.snap.png and b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble keyboard navigation -- set value with `Enter` and `Space`.snap.png differ diff --git a/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePicker -- default.snap.png b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePicker -- default.snap.png new file mode 100644 index 0000000000..127377d597 Binary files /dev/null and b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePicker -- default.snap.png differ diff --git a/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePicker -- prop defaultDate, enableContentLeft, enableContentRight.snap.png b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePicker -- prop defaultDate, enableContentLeft, enableContentRight.snap.png new file mode 100644 index 0000000000..95712e01ce Binary files /dev/null and b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePicker -- prop defaultDate, enableContentLeft, enableContentRight.snap.png differ diff --git a/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePicker -- prop disabled, readOnly.snap.png b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePicker -- prop disabled, readOnly.snap.png new file mode 100644 index 0000000000..23827f485a Binary files /dev/null and b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePicker -- prop disabled, readOnly.snap.png differ diff --git a/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePicker -- prop format.snap.png b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePicker -- prop format.snap.png new file mode 100644 index 0000000000..5aa725600e Binary files /dev/null and b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePicker -- prop format.snap.png differ diff --git a/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePicker -- prop input date.snap.png b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePicker -- prop input date.snap.png new file mode 100644 index 0000000000..e573224bb1 Binary files /dev/null and b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePicker -- prop input date.snap.png differ diff --git a/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePicker -- prop input masked date.snap.png b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePicker -- prop input masked date.snap.png new file mode 100644 index 0000000000..f919b93257 Binary files /dev/null and b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePicker -- prop input masked date.snap.png differ diff --git a/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePicker -- prop label, leftHelper, placeholder.snap.png b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePicker -- prop label, leftHelper, placeholder.snap.png new file mode 100644 index 0000000000..dacb223538 Binary files /dev/null and b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePicker -- prop label, leftHelper, placeholder.snap.png differ diff --git a/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePicker -- prop placement.snap.png b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePicker -- prop placement.snap.png new file mode 100644 index 0000000000..10ca68218a Binary files /dev/null and b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePicker -- prop placement.snap.png differ diff --git a/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePicker -- prop size l.snap.png b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePicker -- prop size l.snap.png new file mode 100644 index 0000000000..0b84a2eab6 Binary files /dev/null and b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePicker -- prop size l.snap.png differ diff --git a/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePicker -- prop size m.snap.png b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePicker -- prop size m.snap.png new file mode 100644 index 0000000000..a7a96a7727 Binary files /dev/null and b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePicker -- prop size m.snap.png differ diff --git a/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePicker -- prop size s.snap.png b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePicker -- prop size s.snap.png new file mode 100644 index 0000000000..64ced66698 Binary files /dev/null and b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePicker -- prop size s.snap.png differ diff --git a/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePicker -- prop size xs.snap.png b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePicker -- prop size xs.snap.png new file mode 100644 index 0000000000..c4e56ea734 Binary files /dev/null and b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePicker -- prop size xs.snap.png differ diff --git a/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePicker -- prop valueError, valueSuccess.snap.png b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePicker -- prop valueError, valueSuccess.snap.png new file mode 100644 index 0000000000..6fd63a1962 Binary files /dev/null and b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePicker -- prop valueError, valueSuccess.snap.png differ diff --git a/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePickerRange -- default.snap.png b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePickerRange -- default.snap.png new file mode 100644 index 0000000000..1d8929ff9e Binary files /dev/null and b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePickerRange -- default.snap.png differ diff --git a/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePickerRange -- prop defaultDate, enableContent.snap.png b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePickerRange -- prop defaultDate, enableContent.snap.png new file mode 100644 index 0000000000..8b69203032 Binary files /dev/null and b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePickerRange -- prop defaultDate, enableContent.snap.png differ diff --git a/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePickerRange -- prop disabled, readOnly.snap.png b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePickerRange -- prop disabled, readOnly.snap.png new file mode 100644 index 0000000000..b51e288d20 Binary files /dev/null and b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePickerRange -- prop disabled, readOnly.snap.png differ diff --git a/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePickerRange -- prop format.snap.png b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePickerRange -- prop format.snap.png new file mode 100644 index 0000000000..ab477d86af Binary files /dev/null and b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePickerRange -- prop format.snap.png differ diff --git a/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePickerRange -- prop input date, double calendar.snap.png b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePickerRange -- prop input date, double calendar.snap.png new file mode 100644 index 0000000000..e8b5a16fbc Binary files /dev/null and b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePickerRange -- prop input date, double calendar.snap.png differ diff --git a/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePickerRange -- prop input date.snap.png b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePickerRange -- prop input date.snap.png new file mode 100644 index 0000000000..c8e502d8e5 Binary files /dev/null and b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePickerRange -- prop input date.snap.png differ diff --git a/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePickerRange -- prop label, leftHelper, placeholder.snap.png b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePickerRange -- prop label, leftHelper, placeholder.snap.png new file mode 100644 index 0000000000..7bd0d2274f Binary files /dev/null and b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePickerRange -- prop label, leftHelper, placeholder.snap.png differ diff --git a/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePickerRange -- prop placement.snap.png b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePickerRange -- prop placement.snap.png new file mode 100644 index 0000000000..e2251d6f11 Binary files /dev/null and b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePickerRange -- prop placement.snap.png differ diff --git a/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePickerRange -- prop size l.snap.png b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePickerRange -- prop size l.snap.png new file mode 100644 index 0000000000..eb64b184fb Binary files /dev/null and b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePickerRange -- prop size l.snap.png differ diff --git a/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePickerRange -- prop size m.snap.png b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePickerRange -- prop size m.snap.png new file mode 100644 index 0000000000..ecb0965e61 Binary files /dev/null and b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePickerRange -- prop size m.snap.png differ diff --git a/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePickerRange -- prop size s.snap.png b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePickerRange -- prop size s.snap.png new file mode 100644 index 0000000000..b723cfd1f7 Binary files /dev/null and b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePickerRange -- prop size s.snap.png differ diff --git a/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePickerRange -- prop size xs.snap.png b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePickerRange -- prop size xs.snap.png new file mode 100644 index 0000000000..3539b3cd93 Binary files /dev/null and b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePickerRange -- prop size xs.snap.png differ diff --git a/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePickerRange -- prop valueError, valueSuccess.snap.png b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePickerRange -- prop valueError, valueSuccess.snap.png new file mode 100644 index 0000000000..d156d27be2 Binary files /dev/null and b/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePickerRange -- prop valueError, valueSuccess.snap.png differ diff --git a/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-web Dropdown -- default.snap.png b/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-web Dropdown -- default.snap.png index d34daf8ad0..eedd42601e 100644 Binary files a/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-web Dropdown -- default.snap.png and b/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-web Dropdown -- default.snap.png differ diff --git a/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-web Dropdown -- prop listHeight, listOverflow.snap.png b/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-web Dropdown -- prop listHeight, listOverflow.snap.png index 4e5c36ce86..55e8eda206 100644 Binary files a/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-web Dropdown -- prop listHeight, listOverflow.snap.png and b/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-web Dropdown -- prop listHeight, listOverflow.snap.png differ diff --git a/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-web Dropdown -- prop listWidth.snap.png b/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-web Dropdown -- prop listWidth.snap.png index 554d1cd8f3..73508fbf9c 100644 Binary files a/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-web Dropdown -- prop listWidth.snap.png and b/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-web Dropdown -- prop listWidth.snap.png differ diff --git a/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-web Dropdown -- prop offset.snap.png b/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-web Dropdown -- prop offset.snap.png index 3f31b441d4..0ff6870c38 100644 Binary files a/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-web Dropdown -- prop offset.snap.png and b/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-web Dropdown -- prop offset.snap.png differ diff --git a/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-web Dropdown -- prop placement.snap.png b/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-web Dropdown -- prop placement.snap.png index 26fbcc563d..8a54a5059a 100644 Binary files a/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-web Dropdown -- prop placement.snap.png and b/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-web Dropdown -- prop placement.snap.png differ diff --git a/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-web Dropdown -- prop size, variant.snap.png b/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-web Dropdown -- prop size, variant.snap.png index e8dbbbc1fe..22f13b073e 100644 Binary files a/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-web Dropdown -- prop size, variant.snap.png and b/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-web Dropdown -- prop size, variant.snap.png differ diff --git a/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-web Dropdown -- prop size.snap.png b/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-web Dropdown -- prop size.snap.png index d892791548..70622559df 100644 Binary files a/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-web Dropdown -- prop size.snap.png and b/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-web Dropdown -- prop size.snap.png differ diff --git a/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-web Dropdown -- prop trigger.snap.png b/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-web Dropdown -- prop trigger.snap.png index bb9b6ca079..883289f546 100644 Binary files a/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-web Dropdown -- prop trigger.snap.png and b/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-web Dropdown -- prop trigger.snap.png differ diff --git a/cypress/snapshots/web/components/Range/Range.component-test.tsx/plasma-b2c Range -- _disabled & _readOnly.snap.png b/cypress/snapshots/web/components/Range/Range.component-test.tsx/plasma-b2c Range -- _disabled & _readOnly.snap.png index f442b22be9..82515fde45 100644 Binary files a/cypress/snapshots/web/components/Range/Range.component-test.tsx/plasma-b2c Range -- _disabled & _readOnly.snap.png and b/cypress/snapshots/web/components/Range/Range.component-test.tsx/plasma-b2c Range -- _disabled & _readOnly.snap.png differ diff --git a/cypress/snapshots/web/components/Range/Range.component-test.tsx/plasma-b2c Range -- _error & _success.snap.png b/cypress/snapshots/web/components/Range/Range.component-test.tsx/plasma-b2c Range -- _error & _success.snap.png index e23da470d1..565c8a1f48 100644 Binary files a/cypress/snapshots/web/components/Range/Range.component-test.tsx/plasma-b2c Range -- _error & _success.snap.png and b/cypress/snapshots/web/components/Range/Range.component-test.tsx/plasma-b2c Range -- _error & _success.snap.png differ diff --git a/cypress/snapshots/web/components/Range/Range.component-test.tsx/plasma-b2c Range -- _size.snap.png b/cypress/snapshots/web/components/Range/Range.component-test.tsx/plasma-b2c Range -- _size.snap.png index d76d19d838..7138a395be 100644 Binary files a/cypress/snapshots/web/components/Range/Range.component-test.tsx/plasma-b2c Range -- _size.snap.png and b/cypress/snapshots/web/components/Range/Range.component-test.tsx/plasma-b2c Range -- _size.snap.png differ diff --git a/cypress/snapshots/web/components/Range/Range.component-test.tsx/plasma-b2c Range -- simple divider as icon.snap.png b/cypress/snapshots/web/components/Range/Range.component-test.tsx/plasma-b2c Range -- simple divider as icon.snap.png index ad56c417e7..7e087e59ba 100644 Binary files a/cypress/snapshots/web/components/Range/Range.component-test.tsx/plasma-b2c Range -- simple divider as icon.snap.png and b/cypress/snapshots/web/components/Range/Range.component-test.tsx/plasma-b2c Range -- simple divider as icon.snap.png differ diff --git a/cypress/snapshots/web/components/Range/Range.component-test.tsx/plasma-b2c Range -- simple filled value.snap.png b/cypress/snapshots/web/components/Range/Range.component-test.tsx/plasma-b2c Range -- simple filled value.snap.png index c333c65471..d36e63aa61 100644 Binary files a/cypress/snapshots/web/components/Range/Range.component-test.tsx/plasma-b2c Range -- simple filled value.snap.png and b/cypress/snapshots/web/components/Range/Range.component-test.tsx/plasma-b2c Range -- simple filled value.snap.png differ diff --git a/cypress/snapshots/web/components/Range/Range.component-test.tsx/plasma-b2c Range -- simple.snap.png b/cypress/snapshots/web/components/Range/Range.component-test.tsx/plasma-b2c Range -- simple.snap.png index 43689cc520..cc27ddf18f 100644 Binary files a/cypress/snapshots/web/components/Range/Range.component-test.tsx/plasma-b2c Range -- simple.snap.png and b/cypress/snapshots/web/components/Range/Range.component-test.tsx/plasma-b2c Range -- simple.snap.png differ diff --git a/cypress/snapshots/web/components/Segment/Segment.component-test.tsx/plasma-web Segment -- navigate with arrow`.snap.png b/cypress/snapshots/web/components/Segment/Segment.component-test.tsx/plasma-web Segment -- navigate with arrow`.snap.png index 063e7f51f7..311d50c618 100644 Binary files a/cypress/snapshots/web/components/Segment/Segment.component-test.tsx/plasma-web Segment -- navigate with arrow`.snap.png and b/cypress/snapshots/web/components/Segment/Segment.component-test.tsx/plasma-web Segment -- navigate with arrow`.snap.png differ diff --git a/cypress/snapshots/web/components/Segment/Segment.component-test.tsx/plasma-web Segment -- with fixed width.snap.png b/cypress/snapshots/web/components/Segment/Segment.component-test.tsx/plasma-web Segment -- with fixed width.snap.png index 8d8f1b6312..93981d7849 100644 Binary files a/cypress/snapshots/web/components/Segment/Segment.component-test.tsx/plasma-web Segment -- with fixed width.snap.png and b/cypress/snapshots/web/components/Segment/Segment.component-test.tsx/plasma-web Segment -- with fixed width.snap.png differ diff --git a/cypress/snapshots/web/components/Tabs/TabsBase.component-test.tsx/plasma-core Tabs -- autoscroll.snap.png b/cypress/snapshots/web/components/Tabs/TabsBase.component-test.tsx/plasma-core Tabs -- autoscroll.snap.png index 1ec0fb54f1..586868a2fd 100644 Binary files a/cypress/snapshots/web/components/Tabs/TabsBase.component-test.tsx/plasma-core Tabs -- autoscroll.snap.png and b/cypress/snapshots/web/components/Tabs/TabsBase.component-test.tsx/plasma-core Tabs -- autoscroll.snap.png differ diff --git a/packages/plasma-b2c/api/plasma-b2c.api.md b/packages/plasma-b2c/api/plasma-b2c.api.md index b2ff196d3a..c4ae3189ad 100644 --- a/packages/plasma-b2c/api/plasma-b2c.api.md +++ b/packages/plasma-b2c/api/plasma-b2c.api.md @@ -95,6 +95,18 @@ import { counterTokens } from '@salutejs/plasma-new-hope/styled-components'; import { CustomComboboxProps } from '@salutejs/plasma-new-hope/types/components/Combobox/Combobox.types'; import { CustomPopoverProps } from '@salutejs/plasma-new-hope/types/components/Popover/Popover.types'; import { CustomToastProps } from '@salutejs/plasma-new-hope/types/components/Toast/Toast.types'; +import { DatePickerCalendarProps } from '@salutejs/plasma-new-hope/types/components/DatePicker/SingleDate/SingleDate.types'; +import { DatePickerCalendarProps as DatePickerCalendarProps_2 } from '@salutejs/plasma-new-hope/types/components/DatePicker/RangeDate/RangeDate.types'; +import { datePickerClasses } from '@salutejs/plasma-new-hope/styled-components'; +import { DatePickerdVariationProps } from '@salutejs/plasma-new-hope/types/components/DatePicker/DatePickerBase.types'; +import { DatePickerPlacement } from '@salutejs/plasma-new-hope/styled-components'; +import { DatePickerPlacementBasic } from '@salutejs/plasma-new-hope/styled-components'; +import { DatePickerPopoverProps } from '@salutejs/plasma-new-hope/types/components/DatePicker/SingleDate/SingleDate.types'; +import { DatePickerProps } from '@salutejs/plasma-new-hope/styled-components'; +import { DatePickerRangePlacement } from '@salutejs/plasma-new-hope/styled-components'; +import { DatePickerRangeProps } from '@salutejs/plasma-new-hope/styled-components'; +import { DatePickerTextFieldProps } from '@salutejs/plasma-new-hope/types/components/DatePicker/SingleDate/SingleDate.types'; +import { datePickerTokens } from '@salutejs/plasma-new-hope/styled-components'; import { defaultValidate } from '@salutejs/plasma-hope'; import { DisabledProps } from '@salutejs/plasma-core'; import { DividerProps } from '@salutejs/plasma-new-hope/styled-components'; @@ -181,6 +193,7 @@ import { ProgressProps } from '@salutejs/plasma-new-hope/styled-components'; import { PropsType } from '@salutejs/plasma-new-hope/types/engines/types'; import { RadioGroup } from '@salutejs/plasma-new-hope/styled-components'; import { radiuses } from '@salutejs/plasma-core'; +import { RangeInputRefs } from '@salutejs/plasma-new-hope/styled-components'; import { RangeProps } from '@salutejs/plasma-new-hope/styled-components'; import { rangeTokens } from '@salutejs/plasma-new-hope/styled-components'; import { Ratio } from '@salutejs/plasma-new-hope/styled-components'; @@ -653,13 +666,17 @@ export const Calendar: FC; export const CalendarBase: FunctionComponent & HTMLAttributes & Calendar_2 & { +}> & Calendar_2 & { type?: "Days" | "Months" | "Years" | undefined; +size?: string | undefined; +view?: string | undefined; } & RefAttributes>; export { CalendarBaseProps } @@ -671,12 +688,17 @@ export const CalendarBaseRange: ({ value, disabledList, eventList, min, max, onC export const CalendarDouble: FunctionComponent & HTMLAttributes & Calendar_2 & RefAttributes>; +}> & HTMLAttributes & Calendar_2 & { +size?: string | undefined; +view?: string | undefined; +} & RefAttributes>; export { CalendarDoubleProps } @@ -963,6 +985,97 @@ export { CounterProps } export { counterTokens } +// @public (undocumented) +export const DatePicker: FunctionComponent & DatePickerdVariationProps & DatePickerTextFieldProps & DatePickerCalendarProps & DatePickerPopoverProps & Omit, "defaultValue"> & RefAttributes>; + +export { datePickerClasses } + +export { DatePickerPlacement } + +export { DatePickerPlacementBasic } + +export { DatePickerProps } + +// @public (undocumented) +export const DatePickerRange: FunctionComponent & DatePickerdVariationProps & { +defaultFirstDate?: Date | undefined; +defaultSecondDate?: Date | undefined; +onCommitFirstDate?: ((value: string | Date, error?: boolean | undefined, success?: boolean | undefined) => void) | undefined; +onCommitSecondDate?: ((value: string | Date, error?: boolean | undefined, success?: boolean | undefined) => void) | undefined; +} & { +label?: string | undefined; +view?: string | undefined; +disabled?: boolean | undefined; +readOnly?: boolean | undefined; +size?: string | undefined; +contentLeft?: ReactNode; +contentRight?: ReactNode; +leftHelper?: string | undefined; +dividerVariant?: "none" | "icon" | "dash" | undefined; +dividerIcon?: ReactNode; +firstValueError?: boolean | undefined; +secondValueError?: boolean | undefined; +firstValueSuccess?: boolean | undefined; +secondValueSuccess?: boolean | undefined; +firstPlaceholder?: string | undefined; +secondPlaceholder?: string | undefined; +firstTextfieldContentLeft?: ReactElement> | undefined; +firstTextfieldContentRight?: ReactElement> | undefined; +secondTextfieldContentLeft?: ReactElement> | undefined; +secondTextfieldContentRight?: ReactElement> | undefined; +firstTextfieldTextBefore?: string | undefined; +secondTextfieldTextBefore?: string | undefined; +firstTextfieldTextAfter?: string | undefined; +secondTextfieldTextAfter?: string | undefined; +onChangeFirstValue?: BaseCallbackChangeInstance | undefined; +onChangeSecondValue?: BaseCallbackChangeInstance | undefined; +onFocusFirstTextfield?: ((event: ChangeEvent) => void) | undefined; +onFocusSecondTextfield?: ((event: ChangeEvent) => void) | undefined; +onBlurFirstTextfield?: ((event: ChangeEvent) => void) | undefined; +onBlurSecondTextfield?: ((event: ChangeEvent) => void) | undefined; +} & DatePickerCalendarProps_2 & Omit & { +placement?: DatePickerRangePlacement | DatePickerRangePlacement[] | undefined; +isDoubleCalendar?: boolean | undefined; +} & HTMLAttributes & RefAttributes>; + +export { DatePickerRangePlacement } + +export { DatePickerRangeProps } + +export { datePickerTokens } + export { defaultValidate } export { DisabledProps } @@ -1671,7 +1784,7 @@ firstTextfieldTextBefore: string; secondTextfieldTextBefore: string; dividerVariant?: "none" | undefined; dividerIcon?: undefined; -} & HTMLAttributes & RefAttributes) | ({ +} & HTMLAttributes & RefAttributes) | ({ label?: string | undefined; leftHelper?: string | undefined; contentLeft?: ReactNode; @@ -1707,7 +1820,7 @@ dividerVariant?: "dash" | undefined; dividerIcon?: undefined; firstTextfieldTextBefore?: string | undefined; secondTextfieldTextBefore?: string | undefined; -} & HTMLAttributes & RefAttributes) | ({ +} & HTMLAttributes & RefAttributes) | ({ label?: string | undefined; leftHelper?: string | undefined; contentLeft?: ReactNode; @@ -1743,7 +1856,7 @@ dividerIcon?: ReactNode; dividerVariant?: "icon" | undefined; firstTextfieldTextBefore?: string | undefined; secondTextfieldTextBefore?: string | undefined; -} & HTMLAttributes & RefAttributes))>; +} & HTMLAttributes & RefAttributes))>; export { Range_2 as Range } export { RangeProps } diff --git a/packages/plasma-b2c/src/components/Calendar/Calendar.tsx b/packages/plasma-b2c/src/components/Calendar/Calendar.tsx index 2b35827380..f034ca3263 100644 --- a/packages/plasma-b2c/src/components/Calendar/Calendar.tsx +++ b/packages/plasma-b2c/src/components/Calendar/Calendar.tsx @@ -7,6 +7,7 @@ import { mergeConfig, } from '@salutejs/plasma-new-hope/styled-components'; import type { CalendarBaseProps, CalendarDoubleProps } from '@salutejs/plasma-new-hope/styled-components'; +import type { FC } from 'react'; import { config as baseConfig } from './CalendarBase.config'; import { config as doubleConfig } from './CalendarDouble.config'; @@ -20,8 +21,8 @@ export const CalendarBaseRange = withRange(CalendarBase); export const CalendarDoubleRange = withRange(CalendarDouble); export const Calendar = boundCalendar({ - base: CalendarBase, + base: CalendarBase as FC, baseRange: CalendarBaseRange, - double: CalendarDouble, + double: CalendarDouble as FC, doubleRange: CalendarDoubleRange, }); diff --git a/packages/plasma-b2c/src/components/Calendar/CalendarBase.config.ts b/packages/plasma-b2c/src/components/Calendar/CalendarBase.config.ts index 3ad7eb625d..83cc1c49de 100644 --- a/packages/plasma-b2c/src/components/Calendar/CalendarBase.config.ts +++ b/packages/plasma-b2c/src/components/Calendar/CalendarBase.config.ts @@ -8,50 +8,142 @@ export const config = { variations: { view: { default: css` - ${calendarBaseTokens.calendarBackgroundColor}: transparent; - ${calendarBaseTokens.calendarSelectedItemBackground}: var(--plasma-colors-primary); - ${calendarBaseTokens.calendarSelectedItemColor}: var(--plasma-colors-background-primary); - ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: var(--plasma-colors-surface-liquid02); - ${calendarBaseTokens.calendarCurrentItemBorderColor}: var(--plasma-colors-primary); + ${calendarBaseTokens.calendarSelectedItemBackground}: var(--surface-solid-default); + ${calendarBaseTokens.calendarSelectedItemColor}: var(--inverse-text-primary); + ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); + ${calendarBaseTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); ${calendarBaseTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarBaseTokens.calendarCurrentItemColorHover}: var(--plasma-colors-primary); - ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: var(--plasma-colors-surface-liquid02); - ${calendarBaseTokens.calendarActiveItemBackground}: var(--plasma-colors-primary); - ${calendarBaseTokens.calendarActiveItemColor}: var(--plasma-colors-surface-solid03); - ${calendarBaseTokens.calendarHoveredItemBackground}: var(--plasma-colors-accent); - ${calendarBaseTokens.calendarHoveredItemColor}: var(--plasma-colors-background-primary); - ${calendarBaseTokens.calendarRangeBackground}: var(--plasma-colors-surface-liquid02); - ${calendarBaseTokens.calendarOutlineFocusColor}: var(--plasma-colors-button-focused); - ${calendarBaseTokens.calendarContentPrimaryColor}: var(--plasma-colors-primary); - ${calendarBaseTokens.calendarContentSecondaryColor}: var(--plasma-colors-secondary); - `, - /** - * @deprecated - * использовать `default` - */ - primary: css` - ${calendarBaseTokens.calendarBackgroundColor}: transparent; - ${calendarBaseTokens.calendarSelectedItemBackground}: var(--plasma-colors-primary); - ${calendarBaseTokens.calendarSelectedItemColor}: var(--plasma-colors-background-primary); - ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: var(--plasma-colors-surface-liquid02); - ${calendarBaseTokens.calendarCurrentItemBorderColor}: var(--plasma-colors-primary); - ${calendarBaseTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarBaseTokens.calendarCurrentItemColorHover}: var(--plasma-colors-primary); - ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: var(--plasma-colors-surface-liquid02); - ${calendarBaseTokens.calendarActiveItemBackground}: var(--plasma-colors-primary); - ${calendarBaseTokens.calendarActiveItemColor}: var(--plasma-colors-surface-solid03); - ${calendarBaseTokens.calendarHoveredItemBackground}: var(--plasma-colors-accent); - ${calendarBaseTokens.calendarHoveredItemColor}: var(--plasma-colors-background-primary); - ${calendarBaseTokens.calendarRangeBackground}: var(--plasma-colors-surface-liquid02); - ${calendarBaseTokens.calendarOutlineFocusColor}: var(--plasma-colors-button-focused); - ${calendarBaseTokens.calendarContentPrimaryColor}: var(--plasma-colors-primary); - ${calendarBaseTokens.calendarContentSecondaryColor}: var(--plasma-colors-secondary); + ${calendarBaseTokens.calendarCurrentItemColorHover}: var(--text-primary); + ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); + ${calendarBaseTokens.calendarActiveItemBackground}: var(--surface-solid-default); + ${calendarBaseTokens.calendarActiveItemColor}: var(--inverse-text-primary); + ${calendarBaseTokens.calendarHoveredItemBackground}: var(--surface-accent); + ${calendarBaseTokens.calendarHoveredItemColor}: var(--text-primary); + ${calendarBaseTokens.calendarRangeBackground}: var(--surface-transparent-secondary); + ${calendarBaseTokens.calendarOutlineFocusColor}: var(--surface-accent); + ${calendarBaseTokens.calendarContentPrimaryColor}: var(--surface-solid-default); + ${calendarBaseTokens.calendarContentSecondaryColor}: var(--text-secondary); + ${calendarBaseTokens.calendarDayOfWeekColor}: var(--text-secondary); + + ${calendarBaseTokens.iconButtonColor}: var(--text-primary); + ${calendarBaseTokens.iconButtonBackgroundColor}: var(--surface-clear); + ${calendarBaseTokens.iconButtonColorHover}: var(--text-primary-hover); + ${calendarBaseTokens.iconButtonBackgroundColorHover}: var(--surface-clear); + ${calendarBaseTokens.iconButtonColorActive}: var(--text-primary-hover); + ${calendarBaseTokens.iconButtonBackgroundColorActive}: var(--surface-clear); + ${calendarBaseTokens.iconButtonFocusColor}: var(--surface-accent); `, }, size: { + l: css` + ${calendarBaseTokens.calendarWidth}: 24.5rem; + ${calendarBaseTokens.calendarHeight}: 25rem; + + ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.75rem; + ${calendarBaseTokens.calendarYearItemWidth}: 7.8125rem; + ${calendarBaseTokens.calendarYearItemHeight}: 5.25rem; + + ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); + ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); + ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); + ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); + ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.75rem; + ${calendarBaseTokens.calendarMonthItemWidth}: 7.8125rem; + ${calendarBaseTokens.calendarMonthItemHeight}: 5.25rem; + + ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); + ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); + ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0; + ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.75rem; + ${calendarBaseTokens.calendarDayItemWidth}: 3.5rem; + ${calendarBaseTokens.calendarDayItemHeight}: 3rem; + + ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); + ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); + ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); + ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); + ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${calendarBaseTokens.calendarHeaderArrowGap}: 0.5rem; + + ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 1rem; + ${calendarBaseTokens.calendarHeaderDateGap}: 0.5rem; + + ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); + ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); + ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); + ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); + ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); + ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + + ${calendarBaseTokens.iconButtonHeight}: 3.5rem; + ${calendarBaseTokens.iconButtonWidth}: 3.5rem; + ${calendarBaseTokens.iconButtonPadding}: 1.5rem; + ${calendarBaseTokens.iconButtonRadius}: 0.875rem; + `, m: css` - ${calendarBaseTokens.calendarHeaderArrowContainerWidth}: 5.5rem; - ${calendarBaseTokens.calendarItemBorderRadius}: 0.5rem; + ${calendarBaseTokens.calendarWidth}: 21rem; + ${calendarBaseTokens.calendarHeight}: 21rem; + + ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.625rem; + ${calendarBaseTokens.calendarYearItemWidth}: 6.688rem; + ${calendarBaseTokens.calendarYearItemHeight}: 4.375rem; + + ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); + ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); + ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); + ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.625rem; + ${calendarBaseTokens.calendarMonthItemWidth}: 6.688rem; + ${calendarBaseTokens.calendarMonthItemHeight}: 4.375rem; + + ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); + ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); + ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0; + ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.625rem; + ${calendarBaseTokens.calendarDayItemWidth}: 3rem; + ${calendarBaseTokens.calendarDayItemHeight}: 2.5rem; + + ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); + ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); + ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); + ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${calendarBaseTokens.calendarHeaderArrowGap}: 0.5rem; + + ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.75rem; + ${calendarBaseTokens.calendarHeaderDateGap}: 0.375rem; + ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); @@ -59,24 +151,133 @@ export const config = { ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + + ${calendarBaseTokens.iconButtonHeight}: 3rem; + ${calendarBaseTokens.iconButtonWidth}: 3rem; + ${calendarBaseTokens.iconButtonPadding}: 1.25rem; + ${calendarBaseTokens.iconButtonRadius}: 0.75rem; + `, + s: css` + ${calendarBaseTokens.calendarWidth}: 17.5rem; + ${calendarBaseTokens.calendarHeight}: 17rem; + + ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.5rem; + ${calendarBaseTokens.calendarYearItemWidth}: 5.5rem; + ${calendarBaseTokens.calendarYearItemHeight}: 3.5rem; + ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.5rem; + ${calendarBaseTokens.calendarMonthItemWidth}: 5.5rem; + ${calendarBaseTokens.calendarMonthItemHeight}: 3.5rem; + ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0; + ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem; + ${calendarBaseTokens.calendarDayItemWidth}: 2.5rem; + ${calendarBaseTokens.calendarDayItemHeight}: 2rem; + ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${calendarBaseTokens.calendarHeaderArrowGap}: 0.5rem; + + ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; + ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; + + ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); + ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); + ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); + ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); + ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); + ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + + ${calendarBaseTokens.iconButtonHeight}: 2.5rem; + ${calendarBaseTokens.iconButtonWidth}: 2.5rem; + ${calendarBaseTokens.iconButtonPadding}: 1rem; + ${calendarBaseTokens.iconButtonRadius}: 0.625rem; + `, + xs: css` + ${calendarBaseTokens.calendarWidth}: 17.5rem; + ${calendarBaseTokens.calendarHeight}: 15.5rem; + + ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; + ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.375rem; + ${calendarBaseTokens.calendarYearItemWidth}: 5.625rem; + ${calendarBaseTokens.calendarYearItemHeight}: 3.281rem; + + ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); + ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); + ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); + ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; + ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.375rem; + ${calendarBaseTokens.calendarMonthItemWidth}: 5.625rem; + ${calendarBaseTokens.calendarMonthItemHeight}: 3.281rem; + + ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); + ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); + ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; + ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem; + ${calendarBaseTokens.calendarDayItemWidth}: 2.5rem; + ${calendarBaseTokens.calendarDayItemHeight}: 1.875rem; + + ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); + ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); + ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); + ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${calendarBaseTokens.calendarHeaderArrowGap}: 0; + + ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; + ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; + + ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); + ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); + ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); + ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); + ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); + ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + + ${calendarBaseTokens.iconButtonHeight}: 2rem; + ${calendarBaseTokens.iconButtonWidth}: 2rem; + ${calendarBaseTokens.iconButtonPadding}: 0.75rem; + ${calendarBaseTokens.iconButtonRadius}: 0.5rem; `, }, }, diff --git a/packages/plasma-b2c/src/components/Calendar/CalendarDouble.config.ts b/packages/plasma-b2c/src/components/Calendar/CalendarDouble.config.ts index 636fd2beaf..bd3cd59543 100644 --- a/packages/plasma-b2c/src/components/Calendar/CalendarDouble.config.ts +++ b/packages/plasma-b2c/src/components/Calendar/CalendarDouble.config.ts @@ -8,51 +8,144 @@ export const config = { variations: { view: { default: css` + ${calendarDoubleTokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); ${calendarDoubleTokens.calendarBackgroundColor}: transparent; - ${calendarDoubleTokens.calendarSelectedItemBackground}: var(--plasma-colors-primary); - ${calendarDoubleTokens.calendarSelectedItemColor}: var(--plasma-colors-background-primary); - ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: var(--plasma-colors-surface-liquid02); - ${calendarDoubleTokens.calendarCurrentItemBorderColor}: var(--plasma-colors-primary); + ${calendarDoubleTokens.calendarSelectedItemBackground}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarSelectedItemColor}: var(--inverse-text-primary); + ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); + ${calendarDoubleTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); ${calendarDoubleTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarDoubleTokens.calendarCurrentItemColorHover}: var(--plasma-colors-primary); - ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: var(--plasma-colors-surface-liquid02); - ${calendarDoubleTokens.calendarActiveItemBackground}: var(--plasma-colors-primary); - ${calendarDoubleTokens.calendarActiveItemColor}: var(--plasma-colors-surface-solid03); - ${calendarDoubleTokens.calendarHoveredItemBackground}: var(--plasma-colors-accent); - ${calendarDoubleTokens.calendarHoveredItemColor}: var(--plasma-colors-background-primary); - ${calendarDoubleTokens.calendarSeparatorBackground}: var(--plasma-colors-surface-liquid02); - ${calendarDoubleTokens.calendarRangeBackground}: var(--plasma-colors-surface-liquid02); - ${calendarDoubleTokens.calendarOutlineFocusColor}: var(--plasma-colors-button-focused); - ${calendarDoubleTokens.calendarContentPrimaryColor}: var(--plasma-colors-primary); - ${calendarDoubleTokens.calendarContentSecondaryColor}: var(--plasma-colors-secondary); - `, - /** - * @deprecated - * использовать `default` - */ - primary: css` - ${calendarDoubleTokens.calendarBackgroundColor}: transparent; - ${calendarDoubleTokens.calendarSelectedItemBackground}: var(--plasma-colors-primary); - ${calendarDoubleTokens.calendarSelectedItemColor}: var(--plasma-colors-background-primary); - ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: var(--plasma-colors-surface-liquid02); - ${calendarDoubleTokens.calendarCurrentItemBorderColor}: var(--plasma-colors-primary); - ${calendarDoubleTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarDoubleTokens.calendarCurrentItemColorHover}: var(--plasma-colors-primary); - ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: var(--plasma-colors-surface-liquid02); - ${calendarDoubleTokens.calendarActiveItemBackground}: var(--plasma-colors-primary); - ${calendarDoubleTokens.calendarActiveItemColor}: var(--plasma-colors-surface-solid03); - ${calendarDoubleTokens.calendarHoveredItemBackground}: var(--plasma-colors-accent); - ${calendarDoubleTokens.calendarHoveredItemColor}: var(--plasma-colors-background-primary); - ${calendarDoubleTokens.calendarSeparatorBackground}: var(--plasma-colors-surface-liquid02); - ${calendarDoubleTokens.calendarRangeBackground}: var(--plasma-colors-surface-liquid02); - ${calendarDoubleTokens.calendarOutlineFocusColor}: var(--plasma-colors-button-focused); - ${calendarDoubleTokens.calendarContentPrimaryColor}: var(--plasma-colors-primary); - ${calendarDoubleTokens.calendarContentSecondaryColor}: var(--plasma-colors-secondary); + ${calendarDoubleTokens.calendarCurrentItemColorHover}: var(--text-primary); + ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); + ${calendarDoubleTokens.calendarActiveItemBackground}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarActiveItemColor}: var(--inverse-text-primary); + ${calendarDoubleTokens.calendarHoveredItemBackground}: var(--surface-accent); + ${calendarDoubleTokens.calendarHoveredItemColor}: var(--text-primary); + ${calendarDoubleTokens.calendarRangeBackground}: var(--surface-transparent-secondary); + ${calendarDoubleTokens.calendarOutlineFocusColor}: var(--surface-accent); + ${calendarDoubleTokens.calendarContentPrimaryColor}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarContentSecondaryColor}: var(--text-secondary); + + ${calendarDoubleTokens.iconButtonColor}: var(--text-primary); + ${calendarDoubleTokens.iconButtonBackgroundColor}: var(--surface-clear); + ${calendarDoubleTokens.iconButtonColorHover}: var(--text-primary-hover); + ${calendarDoubleTokens.iconButtonBackgroundColorHover}: var(--surface-clear); + ${calendarDoubleTokens.iconButtonColorActive}: var(--text-primary-hover); + ${calendarDoubleTokens.iconButtonBackgroundColorActive}: var(--surface-clear); + ${calendarDoubleTokens.iconButtonFocusColor}: var(--surface-accent); `, }, size: { + l: css` + ${calendarDoubleTokens.calendarWidth}: 51.063rem; + ${calendarDoubleTokens.calendarHeight}: 25rem; + + ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.75rem; + ${calendarDoubleTokens.calendarYearItemWidth}: 7.8125rem; + ${calendarDoubleTokens.calendarYearItemHeight}: 5.25rem; + + ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); + ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); + ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.75rem; + ${calendarDoubleTokens.calendarMonthItemWidth}: 7.8125rem; + ${calendarDoubleTokens.calendarMonthItemHeight}: 5.25rem; + + ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); + ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); + ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.75rem; + ${calendarDoubleTokens.calendarDayItemWidth}: 3.5rem; + ${calendarDoubleTokens.calendarDayItemHeight}: 3rem; + + ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); + ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); + ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0.5rem; + + ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; + ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 1rem; + ${calendarDoubleTokens.calendarHeaderDateGap}: 0.5rem; + + ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); + ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); + ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); + ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + + ${calendarDoubleTokens.iconButtonHeight}: 3.5rem; + ${calendarDoubleTokens.iconButtonWidth}: 3.5rem; + ${calendarDoubleTokens.iconButtonPadding}: 1.5rem; + ${calendarDoubleTokens.iconButtonRadius}: 0.875rem; + `, m: css` - ${calendarDoubleTokens.calendarItemBorderRadius}: 0.5rem; + ${calendarDoubleTokens.calendarWidth}: 44.063rem; + ${calendarDoubleTokens.calendarHeight}: 21rem; + + ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.625rem; + ${calendarDoubleTokens.calendarYearItemWidth}: 6.688rem; + ${calendarDoubleTokens.calendarYearItemHeight}: 4.375rem; + + ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); + ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); + ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.625rem; + ${calendarDoubleTokens.calendarMonthItemWidth}: 6.688rem; + ${calendarDoubleTokens.calendarMonthItemHeight}: 4.375rem; + + ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); + ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); + ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; + ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.625rem; + ${calendarDoubleTokens.calendarDayItemWidth}: 3rem; + ${calendarDoubleTokens.calendarDayItemHeight}: 2.5rem; + + ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); + ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); + ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0.5rem; + + ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; + ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.75rem; + ${calendarDoubleTokens.calendarHeaderDateGap}: 0.375rem; + ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); @@ -60,24 +153,133 @@ export const config = { ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + + ${calendarDoubleTokens.iconButtonHeight}: 3rem; + ${calendarDoubleTokens.iconButtonWidth}: 3rem; + ${calendarDoubleTokens.iconButtonPadding}: 1.25rem; + ${calendarDoubleTokens.iconButtonRadius}: 0.75rem; + `, + s: css` + ${calendarDoubleTokens.calendarWidth}: 37.063rem; + ${calendarDoubleTokens.calendarHeight}: 17rem; + + ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.5rem; + ${calendarDoubleTokens.calendarYearItemWidth}: 5.5rem; + ${calendarDoubleTokens.calendarYearItemHeight}: 3.5rem; + ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.5rem; + ${calendarDoubleTokens.calendarMonthItemWidth}: 5.5rem; + ${calendarDoubleTokens.calendarMonthItemHeight}: 3.5rem; + ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.5rem; + ${calendarDoubleTokens.calendarDayItemWidth}: 2.5rem; + ${calendarDoubleTokens.calendarDayItemHeight}: 2rem; + ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0.5rem; + + ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; + ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; + ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; + + ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); + ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); + ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); + ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + + ${calendarDoubleTokens.iconButtonHeight}: 2.5rem; + ${calendarDoubleTokens.iconButtonWidth}: 2.5rem; + ${calendarDoubleTokens.iconButtonPadding}: 1rem; + ${calendarDoubleTokens.iconButtonRadius}: 0.625rem; + `, + xs: css` + ${calendarDoubleTokens.calendarWidth}: 37.063rem; + ${calendarDoubleTokens.calendarHeight}: 15.5rem; + + ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; + ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.375rem; + ${calendarDoubleTokens.calendarYearItemWidth}: 5.625rem; + ${calendarDoubleTokens.calendarYearItemHeight}: 3.281rem; + + ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); + ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); + ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; + ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.375rem; + ${calendarDoubleTokens.calendarMonthItemWidth}: 5.625rem; + ${calendarDoubleTokens.calendarMonthItemHeight}: 3.281rem; + + ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); + ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); + ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; + ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.375rem; + ${calendarDoubleTokens.calendarDayItemWidth}: 2.5rem; + ${calendarDoubleTokens.calendarDayItemHeight}: 1.875rem; + + ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); + ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); + ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0; + + ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; + ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; + + ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); + ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); + ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); + ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + + ${calendarDoubleTokens.iconButtonHeight}: 2rem; + ${calendarDoubleTokens.iconButtonWidth}: 2rem; + ${calendarDoubleTokens.iconButtonPadding}: 0.75rem; + ${calendarDoubleTokens.iconButtonRadius}: 0.5rem; `, }, }, diff --git a/packages/plasma-b2c/src/components/DatePicker/DatePicker.component-test.tsx b/packages/plasma-b2c/src/components/DatePicker/DatePicker.component-test.tsx new file mode 100644 index 0000000000..be760645c8 --- /dev/null +++ b/packages/plasma-b2c/src/components/DatePicker/DatePicker.component-test.tsx @@ -0,0 +1,535 @@ +import React, { useState } from 'react'; +import type { ComponentProps, FC, PropsWithChildren } from 'react'; +import { createGlobalStyle } from 'styled-components'; +import { standard as standardTypo } from '@salutejs/plasma-typo'; +import { IconSber } from '@salutejs/plasma-icons'; +import { mount, CypressTestDecorator, getComponent, PadMe } from '@salutejs/plasma-cy-utils'; + +import { DatePicker as DatePickerB2C, DatePickerRange as DatePickerRangeB2C } from '.'; + +type DatePickerProps = ComponentProps & { + enableContentLeft?: boolean; + enableContentRight?: boolean; +}; + +type DatePickerRangeProps = ComponentProps & { + enableContentLeft?: boolean; + enableContentRight?: boolean; + enableFirstTextfieldContentLeft?: boolean; + enableSecondTextfieldContentLeft?: boolean; + enableFirstTextfieldContentRight?: boolean; + enableSecondTextfieldContentRight?: boolean; +}; + +const StandardTypoStyle = createGlobalStyle(standardTypo); + +describe('plasma-b2c: DatePicker', () => { + const DatePicker = getComponent('DatePicker') as typeof DatePickerB2C; + + const CypressTestDecoratorWithTypo: FC = ({ children }) => ( + + + {children} + + ); + + const Demo = ({ + enableContentLeft, + enableContentRight, + valueError, + valueSuccess, + size = 'xs', + onToggle, + ...rest + }: DatePickerProps) => { + const [isOpen, setIsOpen] = useState(false); + + const iconSize = size === 'xs' ? 'xs' : 's'; + + return ( + : undefined} + contentRight={enableContentRight ? : undefined} + onToggle={(is, e) => { + setIsOpen(is); + onToggle?.(is, e); + }} + onCommitDate={() => setIsOpen(false)} + {...rest} + /> + ); + }; + + it('default', () => { + mount( + + + + + , + ); + + cy.get('#demo input').realClick(); + cy.matchImageSnapshot({ + failureThreshold: 0.02, + failureThresholdType: 'percent', + }); + }); + + it('prop: size l', () => { + mount( + + + , + ); + + cy.get('input').realClick(); + cy.matchImageSnapshot(); + }); + + it('prop: size m', () => { + mount( + + + , + ); + + cy.get('input').realClick(); + cy.matchImageSnapshot(); + }); + + it('prop: size s', () => { + mount( + + + , + ); + + cy.get('input').realClick(); + cy.matchImageSnapshot(); + }); + + it('prop: size xs', () => { + mount( + + + , + ); + + cy.get('input').realClick(); + cy.matchImageSnapshot(); + }); + + it('prop: defaultDate, enableContentLeft, enableContentRight', () => { + mount( + + + , + ); + + cy.get('input').realClick(); + cy.matchImageSnapshot(); + }); + + it('prop: valueError, valueSuccess', () => { + mount( + + + + + , + ); + + cy.matchImageSnapshot(); + }); + + it('prop: label, leftHelper, placeholder', () => { + mount( + + + + + , + ); + + cy.get('#demo input').realClick(); + cy.matchImageSnapshot(); + }); + + it('prop: format', () => { + mount( + + + + + + + , + ); + + cy.matchImageSnapshot(); + }); + + it('prop: disabled, readOnly', () => { + mount( + + + + + , + ); + + cy.matchImageSnapshot(); + }); + + it('prop: placement', () => { + cy.viewport(500, 800); + + mount( + +
+ + + , + ); + + cy.get('input').realClick(); + cy.matchImageSnapshot({ + failureThreshold: 0.02, + failureThresholdType: 'percent', + }); + }); + + it('prop: onToggle, outside click', () => { + mount( + + outer text + { + expect(isOpen).to.be.oneOf([true, false]); + expect(event.type).to.eq('click'); + }} + /> + , + ); + + cy.get('input').click(); + cy.get('#outer').click(); + }); + + it('prop: input date', () => { + mount( + + + , + ); + + cy.get('input').click().type('14.06.2023'); + cy.get('.popover-root').should('be.visible'); + cy.realPress('Enter'); + + cy.matchImageSnapshot(); + }); + + it('prop: input masked date', () => { + mount( + + + , + ); + + cy.get('input').click().type('06'); + cy.get('.popover-root').should('be.visible'); + cy.get('input').should('have.value', '06/'); + cy.get('input').type('14'); + cy.get('input').should('have.value', '06/14/'); + cy.get('input').type('{backspace}'); + cy.get('input').should('have.value', '06/1'); + cy.get('input').type('42023'); + + cy.matchImageSnapshot(); + }); +}); + +describe('plasma-b2c: DatePickerRange', () => { + const DatePickerRange = getComponent('DatePickerRange') as typeof DatePickerRangeB2C; + const IconButton = getComponent('IconButton'); + + const CypressTestDecoratorWithTypo: FC = ({ children }) => ( + + + {children} + + ); + + const Demo = ({ + enableContentLeft, + enableContentRight, + enableFirstTextfieldContentLeft, + enableSecondTextfieldContentLeft, + enableFirstTextfieldContentRight, + enableSecondTextfieldContentRight, + size = 'xs', + onToggle, + ...rest + }: DatePickerRangeProps) => { + const [isOpen, setIsOpen] = useState(false); + + const iconSize = size === 'xs' ? 'xs' : 's'; + + const ActionButton = () => ( + + + + ); + + return ( + : undefined} + contentRight={enableContentRight ? : undefined} + firstTextfieldContentLeft={enableFirstTextfieldContentLeft ? : undefined} + firstTextfieldContentRight={enableFirstTextfieldContentRight ? : undefined} + secondTextfieldContentLeft={enableSecondTextfieldContentLeft ? : undefined} + secondTextfieldContentRight={ + enableSecondTextfieldContentRight ? : undefined + } + onToggle={(is, e) => { + setIsOpen(is); + onToggle?.(is, e); + }} + onCommitSecondDate={() => setIsOpen(false)} + {...rest} + /> + ); + }; + + it('default', () => { + mount( + + + + + , + ); + + cy.get('#demo input').first().realClick(); + cy.matchImageSnapshot({ + failureThreshold: 0.02, + failureThresholdType: 'percent', + }); + }); + + it('prop: size l', () => { + mount( + + + , + ); + + cy.get('input').first().realClick(); + cy.matchImageSnapshot(); + }); + + it('prop: size m', () => { + mount( + + + , + ); + + cy.get('input').first().realClick(); + cy.matchImageSnapshot(); + }); + + it('prop: size s', () => { + mount( + + + , + ); + + cy.get('input').first().realClick(); + cy.matchImageSnapshot(); + }); + + it('prop: size xs', () => { + mount( + + + , + ); + + cy.get('input').first().realClick(); + cy.matchImageSnapshot(); + }); + + it('prop: defaultDate, enableContent', () => { + mount( + + + , + ); + + cy.get('input').first().realClick(); + cy.matchImageSnapshot(); + }); + + it('prop: valueError, valueSuccess', () => { + mount( + + + + + + + , + ); + + cy.matchImageSnapshot(); + }); + + it('prop: label, leftHelper, placeholder', () => { + mount( + + + + + , + ); + + cy.get('#demo input').first().realClick(); + cy.matchImageSnapshot(); + }); + + it('prop: format', () => { + mount( + + + + + + + , + ); + + cy.matchImageSnapshot(); + }); + + it('prop: disabled, readOnly', () => { + mount( + + + + + , + ); + + cy.matchImageSnapshot(); + }); + + it('prop: placement', () => { + cy.viewport(500, 800); + + mount( + +
+ + + , + ); + + cy.get('input').first().realClick(); + cy.matchImageSnapshot(); + }); + + it('prop: onToggle, outside click', () => { + mount( + + outer text + { + expect(isOpen).to.be.oneOf([true, false]); + expect(event.type).to.eq('click'); + }} + /> + , + ); + + cy.get('input').first().click(); + cy.get('#outer').click(); + }); + + it('prop: input date', () => { + mount( + + + , + ); + + cy.get('input').first().click().type('14.06.2023'); + cy.realPress('Enter'); + cy.focused().type('17.06.2023'); + + cy.matchImageSnapshot(); + }); + + it('prop: input date, double calendar', () => { + cy.viewport(900, 800); + + mount( + + + , + ); + + cy.get('input').first().click().type('14.06.2023'); + cy.realPress('Enter'); + cy.focused().type('17.07.2023'); + + cy.matchImageSnapshot(); + }); +}); diff --git a/packages/plasma-b2c/src/components/DatePicker/DatePicker.config.ts b/packages/plasma-b2c/src/components/DatePicker/DatePicker.config.ts new file mode 100644 index 0000000000..eb38c9637a --- /dev/null +++ b/packages/plasma-b2c/src/components/DatePicker/DatePicker.config.ts @@ -0,0 +1,515 @@ +import { datePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; + +export const config = { + defaults: { + view: 'default', + size: 'm', + }, + variations: { + view: { + default: css` + ${tokens.background}: var(--surface-transparent-primary); + ${tokens.backgroundError}: var(--surface-transparent-negative); + ${tokens.backgroundSuccess}: var(--surface-transparent-positive); + + ${tokens.dividerColor}: var(--text-primary); + ${tokens.labelColor}: var(--text-primary); + ${tokens.leftHelperColor}: var(--text-secondary); + + ${tokens.textFieldColor}: var(--text-primary); + ${tokens.textFieldPlaceholderColor}: var(--text-secondary); + ${tokens.textFieldCaretColor}: var(--text-accent); + + ${tokens.textFieldBackgroundColor}: var(--surface-transparent-secondary); + ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); + ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); + ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); + + ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); + ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + + ${tokens.focusColor}: var(--text-accent); + + ${tokens.calendarShadow}: var(--shadow-down-soft-s); + ${tokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); + ${tokens.calendarBackgroundColor}: var(--surface-solid-card); + ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); + ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); + ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemBackgroundHover}: transparent; + ${tokens.calendarCurrentItemColorHover}: var(--text-primary); + ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); + ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); + ${tokens.calendarHoveredItemBackground}: var(--surface-accent); + ${tokens.calendarHoveredItemColor}: var(--text-primary); + ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); + ${tokens.calendarOutlineFocusColor}: var(--surface-accent); + ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); + ${tokens.calendarContentSecondaryColor}: var(--text-secondary); + + ${tokens.iconButtonColor}: var(--text-primary); + ${tokens.iconButtonBackgroundColor}: var(--surface-clear); + ${tokens.iconButtonColorHover}: var(--text-primary-hover); + ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); + ${tokens.iconButtonColorActive}: var(--text-primary-hover); + ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); + ${tokens.iconButtonFocusColor}: var(--surface-accent); + `, + }, + size: { + l: css` + ${tokens.width}: 26.5rem; + ${tokens.borderRadius}: 0.875rem; + + ${tokens.dividerPadding}: 0 0.375rem; + ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + + ${tokens.leftContentMargin}: 0 0 0 1rem; + ${tokens.rightContentMargin}: 0; + + ${tokens.labelOffset}: 0 0 0.75rem 0; + + ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + + ${tokens.textFieldHeight}: 3.5rem; + ${tokens.textFieldBorderRadius}: 0.875rem; + ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + + ${tokens.leftHelperOffset}: 0.25rem 0 0 0; + ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; + ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; + ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; + ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; + + ${tokens.calendarBorderRadius}: 0.875rem; + ${tokens.calendarWidth}: 26.5rem; + + ${tokens.calendarYearsPadding}: 0.5rem 1rem 1.125rem 1rem; + ${tokens.calendarYearItemBorderRadius}: 0.75rem; + ${tokens.calendarYearItemWidth}: 7.8125rem; + ${tokens.calendarYearItemHeight}: 5.25rem; + + ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${tokens.calendarMonthsPadding}: 0.5rem 1rem 1.125rem 1rem; + ${tokens.calendarMonthItemBorderRadius}: 0.75rem; + ${tokens.calendarMonthItemWidth}: 7.8125rem; + ${tokens.calendarMonthItemHeight}: 5.25rem; + + ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${tokens.calendarDaysPadding}: 0.5rem 1rem 1.125rem 1rem; + ${tokens.calendarDayItemBorderRadius}: 0.75rem; + ${tokens.calendarDayItemWidth}: 3.5rem; + ${tokens.calendarDayItemHeight}: 3rem; + + ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${tokens.calendarHeaderWrapperPadding}: 0.875rem 1rem 0 1rem; + ${tokens.calendarHeaderArrowGap}: 0.5rem; + + ${tokens.calendarHeaderPadding}: 0 0 0 1rem; + ${tokens.calendarHeaderDateGap}: 0.5rem; + + ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); + ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); + ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); + ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); + ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); + ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); + ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + + ${tokens.iconButtonHeight}: 3.5rem; + ${tokens.iconButtonWidth}: 3.5rem; + ${tokens.iconButtonPadding}: 1.5rem; + ${tokens.iconButtonRadius}: 0.875rem; + `, + m: css` + ${tokens.width}: 23rem; + ${tokens.borderRadius}: 0.75rem; + + ${tokens.dividerPadding}: 0 0.375rem; + ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + + ${tokens.leftContentMargin}: 0 0 0 0.875rem; + ${tokens.rightContentMargin}: 0; + + ${tokens.labelOffset}: 0 0 0.625rem 0; + + ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + + ${tokens.textFieldHeight}: 3rem; + ${tokens.textFieldBorderRadius}: 0.75rem; + ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + + ${tokens.leftHelperOffset}: 0.25rem 0 0 0; + ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; + ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; + ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; + ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; + + ${tokens.calendarWidth}: 23rem; + ${tokens.calendarBorderRadius}: 0.875rem; + + ${tokens.calendarYearsPadding}: 0.5rem 1rem 1.125rem 1rem; + ${tokens.calendarYearItemBorderRadius}: 0.625rem; + ${tokens.calendarYearItemWidth}: 6.688rem; + ${tokens.calendarYearItemHeight}: 4.375rem; + + ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${tokens.calendarMonthsPadding}: 0.5rem 1rem 1.125rem 1rem; + ${tokens.calendarMonthItemBorderRadius}: 0.625rem; + ${tokens.calendarMonthItemWidth}: 6.688rem; + ${tokens.calendarMonthItemHeight}: 4.375rem; + + ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${tokens.calendarDaysPadding}: 0.5rem 1rem 1.125rem 1rem; + ${tokens.calendarDayItemBorderRadius}: 0.625rem; + ${tokens.calendarDayItemWidth}: 3rem; + ${tokens.calendarDayItemHeight}: 2.5rem; + + ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${tokens.calendarHeaderWrapperPadding}: 0.75rem 1rem 0 1rem; + ${tokens.calendarHeaderArrowGap}: 0.5rem; + + ${tokens.calendarHeaderPadding}: 0 0 0 0.875rem; + ${tokens.calendarHeaderDateGap}: 0.375rem; + + ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); + ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); + ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); + ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); + ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); + ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); + ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + + ${tokens.iconButtonHeight}: 3rem; + ${tokens.iconButtonWidth}: 3rem; + ${tokens.iconButtonPadding}: 1.25rem; + ${tokens.iconButtonRadius}: 0.75rem; + `, + s: css` + ${tokens.width}: 19.5rem; + ${tokens.borderRadius}: 0.625rem; + + ${tokens.dividerPadding}: 0 0.375rem; + ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + + ${tokens.leftContentMargin}: 0 0 0 0.75rem; + ${tokens.rightContentMargin}: 0; + + ${tokens.labelOffset}: 0 0 0.5rem 0; + + ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + + ${tokens.textFieldHeight}: 2.5rem; + ${tokens.textFieldBorderRadius}: 0.625rem; + ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + + ${tokens.leftHelperOffset}: 0.25rem 0 0 0; + ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; + ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; + ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; + ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; + + ${tokens.calendarWidth}: 19.5rem; + ${tokens.calendarBorderRadius}: 0.875rem; + + ${tokens.calendarYearsPadding}: 0.5rem 1rem 0.875rem 1rem; + ${tokens.calendarYearItemBorderRadius}: 0.5rem; + ${tokens.calendarYearItemWidth}: 5.5rem; + ${tokens.calendarYearItemHeight}: 3.5rem; + + ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${tokens.calendarMonthsPadding}: 0.5rem 1rem 0.875rem 1rem; + ${tokens.calendarMonthItemBorderRadius}: 0.5rem; + ${tokens.calendarMonthItemWidth}: 5.5rem; + ${tokens.calendarMonthItemHeight}: 3.5rem; + + ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${tokens.calendarDaysPadding}: 0.5rem 1rem 0.875rem 1rem; + ${tokens.calendarDayItemBorderRadius}: 0.5rem; + ${tokens.calendarDayItemWidth}: 2.5rem; + ${tokens.calendarDayItemHeight}: 2rem; + + ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${tokens.calendarHeaderWrapperPadding}: 0.75rem 1rem 0 1rem; + ${tokens.calendarHeaderArrowGap}: 0.5rem; + + ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; + ${tokens.calendarHeaderDateGap}: 0.25rem; + + ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); + ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); + ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); + ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); + ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); + ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); + ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + + ${tokens.iconButtonHeight}: 2rem; + ${tokens.iconButtonWidth}: 2rem; + ${tokens.iconButtonPadding}: 0.75rem; + ${tokens.iconButtonRadius}: 0.5rem; + `, + xs: css` + ${tokens.width}: 19rem; + ${tokens.borderRadius}: 0.5rem; + + ${tokens.dividerPadding}: 0 0.375rem; + ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.leftContentMargin}: 0 0 0 0.5rem; + ${tokens.rightContentMargin}: 0; + + ${tokens.labelOffset}: 0 0 0.375rem 0; + + ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.textFieldHeight}: 2rem; + ${tokens.textFieldBorderRadius}: 0.5rem; + ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.leftHelperOffset}: 0.25rem 0 0 0; + ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; + ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; + ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; + ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; + + ${tokens.calendarWidth}: 19rem; + ${tokens.calendarBorderRadius}: 0.5rem; + + ${tokens.calendarYearsPadding}: 0.5rem 0.75rem 0.625rem 0.75rem; + ${tokens.calendarYearItemBorderRadius}: 0.375rem; + ${tokens.calendarYearItemWidth}: 5.625rem; + ${tokens.calendarYearItemHeight}: 3.281rem; + + ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${tokens.calendarMonthsPadding}: 0.5rem 0.75rem 0.625rem 0.75rem; + ${tokens.calendarMonthItemBorderRadius}: 0.375rem; + ${tokens.calendarMonthItemWidth}: 5.625rem; + ${tokens.calendarMonthItemHeight}: 3.281rem; + + ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${tokens.calendarDaysPadding}: 0.375rem 0.75rem 0.625rem 0.75rem; + ${tokens.calendarDayItemBorderRadius}: 0.375rem; + ${tokens.calendarDayItemWidth}: 2.5rem; + ${tokens.calendarDayItemHeight}: 2rem; + + ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${tokens.calendarHeaderWrapperPadding}: 0.5rem 0.75rem 0 0.75rem; + ${tokens.calendarHeaderArrowGap}: 0; + + ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; + ${tokens.calendarHeaderDateGap}: 0.25rem; + + ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); + ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); + ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); + ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); + ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); + ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); + ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + + ${tokens.iconButtonHeight}: 2rem; + ${tokens.iconButtonWidth}: 2rem; + ${tokens.iconButtonPadding}: 0.75rem; + ${tokens.iconButtonRadius}: 0.5rem; + `, + }, + disabled: { + true: css` + ${tokens.disabledOpacity}: 0.4; + `, + }, + readOnly: { + true: css` + ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); + ${tokens.labelColorReadOnly}: var(--text-secondary); + ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: var(--text-secondary); + + ${tokens.textFieldColorReadOnly}: var(--text-secondary); + ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); + ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + `, + }, + }, +}; diff --git a/packages/plasma-b2c/src/components/DatePicker/DatePicker.stories.tsx b/packages/plasma-b2c/src/components/DatePicker/DatePicker.stories.tsx new file mode 100644 index 0000000000..a4246bab5c --- /dev/null +++ b/packages/plasma-b2c/src/components/DatePicker/DatePicker.stories.tsx @@ -0,0 +1,255 @@ +import React, { ComponentProps, useRef, useState } from 'react'; +import type { StoryObj, Meta } from '@storybook/react'; +import { action } from '@storybook/addon-actions'; +import { IconPlaceholder, InSpacingDecorator } from '@salutejs/plasma-sb-utils'; + +import { IconButton } from '../IconButton/IconButton'; + +import { DatePicker, DatePickerRange } from './DatePicker'; + +const onChangeValue = action('onChangeValue'); +const onBlur = action('onBlur'); +const onFocus = action('onFocus'); + +const onChangeFirstValue = action('onChangeFirstValue'); +const onChangeSecondValue = action('onChangeSecondValue'); + +const sizes = ['l', 'm', 's', 'xs']; +const views = ['default']; +const dividers = ['none', 'dash', 'icon']; + +const meta: Meta = { + title: 'Controls/DatePicker', + decorators: [InSpacingDecorator], + argTypes: { + view: { + options: views, + control: { + type: 'inline-radio', + }, + }, + size: { + options: sizes, + control: { + type: 'inline-radio', + }, + }, + min: { + control: { + type: 'date', + }, + }, + max: { + control: { + type: 'date', + }, + }, + }, +}; + +export default meta; + +type StoryPropsDefault = ComponentProps & { + enableContentLeft: boolean; + enableContentRight: boolean; +}; + +const StoryDefault = ({ + enableContentLeft, + enableContentRight, + valueError, + valueSuccess, + size, + ...rest +}: StoryPropsDefault) => { + const [isOpen, setIsOpen] = useState(false); + + const iconSize = size === 'xs' ? 'xs' : 's'; + + return ( + : undefined} + contentRight={enableContentRight ? : undefined} + onBlur={onBlur} + onFocus={onFocus} + onToggle={(is) => setIsOpen(is)} + onChangeValue={(e, currentValue) => { + onChangeValue(e, currentValue); + }} + onCommitDate={() => setIsOpen(false)} + {...rest} + /> + ); +}; + +export const Default: StoryObj = { + argTypes: { + defaultDate: { + control: { + type: 'date', + }, + }, + }, + args: { + label: 'Лейбл', + leftHelper: 'Подсказка к полю', + placeholder: '30.05.2024', + size: 'l', + view: 'default', + defaultDate: new Date(2024, 5, 14), + min: new Date(2024, 1, 1), + max: new Date(2024, 12, 29), + maskWithFormat: false, + disabled: false, + readOnly: false, + textBefore: '', + enableContentLeft: true, + enableContentRight: true, + valueError: false, + valueSuccess: false, + }, + render: (args) => , +}; + +type StoryPropsRange = ComponentProps & { + enableContentLeft: boolean; + enableContentRight: boolean; + enableFirstTextfieldContentLeft: boolean; + enableSecondTextfieldContentLeft: boolean; + enableFirstTextfieldContentRight: boolean; + enableSecondTextfieldContentRight: boolean; +}; + +const ActionButton = ({ size }) => { + const iconSize = size === 'xs' ? 'xs' : 's'; + return ( + + + + ); +}; + +const StoryRange = ({ + dividerVariant, + enableContentLeft, + enableContentRight, + firstTextfieldTextBefore, + secondTextfieldTextBefore, + enableFirstTextfieldContentLeft, + enableSecondTextfieldContentLeft, + enableFirstTextfieldContentRight, + enableSecondTextfieldContentRight, + firstValueError, + firstValueSuccess, + secondValueError, + secondValueSuccess, + size, + ...rest +}: StoryPropsRange) => { + const rangeRef = useRef(null); + + const [isOpen, setIsOpen] = useState(false); + const [firstDate, setFirstDate] = useState(''); + + const iconSize = size === 'xs' ? 'xs' : 's'; + const showDividerIcon = dividerVariant === 'icon'; + const showDefaultTextBefore = dividerVariant === 'none'; + + const dividerIconProps = { + dividerIcon: showDividerIcon ? : null, + dividerVariant, + }; + + return ( + : undefined} + contentRight={enableContentRight ? : undefined} + firstTextfieldContentLeft={ + enableFirstTextfieldContentLeft ? : undefined + } + firstTextfieldContentRight={ + enableFirstTextfieldContentRight ? : undefined + } + secondTextfieldContentLeft={ + enableSecondTextfieldContentLeft ? : undefined + } + secondTextfieldContentRight={ + enableSecondTextfieldContentRight ? : undefined + } + firstTextfieldTextBefore={ + showDefaultTextBefore ? firstTextfieldTextBefore || 'С' : firstTextfieldTextBefore + } + secondTextfieldTextBefore={ + showDefaultTextBefore ? secondTextfieldTextBefore || 'ПО' : secondTextfieldTextBefore + } + onToggle={(is) => setIsOpen(is)} + onChangeFirstValue={(e, currentValue) => { + onChangeFirstValue(e, currentValue); + }} + onChangeSecondValue={(e, currentValue) => { + onChangeSecondValue(e, currentValue); + }} + onCommitFirstDate={(currentValue) => { + setFirstDate(currentValue); + }} + onCommitSecondDate={(currentValue) => { + firstDate && currentValue && setIsOpen(false); + }} + {...dividerIconProps} + {...rest} + /> + ); +}; + +export const Range: StoryObj = { + argTypes: { + dividerVariant: { + options: dividers, + control: { + type: 'inline-radio', + }, + }, + }, + args: { + label: 'Лейбл', + leftHelper: 'Подсказка к полю', + firstPlaceholder: '30.05.2024', + secondPlaceholder: '04.06.2024', + firstTextfieldTextBefore: '', + secondTextfieldTextBefore: '', + firstTextfieldTextAfter: '', + secondTextfieldTextAfter: '', + size: 'l', + view: 'default', + isDoubleCalendar: false, + dividerVariant: 'dash', + min: new Date(2024, 1, 1), + max: new Date(2024, 12, 29), + maskWithFormat: false, + disabled: false, + readOnly: false, + enableContentLeft: true, + enableContentRight: true, + enableFirstTextfieldContentLeft: false, + enableFirstTextfieldContentRight: false, + enableSecondTextfieldContentLeft: false, + enableSecondTextfieldContentRight: false, + + firstValueError: false, + firstValueSuccess: false, + secondValueError: false, + secondValueSuccess: false, + }, + render: (args) => , +}; diff --git a/packages/plasma-b2c/src/components/DatePicker/DatePicker.ts b/packages/plasma-b2c/src/components/DatePicker/DatePicker.ts new file mode 100644 index 0000000000..2c664ca314 --- /dev/null +++ b/packages/plasma-b2c/src/components/DatePicker/DatePicker.ts @@ -0,0 +1,14 @@ +import { + datePickerConfig, + datePickerRangeConfig, + component, + mergeConfig, +} from '@salutejs/plasma-new-hope/styled-components'; + +import { config } from './DatePicker.config'; + +const mergedConfig = mergeConfig(datePickerConfig, config); +export const DatePicker = component(mergedConfig); + +const mergedRangeConfig = mergeConfig(datePickerRangeConfig, config); +export const DatePickerRange = component(mergedRangeConfig); diff --git a/packages/plasma-b2c/src/components/DatePicker/index.ts b/packages/plasma-b2c/src/components/DatePicker/index.ts new file mode 100644 index 0000000000..0675665ef9 --- /dev/null +++ b/packages/plasma-b2c/src/components/DatePicker/index.ts @@ -0,0 +1,10 @@ +export type { + DatePickerProps, + DatePickerPlacementBasic, + DatePickerPlacement, + DatePickerRangeProps, + DatePickerRangePlacement, +} from '@salutejs/plasma-new-hope/styled-components'; + +export { DatePicker, DatePickerRange } from './DatePicker'; +export { datePickerClasses, datePickerTokens } from '@salutejs/plasma-new-hope/styled-components'; diff --git a/packages/plasma-b2c/src/components/Range/Range.config.ts b/packages/plasma-b2c/src/components/Range/Range.config.ts index 696fd3f06c..690a3ec80d 100644 --- a/packages/plasma-b2c/src/components/Range/Range.config.ts +++ b/packages/plasma-b2c/src/components/Range/Range.config.ts @@ -44,7 +44,7 @@ export const config = { ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.leftContentMargin}: 0 0.375rem 0 1rem; + ${tokens.leftContentMargin}: 0 0 0 1rem; ${tokens.rightContentMargin}: 0; ${tokens.labelOffset}: 0 0 0.75rem 0; @@ -90,7 +90,7 @@ export const config = { ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.leftContentMargin}: 0 0.375rem 0 0.875rem; + ${tokens.leftContentMargin}: 0 0 0 0.875rem; ${tokens.rightContentMargin}: 0; ${tokens.labelOffset}: 0 0 0.625rem 0; @@ -136,7 +136,7 @@ export const config = { ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.leftContentMargin}: 0 0.375rem 0 0.75rem; + ${tokens.leftContentMargin}: 0 0 0 0.75rem; ${tokens.rightContentMargin}: 0; ${tokens.labelOffset}: 0 0 0.5rem 0; @@ -182,7 +182,7 @@ export const config = { ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.leftContentMargin}: 0 0.25rem 0 0.5rem; + ${tokens.leftContentMargin}: 0 0 0 0.5rem; ${tokens.rightContentMargin}: 0; ${tokens.labelOffset}: 0 0 0.375rem 0; diff --git a/packages/plasma-b2c/src/index.ts b/packages/plasma-b2c/src/index.ts index 11abda57ca..32dfbf523e 100644 --- a/packages/plasma-b2c/src/index.ts +++ b/packages/plasma-b2c/src/index.ts @@ -62,3 +62,4 @@ export * from './components/AvatarGroup'; export * from './components/Indicator'; export * from './components/ButtonBase'; export * from './components/Toolbar'; +export * from './components/DatePicker'; diff --git a/packages/plasma-new-hope/package-lock.json b/packages/plasma-new-hope/package-lock.json index c044d9624a..4c58800af6 100644 --- a/packages/plasma-new-hope/package-lock.json +++ b/packages/plasma-new-hope/package-lock.json @@ -13,6 +13,7 @@ "@linaria/react": "5.0.3", "@popperjs/core": "2.11.8", "@salutejs/plasma-core": "1.160.0", + "dayjs": "1.11.11", "focus-visible": "5.2.0", "lodash.throttle": "4.1.1", "react-draggable": "4.4.3", @@ -7755,6 +7756,11 @@ "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==", "dev": true }, + "node_modules/dayjs": { + "version": "1.11.11", + "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.11.tgz", + "integrity": "sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg==" + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -20067,6 +20073,11 @@ "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==", "dev": true }, + "dayjs": { + "version": "1.11.11", + "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.11.tgz", + "integrity": "sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg==" + }, "debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", diff --git a/packages/plasma-new-hope/package.json b/packages/plasma-new-hope/package.json index f15180a720..45902b4cd8 100644 --- a/packages/plasma-new-hope/package.json +++ b/packages/plasma-new-hope/package.json @@ -99,6 +99,7 @@ "@linaria/react": "5.0.3", "@popperjs/core": "2.11.8", "@salutejs/plasma-core": "1.160.0", + "dayjs": "1.11.11", "focus-visible": "5.2.0", "lodash.throttle": "4.1.1", "react-draggable": "4.4.3", diff --git a/packages/plasma-new-hope/src/components/Calendar/Calendar.tokens.ts b/packages/plasma-new-hope/src/components/Calendar/Calendar.tokens.ts index 4d240e5a6c..d337cd6e6f 100644 --- a/packages/plasma-new-hope/src/components/Calendar/Calendar.tokens.ts +++ b/packages/plasma-new-hope/src/components/Calendar/Calendar.tokens.ts @@ -10,51 +10,102 @@ export const classes = { selectedItem: 'item-selected', currentItem: 'item-current', hoveredItem: 'item-hovered', + doubleHeaderDate: 'double-header-date', + doubleHeaderLastDateWrapper: 'double-header--last-date-wrapper', }; export const tokens = { - calendarBackgroundColor: '--plasma-calendar-background', - calendarHeaderArrowContainerWidth: '--plasma-calendar-arrow-container-width', - calendarItemBorderRadius: '--plasma-calendar-item-border-radius', - calendarSelectedItemBackground: '--plasma-calendar-selected-item-background', - calendarSelectedItemColor: '--plasma-calendar-selected-item-color', - calendarSelectableItemBackgroundHover: '--plasma-calendar-selectable-item-bg-hover', - calendarCurrentItemBorderColor: '--plasma-calendar-current-item-border-color', - calendarCurrentItemBackgroundHover: '--plasma-calendar-current-item-bg-hover', - calendarCurrentItemColorHover: '--plasma-calendar-current-item-color-hover', - calendarCurrentItemChildBackgroundHover: '--plasma-calendar-current-item-child-bg-hover', - calendarActiveItemBackground: '--plasma-calendar-active-item-bg', - calendarActiveItemColor: '--plasma-calendar-active-item-color', - calendarHoveredItemBackground: '--plasma-calendar-hovered-item-bg', - calendarHoveredItemColor: '--plasma-calendar-hovered-item-color', - calendarSeparatorBackground: '--plasma-calendar-separator-background', - calendarRangeBackground: '--plasma-calendar-range-background', - calendarOutlineFocusColor: '--plasma-calendar-outline-focus-color', - calendarContentPrimaryColor: '--plasma-calendar-content-primary-color', - calendarContentSecondaryColor: '--plasma-calendar-content-secondary-color', - calendarHeaderFontFamily: '--plasma-calendar-header-font-family', - calendarHeaderFontSize: '--plasma-calendar-header-font-size', - calendarHeaderFontStyle: '--plasma-calendar-header-font-style', - calendarHeaderFontLetterSpacing: '--plasma-calendar-header-font-letter-spacing', - calendarHeaderFontLineHeight: '--plasma-calendar-header-line-height', - calendarHeaderFontWeight: '--plasma-calendar-header-font-weight', - calendarHeaderFontWeightBold: '--plasma-calendar-header-font-weight-bold', + calendarWidth: '--plasma-calendar-width', + calendarHeight: '--plasma-calendar-height', + + /* Токены размера сетки лет */ + calendarYearsPadding: '--plasma-calendar-years-padding', + calendarYearItemBorderRadius: '--plasma-calendar-year-item-border-radius', + calendarYearItemWidth: '--plasma-calendar-year-item-width', + calendarYearItemHeight: '--plasma-calendar-year-item-height', + calendarYearFontFamily: '--plasma-calendar-year-font-family', calendarYearFontSize: '--plasma-calendar-year-font-size', calendarYearFontStyle: '--plasma-calendar-year-font-style', calendarYearFontLetterSpacing: '--plasma-calendar-year-font-letter-spacing', calendarYearFontLineHeight: '--plasma-calendar-year-line-height', calendarYearFontWeight: '--plasma-calendar-year-font-weight', + calendarYearSelectedFontWeight: '--plasma-calendar-year-selected-font-weight', + + /* Токены размера сетки месяцев */ + calendarMonthsPadding: '--plasma-calendar-months-padding', + calendarMonthItemBorderRadius: '--plasma-calendar-month-item-border-radius', + calendarMonthItemWidth: '--plasma-calendar-month-item-width', + calendarMonthItemHeight: '--plasma-calendar-month-item-height', + calendarMonthFontFamily: '--plasma-calendar-month-font-family', calendarMonthFontSize: '--plasma-calendar-month-font-size', calendarMonthFontStyle: '--plasma-calendar-month-font-style', calendarMonthFontLetterSpacing: '--plasma-calendar-month-font-letter-spacing', calendarMonthFontLineHeight: '--plasma-calendar-month-line-height', calendarMonthFontWeight: '--plasma-calendar-month-font-weight', + calendarMonthSelectedFontWeight: '--plasma-calendar-month-selected-font-weight', + + /* Токены размера сетки дней */ + calendarDaysPadding: '--plasma-calendar-days-padding', + calendarDayItemBorderRadius: '--plasma-calendar-day-item-border-radius', + calendarDayItemWidth: '--plasma-calendar-day-item-width', + calendarDayItemHeight: '--plasma-calendar-day-item-height', + calendarDayFontFamily: '--plasma-calendar-day-font-family', calendarDayFontSize: '--plasma-calendar-day-font-size', calendarDayFontStyle: '--plasma-calendar-day-font-style', calendarDayFontLetterSpacing: '--plasma-calendar-day-font-letter-spacing', calendarDayFontLineHeight: '--plasma-calendar-day-line-height', calendarDayFontWeight: '--plasma-calendar-day-font-weight', + calendarDaySelectedFontWeight: '--plasma-calendar-day-selected-font-weight', + + calendarDayOfWeekColor: '--plasma-calendar-day-of-the-week-color', + + /* Токены шапки календаря */ + calendarHeaderWrapperPadding: '--plasma-calendar-header-wrapper-padding', + calendarHeaderArrowGap: '--plasma-calendar-arrow-container-gap', + calendarHeaderArrowPadding: '--plasma-calendar-arrow-container-padding', + + calendarHeaderPadding: '--plasma-calendar-header-padding', + calendarHeaderDateGap: '--plasma-calendar-header-date-gap', + + calendarHeaderFontFamily: '--plasma-calendar-header-font-family', + calendarHeaderFontSize: '--plasma-calendar-header-font-size', + calendarHeaderFontStyle: '--plasma-calendar-header-font-style', + calendarHeaderFontLetterSpacing: '--plasma-calendar-header-font-letter-spacing', + calendarHeaderFontLineHeight: '--plasma-calendar-header-line-height', + calendarHeaderFontWeight: '--plasma-calendar-header-font-weight', + calendarHeaderFontWeightBold: '--plasma-calendar-header-font-weight-bold', + + /* Токены стрелок навигации календаря */ + iconButtonColor: '--plasma-calendar-icon-button-color', + iconButtonBackgroundColor: '--plasma-calendar-icon-button-background', + iconButtonColorHover: '--plasma-calendar-icon-button-color-hover', + iconButtonBackgroundColorHover: '--plasma-calendar-icon-button-background-hover', + iconButtonColorActive: '--plasma-calendar-icon-button-color-active', + iconButtonBackgroundColorActive: '--plasma-calendar-icon-button-background-active', + iconButtonHeight: '--plasma-calendar-icon-button-height', + iconButtonWidth: '--plasma-calendar-icon-button-width', + iconButtonPadding: '--plasma-calendar-icon-button-padding', + iconButtonRadius: '--plasma-calendar-icon-button-radius', + iconButtonFocusColor: '--plasma-calendar-icon-button-focus-color', + + calendarBackgroundColor: '--plasma-calendar-background', + calendarSelectedItemBackground: '--plasma-calendar-selected-item-background', + calendarSelectedItemColor: '--plasma-calendar-selected-item-color', + calendarSelectableItemBackgroundHover: '--plasma-calendar-selectable-item-bg-hover', + calendarCurrentItemBorderColor: '--plasma-calendar-current-item-border-color', + calendarCurrentItemBackgroundHover: '--plasma-calendar-current-item-bg-hover', + calendarCurrentItemColorHover: '--plasma-calendar-current-item-color-hover', + calendarCurrentItemChildBackgroundHover: '--plasma-calendar-current-item-child-bg-hover', + calendarActiveItemBackground: '--plasma-calendar-active-item-bg', + calendarActiveItemColor: '--plasma-calendar-active-item-color', + calendarHoveredItemBackground: '--plasma-calendar-hovered-item-bg', + calendarHoveredItemColor: '--plasma-calendar-hovered-item-color', + calendarSeparatorBackground: '--plasma-calendar-separator-background', + calendarRangeBackground: '--plasma-calendar-range-background', + calendarOutlineFocusColor: '--plasma-calendar-outline-focus-color', + calendarContentPrimaryColor: '--plasma-calendar-content-primary-color', + calendarContentSecondaryColor: '--plasma-calendar-content-secondary-color', }; diff --git a/packages/plasma-new-hope/src/components/Calendar/Calendar.types.ts b/packages/plasma-new-hope/src/components/Calendar/Calendar.types.ts index d59bc8584f..3d05e65d43 100644 --- a/packages/plasma-new-hope/src/components/Calendar/Calendar.types.ts +++ b/packages/plasma-new-hope/src/components/Calendar/Calendar.types.ts @@ -119,7 +119,7 @@ export type CalendarRange = Omit & { /** * Выбранное значение. */ - value: [Date, Date?]; + value: [Date?, Date?]; /** * Обработчик изменения значения. */ diff --git a/packages/plasma-new-hope/src/components/Calendar/CalendarBase/CalendarBase.styles.ts b/packages/plasma-new-hope/src/components/Calendar/CalendarBase/CalendarBase.styles.ts index 255fa6c98d..43787a45d4 100644 --- a/packages/plasma-new-hope/src/components/Calendar/CalendarBase/CalendarBase.styles.ts +++ b/packages/plasma-new-hope/src/components/Calendar/CalendarBase/CalendarBase.styles.ts @@ -1,13 +1,15 @@ import { css } from '@linaria/core'; import { styled } from '@linaria/react'; +import { tokens } from '../Calendar.tokens'; + export const StyledCalendar = css` position: relative; user-select: none; z-index: 1; - width: 19.5rem; - height: 19.5rem; + width: var(${tokens.calendarWidth}); + height: var(${tokens.calendarHeight}); `; export const IsOutOfRange = styled.div` diff --git a/packages/plasma-new-hope/src/components/Calendar/CalendarBase/CalendarBase.tsx b/packages/plasma-new-hope/src/components/Calendar/CalendarBase/CalendarBase.tsx index 34a3ae6907..3193424274 100644 --- a/packages/plasma-new-hope/src/components/Calendar/CalendarBase/CalendarBase.tsx +++ b/packages/plasma-new-hope/src/components/Calendar/CalendarBase/CalendarBase.tsx @@ -1,4 +1,13 @@ -import React, { useCallback, useMemo, useReducer, useState, KeyboardEvent, HTMLAttributes, forwardRef } from 'react'; +import React, { + useCallback, + useMemo, + useReducer, + useState, + KeyboardEvent, + HTMLAttributes, + forwardRef, + useEffect, +} from 'react'; import type { Calendar, DateObject, UseKeyNavigationProps } from '../Calendar.types'; import type { CalendarStateType } from '../store/types'; @@ -13,13 +22,20 @@ import { base as viewCSS } from './variations/_view/base'; import { base as sizeCSS } from './variations/_size/base'; import { IsOutOfRange, StyledCalendar } from './CalendarBase.styles'; -export type CalendarBaseProps = HTMLAttributes & - Calendar & { - /** - * Тип отображения календаря: дни, месяца, года. - */ - type?: CalendarStateType; - }; +export type CalendarBaseProps = Calendar & { + /** + * Тип отображения календаря: дни, месяца, года. + */ + type?: CalendarStateType; + /** + * Размер календаря. + */ + size?: string; + /** + * Вид календаря. + */ + view?: string; +}; /** * Компонент календаря. @@ -190,6 +206,12 @@ export const calendarBaseRoot = (Root: RootProps { + if (!prevValue) { + setPrevValue(value); + } + }, [value, prevValue]); + return ( {isOutOfRange && ( @@ -204,6 +226,7 @@ export const calendarBaseRoot = (Root: RootProps )} & Calendar; +export type CalendarDoubleProps = HTMLAttributes & + Calendar & { + /** + * Размер календаря. + */ + size?: string; + /** + * Вид календаря. + */ + view?: string; + }; /** * Компонент двойного календаря. @@ -119,10 +129,17 @@ export const calendarDoubleRoot = (Root: RootProps { + if (!prevValue) { + setPrevValue(value); + } + }, [value, prevValue]); + return ( (Component: React.FC) => ...rest }: CalendarRange): ReactElement => { const [startExternalValue, endExternalValue] = useMemo(() => value, [value]); - const [[startValue, endValue], setValues] = useState<[Date, Date?]>([startExternalValue, endExternalValue]); + const [[startValue, endValue], setValues] = useState<[Date?, Date?]>([startExternalValue, endExternalValue]); const [prevValue, setPrevValue] = useState(value); if (isValueUpdate(value, prevValue)) { diff --git a/packages/plasma-new-hope/src/components/Calendar/hooks/useDays.ts b/packages/plasma-new-hope/src/components/Calendar/hooks/useDays.ts index 543213661b..fe0d5fddf5 100644 --- a/packages/plasma-new-hope/src/components/Calendar/hooks/useDays.ts +++ b/packages/plasma-new-hope/src/components/Calendar/hooks/useDays.ts @@ -272,4 +272,4 @@ export const useDays = ( } return getMatrix(days); - }, [date, value, eventList, disabledList, max, min]); + }, [date, value, eventList, disabledList, max, min, includeEdgeDates]); diff --git a/packages/plasma-new-hope/src/components/Calendar/mixins/active.ts b/packages/plasma-new-hope/src/components/Calendar/mixins/active.ts new file mode 100644 index 0000000000..d7c3d6f29d --- /dev/null +++ b/packages/plasma-new-hope/src/components/Calendar/mixins/active.ts @@ -0,0 +1,26 @@ +type ActiveProps = { + /** + * Цвет фона нажатого элемента. + */ + activeBackground?: string; + /** + * Цвет текста нажатого элемента. + */ + activeColor?: string; + /** + * Начертание шрифта. + */ + activeFontWeight?: string; +}; + +export const addActive = (args: ActiveProps) => { + const { activeBackground, activeColor, activeFontWeight } = args; + + return ` + &:active { + background-color: ${activeBackground}; + color: ${activeColor}; + font-weight: ${activeFontWeight}; + } + `; +}; diff --git a/packages/plasma-new-hope/src/components/Calendar/mixins/flex.ts b/packages/plasma-new-hope/src/components/Calendar/mixins/flex.ts new file mode 100644 index 0000000000..c2ae73b54f --- /dev/null +++ b/packages/plasma-new-hope/src/components/Calendar/mixins/flex.ts @@ -0,0 +1,11 @@ +export const flexCenter = ` + display: flex; + justify-content: center; + align-items: center; +`; + +export const flexSpaceBetween = ` + display: flex; + justify-content: space-between; + align-items: center; +`; diff --git a/packages/plasma-new-hope/src/components/Calendar/mixins/index.ts b/packages/plasma-new-hope/src/components/Calendar/mixins/index.ts index 9831f86f47..b7b6732f33 100644 --- a/packages/plasma-new-hope/src/components/Calendar/mixins/index.ts +++ b/packages/plasma-new-hope/src/components/Calendar/mixins/index.ts @@ -1,93 +1,3 @@ -import { styled } from '@linaria/react'; - -import { tokens } from '../Calendar.tokens'; -import { addFocus } from '../../../mixins'; - -export const flexCenter = ` - display: flex; - justify-content: center; - align-items: center; -`; - -export const flexSpaceBetween = ` - display: flex; - justify-content: space-between; - align-items: center; -`; - -/** - * Миксин для установки синтетического фокуса на выбранной кнопке. - */ -export const buttonFocus = styled.button` - border: none; - background-color: transparent; - padding: 0; - outline: none; - - ${addFocus({ - outlineSize: '0.063rem', - outlineOffset: '-0.125rem', - outlineColor: `var(${tokens.calendarOutlineFocusColor})`, - outlineRadius: '0.563rem', - })}; -`; - -/** - * Миксины для изменения стиля выбранного дня. - */ -const active = ` - &:active { - background-color: var(--calendar_private-active-background); - color: var(--calendar_private-active-color); - font-weight: var(--plasma-typo-body-s-bold-font-weight); - } -`; - -/* - * Если использовать токены и классы из ./tokens rollup ругается на этот миксин - */ -export const selectedMixin = ` - outline: none; - cursor: pointer; - - &:hover:not(.item-selected) { - background-color: var(--calendar_private-selectable-background-hover); - - ${String(active)}; - }; - - &.item-selected { - border: 0; - background-color: var(--calendar_private-selected-background); - color: var(--calendar_private-selected-color); - cursor: default; - font-weight: var(--plasma-typo-body-s-bold-font-weight); - }; - - &.item-current { - border: 0.063rem solid var(--calendar_private-current-border-color); - - &:not(.item-selected):hover { - background-color: var(--calendar_private-current-background-hover); - color: var(--calendar_private-current-color-hover); - - & > div:first-of-type { - background-color: var(--calendar_private-current-child-background-hover); - min-width: var(--calendar_private-selected-min-width); - min-height: var(--calendar_private-selected-min-height); - } - - ${String(active)}; - } - }; - - &.item-hovered, &.item-hovered:hover { - background-color: var(--calendar_private-hovered-background); - color: var(--calendar_private-hovered-color); - cursor: pointer; - font-weight: var(--plasma-typo-body-s-bold-font-weight); - ${String(active)}; - } - - ${String(active)}; -`; +export { addActive } from './active'; +export { addSelected } from './selected'; +export * from './flex'; diff --git a/packages/plasma-new-hope/src/components/Calendar/mixins/selected.ts b/packages/plasma-new-hope/src/components/Calendar/mixins/selected.ts new file mode 100644 index 0000000000..ef986a4cd5 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Calendar/mixins/selected.ts @@ -0,0 +1,103 @@ +import { classes } from '../Calendar.tokens'; + +import { addActive } from './active'; + +export type SelectedProps = { + /** + * Минимальная ширина дочернего дива. + */ + minWidth?: string; + /** + * Минимальная высота дочернего дива. + */ + minHeight?: string; + /** + * Начертание шрифта. + */ + selectedFontWeight?: string; + /** + * Цвет фона выбранного элемента. + */ + selectedBackground?: string; + /** + * Цвет текста выбранного элемента. + */ + selectedColor?: string; + /** + * Цвет фона элемента, который можно выбрать. + */ + selectableBackgroundHover?: string; + /** + * Цвет границы сегодняшнего дня. + */ + currentBorderColor?: string; + /** + * Цвет фона нажатого элемента. + */ + activeBackground?: string; + /** + * Цвет текста нажатого элемента. + */ + activeColor?: string; +}; + +export const addSelected = (args: SelectedProps) => { + const { + minWidth, + minHeight, + selectedFontWeight, + selectedBackground, + selectedColor, + selectableBackgroundHover, + currentBorderColor, + activeBackground, + activeColor, + } = args; + + return ` + outline: none; + cursor: pointer; + + &:hover { + background-color: ${selectableBackgroundHover}; + }; + + + &.${classes.hoveredItem}, &.${classes.hoveredItem}:hover { + background-color: ${selectedBackground}; + color: ${selectedColor}; + cursor: pointer; + font-weight: ${selectedFontWeight}; + } + + &.${classes.selectedItem}:not(.${classes.currentItem}) { + border: 0; + background-color: ${selectedBackground}; + color: ${selectedColor}; + cursor: default; + font-weight: ${selectedFontWeight}; + }; + + ${addActive({ + activeBackground, + activeColor, + activeFontWeight: selectedFontWeight, + })}; + + &.${classes.currentItem} { + border: 0.063rem solid ${currentBorderColor}; + + &.${classes.selectedItem} { + background-color: initial; + color: ${selectedColor}; + font-weight: ${selectedFontWeight}; + + & > div:first-of-type { + background-color: ${selectedBackground}; + min-width: ${minWidth}; + min-height: ${minHeight}; + } + } + }; + `; +}; diff --git a/packages/plasma-new-hope/src/components/Calendar/ui/CalendarDayItem/CalendarDayItem.styles.ts b/packages/plasma-new-hope/src/components/Calendar/ui/CalendarDayItem/CalendarDayItem.styles.ts index 9f6bb40c7b..0258d2b9da 100644 --- a/packages/plasma-new-hope/src/components/Calendar/ui/CalendarDayItem/CalendarDayItem.styles.ts +++ b/packages/plasma-new-hope/src/components/Calendar/ui/CalendarDayItem/CalendarDayItem.styles.ts @@ -2,17 +2,17 @@ import { styled } from '@linaria/react'; import { FocusProps } from '@salutejs/plasma-core'; import type { DayProps } from '../../Calendar.types'; -import { flexCenter, selectedMixin } from '../../mixins'; import { classes, tokens } from '../../Calendar.tokens'; import { addFocus } from '../../../../mixins'; +import { addSelected, flexCenter } from '../../mixins'; const inRange = () => ` &:before { content: ''; z-index: -1; position: absolute; - width: 2.5rem; - height: 1.875rem; + width: 100%; + height: calc(100% - 0.125rem); background: var(${tokens.calendarRangeBackground}); } `; @@ -22,14 +22,14 @@ const sideInRange = () => ` content: ''; z-index: -1; position: absolute; - width: 0.313rem; - height: 1.875rem; + width: 0.75rem; + height: calc(100% - 0.125rem); background: var(${tokens.calendarRangeBackground}); } `; export const StyledDay = styled.div<{ offset: number }>` - border-radius: 0.375rem; + border-radius: calc(var(${tokens.calendarDayItemBorderRadius}) - 0.125rem); ${String(flexCenter)}; @@ -54,25 +54,13 @@ export const StyledDay = styled.div<{ offset: number }>` } `; -const dayOfWeek = () => ` - color: var(--plasma-colors-tertiary); -`; - const disabledDay = () => ` cursor: not-allowed; opacity: 0.4; - - ${addFocus({ - outlineSize: '0.063rem', - outlineOffset: '-0.063rem', - outlineColor: `var(${tokens.calendarOutlineFocusColor})`, - outlineRadius: '0.563rem', - })}; `; const disabledCurrentDay = () => ` ${disabledDay()}; - --calendar_private-add-focus-outline-offset: 0.125rem; `; export const StyledDayRoot = styled.div` @@ -86,10 +74,10 @@ export const StyledDayRoot = styled.div` position: relative; box-sizing: border-box; - min-width: 2.5rem; - min-height: 2rem; + min-width: var(${tokens.calendarDayItemWidth}); + min-height: var(${tokens.calendarDayItemHeight}); - border-radius: var(${tokens.calendarItemBorderRadius}); + border-radius: var(${tokens.calendarDayItemBorderRadius}); ${String(flexCenter)}; @@ -100,41 +88,65 @@ export const StyledDayRoot = styled.div` visibility: ${({ isDayInCurrentMonth, isDouble }) => (!isDayInCurrentMonth && isDouble ? 'hidden' : 'visible')}; &.${String(classes.selectableItem)} { - --calendar_private-selected-min-width: 2.25rem; - --calendar_private-selected-min-height: 1.75rem; - --calendar_private-selected-background: var(${tokens.calendarSelectedItemBackground}); - --calendar_private-selected-color: var(${tokens.calendarSelectedItemColor}); - --calendar_private-selectable-background-hover: var(${tokens.calendarSelectableItemBackgroundHover}); - --calendar_private-current-border-color: var(${tokens.calendarCurrentItemBorderColor}); - --calendar_private-current-background-hover: var(${tokens.calendarCurrentItemBackgroundHover}); - --calendar_private-current-color-hover: var(${tokens.calendarCurrentItemColorHover}); - --calendar_private-current-child-background-hover: var(${tokens.calendarCurrentItemChildBackgroundHover}); - --calendar_private-active-background: var(${tokens.calendarActiveItemBackground}); - --calendar_private-active-color: var(${tokens.calendarActiveItemColor}); - --calendar_private-hovered-background: var(${tokens.calendarHoveredItemBackground}); - --calendar_private-hovered-color: var(${tokens.calendarHoveredItemColor}); + ${addSelected({ + minWidth: `calc(var(${tokens.calendarDayItemWidth}) - 0.25rem)`, + minHeight: `calc(var(${tokens.calendarDayItemHeight}) - 0.25rem)`, + selectedFontWeight: `var(${tokens.calendarDaySelectedFontWeight})`, + selectedBackground: `var(${tokens.calendarSelectedItemBackground})`, + selectedColor: `var(${tokens.calendarSelectedItemColor})`, + selectableBackgroundHover: `var(${tokens.calendarSelectableItemBackgroundHover})`, + currentBorderColor: `var(${tokens.calendarCurrentItemBorderColor})`, + activeBackground: `var(${tokens.calendarActiveItemBackground})`, + activeColor: `var(${tokens.calendarActiveItemColor})`, + })}; ${addFocus({ outlineSize: '0.063rem', - outlineOffset: '-0.063rem', + outlineOffset: '-0.125rem', outlineColor: `var(${tokens.calendarOutlineFocusColor})`, - outlineRadius: '0.563rem', + outlineRadius: `calc(var(${tokens.calendarDayItemBorderRadius}) + 0.125rem)`, })}; - ${String(selectedMixin)}; + &.${classes.currentItem} { + ${addFocus({ + outlineSize: '0.063rem', + outlineOffset: '-0.1875rem', + outlineColor: `var(${tokens.calendarOutlineFocusColor})`, + outlineRadius: `calc(var(${tokens.calendarDayItemBorderRadius}) + 0.125rem)`, + })}; + } } - &.${String(classes.dayOfWeek)} { - ${dayOfWeek()}; + &.${classes.dayOfWeek} { + color: var(${tokens.calendarDayOfWeekColor}); } - &.${String(classes.dayDisabled)} { + &.${classes.dayDisabled} { ${disabledDay()}; } - &.${String(classes.dayDisabledCurrent)} { + &.${classes.dayDisabledCurrent} { ${disabledCurrentDay()}; } + + &.${classes.currentItem} { + & > .${classes.dayInRange}:before { + width: calc(100% + 2px); + height: 100%; + } + + & > .${classes.daySideRight}:before { + width: 100%; + right: -1px; + left: unset; + } + + & > .${classes.daySideLeft}:before { + width: 100%; + left: -1px; + right: unset; + } + } `; export const StyledEvents = styled.div` diff --git a/packages/plasma-new-hope/src/components/Calendar/ui/CalendarDays/CalendarDays.styles.ts b/packages/plasma-new-hope/src/components/Calendar/ui/CalendarDays/CalendarDays.styles.ts index 34d67f2444..ac6c994efb 100644 --- a/packages/plasma-new-hope/src/components/Calendar/ui/CalendarDays/CalendarDays.styles.ts +++ b/packages/plasma-new-hope/src/components/Calendar/ui/CalendarDays/CalendarDays.styles.ts @@ -1,6 +1,7 @@ import { styled } from '@linaria/react'; import { flexCenter } from '../../mixins'; +import { tokens } from '../../Calendar.tokens'; export const StyledFlex = styled.div` ${String(flexCenter)}; @@ -9,7 +10,7 @@ export const StyledFlex = styled.div` export const StyledCalendarDays = styled.div` outline: none; - padding: 0.5rem 1rem 1.5rem; + padding: var(${tokens.calendarDaysPadding}); box-sizing: border-box; `; diff --git a/packages/plasma-new-hope/src/components/Calendar/ui/CalendarHeader/CalendarHeader.styles.ts b/packages/plasma-new-hope/src/components/Calendar/ui/CalendarHeader/CalendarHeader.styles.ts index e4d5725bae..42b0697489 100644 --- a/packages/plasma-new-hope/src/components/Calendar/ui/CalendarHeader/CalendarHeader.styles.ts +++ b/packages/plasma-new-hope/src/components/Calendar/ui/CalendarHeader/CalendarHeader.styles.ts @@ -1,77 +1,117 @@ import { styled } from '@linaria/react'; -import { buttonFocus, flexCenter } from '../../mixins'; -import { tokens } from '../../Calendar.tokens'; +import { classes, tokens } from '../../Calendar.tokens'; +import { component, mergeConfig } from '../../../../engines'; +import { iconButtonConfig, iconButtonTokens } from '../../../IconButton'; +import { flexCenter } from '../../mixins'; +import { addFocus } from '../../../../mixins'; -export const StyledCalendarHeader = styled.div` - padding: 1rem 1.5rem 0; - font-family: var(${tokens.calendarHeaderFontFamily}); - font-size: var(${tokens.calendarHeaderFontSize}); - font-style: var(${tokens.calendarHeaderFontStyle}); - font-weight: var(${tokens.calendarHeaderFontWeightBold}); - letter-spacing: var(${tokens.calendarHeaderFontLetterSpacing}); - line-height: var(${tokens.calendarHeaderFontLineHeight}); +const mergedIconButtonConfig = mergeConfig(iconButtonConfig); +const IconButton = component(mergedIconButtonConfig); +export const StyledCalendarHeader = styled.div` display: flex; justify-content: space-between; align-items: center; + padding: var(${tokens.calendarHeaderWrapperPadding}); `; -export const StyledHeader = styled(buttonFocus)` - color: var(${tokens.calendarContentPrimaryColor}); - cursor: pointer; - padding: 0.5rem 0; +export const StyledHeader = styled.button` + border: none; + background-color: transparent; + padding: 0; + outline: none; font-family: var(${tokens.calendarHeaderFontFamily}); font-size: var(${tokens.calendarHeaderFontSize}); font-style: var(${tokens.calendarHeaderFontStyle}); font-weight: var(${tokens.calendarHeaderFontWeightBold}); letter-spacing: var(${tokens.calendarHeaderFontLetterSpacing}); line-height: var(${tokens.calendarHeaderFontLineHeight}); + padding: var(${tokens.calendarHeaderPadding}); + color: var(${tokens.calendarContentPrimaryColor}); + + cursor: pointer; display: flex; + gap: var(${tokens.calendarHeaderDateGap}); justify-content: space-between; align-items: center; -`; -export const StyledHeaderDouble = styled.h4` - font-family: var(${tokens.calendarHeaderFontFamily}); - font-size: var(${tokens.calendarHeaderFontSize}); - font-style: var(${tokens.calendarHeaderFontStyle}); - font-weight: var(${tokens.calendarHeaderFontWeightBold}); - letter-spacing: var(${tokens.calendarHeaderFontLetterSpacing}); - line-height: var(${tokens.calendarHeaderFontLineHeight}); - margin-top: 0; - margin-bottom: 0; - padding: 0.5rem 0; - flex: 1; - - ${String(flexCenter)}; - - &:first-of-type { - margin-right: 3rem; + &:hover, + &:active { + color: var(${tokens.calendarContentSecondaryColor}); } - &:last-of-type { - margin-left: 3rem; - } + ${addFocus({ + outlineSize: '0.063rem', + outlineOffset: '-0.125rem', + outlineColor: `var(${tokens.calendarOutlineFocusColor})`, + outlineRadius: '0.563rem', + })}; `; -export const StyledArrows = styled.div` - padding: 0.5rem 0; - width: var(${tokens.calendarHeaderArrowContainerWidth}); +export const StyledHeaderDate = styled.span` + ${flexCenter}; + pointer-events: none; +`; +export const StyledArrows = styled.div` display: flex; - justify-content: space-between; - align-items: center; + gap: var(${tokens.calendarHeaderArrowGap}); + padding: var(${tokens.calendarHeaderArrowPadding}); `; -export const StyledArrow = styled(buttonFocus)` - display: flex; - cursor: pointer; +// NOTE: переопределение токенов IconButton +export const StyledArrow = styled(IconButton)` + ${iconButtonTokens.iconButtonColor}: var(${tokens.iconButtonColor}); + ${iconButtonTokens.iconButtonBackgroundColor}: var(${tokens.iconButtonBackgroundColor}); + ${iconButtonTokens.iconButtonColorHover}: var(${tokens.iconButtonColorHover}); + ${iconButtonTokens.iconButtonBackgroundColorHover}: var(${tokens.iconButtonBackgroundColorHover}); + ${iconButtonTokens.iconButtonColorActive}: var(${tokens.iconButtonColorActive}); + ${iconButtonTokens.iconButtonBackgroundColorActive}: var(${tokens.iconButtonBackgroundColorActive}); + ${iconButtonTokens.iconButtonHeight}: var(${tokens.iconButtonHeight}); + ${iconButtonTokens.iconButtonWidth}: var(${tokens.iconButtonWidth}); + ${iconButtonTokens.iconButtonPadding}: var(${tokens.iconButtonPadding}); + ${iconButtonTokens.iconButtonRadius}: var(${tokens.iconButtonRadius}); + ${iconButtonTokens.iconButtonFocusColor}: var(${tokens.iconButtonFocusColor}); `; export const StyledNavigation = styled.div` width: 100%; + ${flexCenter}; +`; + +export const StyledDoubleHeaderWrapper = styled.div` + width: 100%; + display: grid; + grid-template-columns: var(${tokens.iconButtonWidth}) 1fr var(${tokens.iconButtonWidth}); + grid-template-areas: 'a b c'; + + ${StyledArrow} { + grid-area: a; + } + + &.${classes.doubleHeaderLastDateWrapper} ${StyledArrow} { + grid-area: c; + } +`; + +export const StyledHeaderDouble = styled.h4` + font-family: var(${tokens.calendarHeaderFontFamily}); + font-size: var(${tokens.calendarHeaderFontSize}); + font-style: var(${tokens.calendarHeaderFontStyle}); + font-weight: var(${tokens.calendarHeaderFontWeightBold}); + letter-spacing: var(${tokens.calendarHeaderFontLetterSpacing}); + line-height: var(${tokens.calendarHeaderFontLineHeight}); + + grid-area: b; + justify-self: center; + cursor: pointer; + display: flex; + gap: var(${tokens.calendarHeaderDateGap}); + justify-content: space-between; + align-items: center; + margin: 0; ${String(flexCenter)}; `; diff --git a/packages/plasma-new-hope/src/components/Calendar/ui/CalendarHeader/CalendarHeader.tsx b/packages/plasma-new-hope/src/components/Calendar/ui/CalendarHeader/CalendarHeader.tsx index 6ceaa1f905..3995fd8aae 100644 --- a/packages/plasma-new-hope/src/components/Calendar/ui/CalendarHeader/CalendarHeader.tsx +++ b/packages/plasma-new-hope/src/components/Calendar/ui/CalendarHeader/CalendarHeader.tsx @@ -1,16 +1,19 @@ import React, { useCallback, useMemo } from 'react'; -import { IconDisclosureLeft, IconDisclosureRight } from '../../../_Icon'; +import { IconDisclosureDownFill, IconDisclosureLeft, IconDisclosureRight } from '../../../_Icon'; import { CalendarState } from '../../store/types'; import { getCalendarType, MONTH_NAMES, YEAR_RENDER_COUNT } from '../../utils'; import type { DateObject } from '../../Calendar.types'; +import { classes } from '../../Calendar.tokens'; import type { CalendarHeaderProps } from './CalendarHeader.types'; import { StyledArrow, StyledArrows, StyledCalendarHeader, + StyledDoubleHeaderWrapper, StyledHeader, + StyledHeaderDate, StyledHeaderDouble, StyledNavigation, } from './CalendarHeader.styles'; @@ -21,6 +24,7 @@ import { export const CalendarHeader: React.FC = ({ type = 'Days', startYear = 0, + size, firstDate, secondDate, isDouble, @@ -45,60 +49,72 @@ export const CalendarHeader: React.FC = ({ } if (type === CalendarState.Days) { - return `${MONTH_NAMES[date.monthIndex]} ${date.year}`; + return ( + <> + {MONTH_NAMES[date.monthIndex]} + + {date.year} + + + + ); } if (type === CalendarState.Months) { - return `${date.year}`; + return ( + + {date.year} + + + ); } if (type === CalendarState.Years) { - return `${startYear}—${startYear + YEAR_RENDER_COUNT - 1}`; + return ( + + {startYear}—{startYear + YEAR_RENDER_COUNT - 1} + + + ); } return ''; }, - [type, startYear], + [type, startYear, size], ); const currentCalendarType = getCalendarType(isDouble ? CalendarState.Days : type); const PreviousButton = useMemo( () => ( - onPrev()} - > - + onPrev()}> + ), - [currentCalendarType, onPrev], + [currentCalendarType, size, onPrev], ); const NextButton = useMemo( () => ( - onNext()} - > - + onNext()}> + ), - [currentCalendarType, onNext], + [currentCalendarType, size, onNext], ); return ( {isDouble ? ( - {PreviousButton} - {getHeaderContent(firstDate)} - {getHeaderContent(secondDate)} - {NextButton} + + {PreviousButton} + {getHeaderContent(firstDate)} + + + {getHeaderContent(secondDate)} + {NextButton} + ) : ( <> diff --git a/packages/plasma-new-hope/src/components/Calendar/ui/CalendarHeader/CalendarHeader.types.ts b/packages/plasma-new-hope/src/components/Calendar/ui/CalendarHeader/CalendarHeader.types.ts index 7a5f0c3b7e..7ce2d82978 100644 --- a/packages/plasma-new-hope/src/components/Calendar/ui/CalendarHeader/CalendarHeader.types.ts +++ b/packages/plasma-new-hope/src/components/Calendar/ui/CalendarHeader/CalendarHeader.types.ts @@ -5,6 +5,7 @@ import type { CalendarStateType } from '../../store/types'; export interface CalendarHeaderProps extends HTMLAttributes { firstDate: DateObject; + size?: string; secondDate?: DateObject; startYear?: number; type?: CalendarStateType; diff --git a/packages/plasma-new-hope/src/components/Calendar/ui/CalendarMonths/CalendarMonths.styles.ts b/packages/plasma-new-hope/src/components/Calendar/ui/CalendarMonths/CalendarMonths.styles.ts index 2ce8615526..09e406dc8c 100644 --- a/packages/plasma-new-hope/src/components/Calendar/ui/CalendarMonths/CalendarMonths.styles.ts +++ b/packages/plasma-new-hope/src/components/Calendar/ui/CalendarMonths/CalendarMonths.styles.ts @@ -1,11 +1,11 @@ import { styled } from '@linaria/react'; -import { flexCenter, selectedMixin } from '../../mixins'; -import { tokens } from '../../Calendar.tokens'; +import { classes, tokens } from '../../Calendar.tokens'; import { addFocus } from '../../../../mixins'; +import { addSelected, flexCenter } from '../../mixins'; export const StyledCalendarMonths = styled.div` - padding: 0.5rem 1.5rem 1.5rem; + padding: var(${tokens.calendarMonthsPadding}); box-sizing: border-box; `; @@ -14,36 +14,11 @@ export const StyledFlex = styled.div` `; export const StyledMonth = styled.div` - border-radius: 0.438rem; + border-radius: calc(var(${tokens.calendarMonthItemBorderRadius}) - 0.125rem); ${String(flexCenter)}; `; -const selectable = ` - ${addFocus({ - outlineSize: '0.063rem', - outlineOffset: '-0.063rem', - outlineColor: `var(${tokens.calendarOutlineFocusColor})`, - outlineRadius: '0.563rem', - })}; - - --calendar_private-selected-min-width: 5.25rem; - --calendar_private-selected-min-height: 3.25rem; - --calendar_private-selected-background: var(${tokens.calendarSelectedItemBackground}); - --calendar_private-selected-color: var(${tokens.calendarSelectedItemColor}); - --calendar_private-selectable-background-hover: var(${tokens.calendarSelectableItemBackgroundHover}); - --calendar_private-current-border-color: var(${tokens.calendarCurrentItemBorderColor}); - --calendar_private-current-background-hover: var(${tokens.calendarCurrentItemBackgroundHover}); - --calendar_private-current-color-hover: var(${tokens.calendarCurrentItemColorHover}); - --calendar_private-current-child-background-hover: var(${tokens.calendarCurrentItemChildBackgroundHover}); - --calendar_private-active-background: var(${tokens.calendarActiveItemBackground}); - --calendar_private-active-color-hover: var(${tokens.calendarActiveItemColor}); - --calendar_private-hovered-background: var(${tokens.calendarHoveredItemBackground}); - --calendar_private-hovered-color: var(${tokens.calendarHoveredItemColor}); - - ${String(selectedMixin)}; -`; - export const StyledMonthRoot = styled.div` font-family: var(${tokens.calendarMonthFontFamily}); font-size: var(${tokens.calendarMonthFontSize}); @@ -51,16 +26,41 @@ export const StyledMonthRoot = styled.div` font-weight: var(${tokens.calendarMonthFontWeight}); letter-spacing: var(${tokens.calendarMonthFontLetterSpacing}); line-height: var(${tokens.calendarMonthFontLineHeight}); - position: relative; box-sizing: border-box; - min-height: 3.5rem; + min-height: var(${tokens.calendarMonthItemHeight}); + min-width: var(${tokens.calendarMonthItemWidth}); - border-radius: var(${tokens.calendarItemBorderRadius}); - - flex: 1; + border-radius: var(${tokens.calendarMonthItemBorderRadius}); ${String(flexCenter)}; - ${String(selectable)}; + + ${addSelected({ + minWidth: `calc(var(${tokens.calendarMonthItemWidth}) - 0.25rem)`, + minHeight: `calc(var(${tokens.calendarMonthItemHeight}) - 0.25rem)`, + selectedFontWeight: `var(${tokens.calendarMonthSelectedFontWeight})`, + selectedBackground: `var(${tokens.calendarSelectedItemBackground})`, + selectedColor: `var(${tokens.calendarSelectedItemColor})`, + selectableBackgroundHover: `var(${tokens.calendarSelectableItemBackgroundHover})`, + currentBorderColor: `var(${tokens.calendarCurrentItemBorderColor})`, + activeBackground: `var(${tokens.calendarActiveItemBackground})`, + activeColor: `var(${tokens.calendarActiveItemColor})`, + })}; + + ${addFocus({ + outlineSize: '0.063rem', + outlineOffset: '-0.125rem', + outlineColor: `var(${tokens.calendarOutlineFocusColor})`, + outlineRadius: `calc(var(${tokens.calendarMonthItemBorderRadius}) + 0.125rem)`, + })}; + + &.${classes.currentItem} { + ${addFocus({ + outlineSize: '0.063rem', + outlineOffset: '-0.1875rem', + outlineColor: `var(${tokens.calendarOutlineFocusColor})`, + outlineRadius: `calc(var(${tokens.calendarMonthItemBorderRadius}) + 0.125rem)`, + })}; + } `; diff --git a/packages/plasma-new-hope/src/components/Calendar/ui/CalendarMonths/CalendarMonths.tsx b/packages/plasma-new-hope/src/components/Calendar/ui/CalendarMonths/CalendarMonths.tsx index 6b6f2f9fdc..297041dd0d 100644 --- a/packages/plasma-new-hope/src/components/Calendar/ui/CalendarMonths/CalendarMonths.tsx +++ b/packages/plasma-new-hope/src/components/Calendar/ui/CalendarMonths/CalendarMonths.tsx @@ -56,7 +56,7 @@ export const CalendarMonths: React.FC = ({ {month.map(({ monthName, monthIndex, isSelected, isCurrent, monthFullName }, j) => { const selectedClass = isSelected ? classes.selectedItem : undefined; - const currentClass = !isSelected && isCurrent ? classes.currentItem : undefined; + const currentClass = isCurrent ? classes.currentItem : undefined; return ( ` - ${addFocus({ - outlineSize: '0.063rem', - outlineOffset: '-0.063rem', - outlineColor: `var(${tokens.calendarOutlineFocusColor})`, - outlineRadius: '0.563rem', - })}; - - --calendar_private-selected-min-width: 5.25rem; - --calendar_private-selected-min-height: 3.25rem; - --calendar_private-selected-background: var(${tokens.calendarSelectedItemBackground}); - --calendar_private-selected-color: var(${tokens.calendarSelectedItemColor}); - --calendar_private-selectable-background-hover: var(${tokens.calendarSelectableItemBackgroundHover}); - --calendar_private-current-border-color: var(${tokens.calendarCurrentItemBorderColor}); - --calendar_private-current-background-hover: var(${tokens.calendarCurrentItemBackgroundHover}); - --calendar_private-current-color-hover: var(${tokens.calendarCurrentItemColorHover}); - --calendar_private-current-child-background-hover: var(${tokens.calendarCurrentItemChildBackgroundHover}); - --calendar_private-active-background: var(${tokens.calendarActiveItemBackground}); - --calendar_private-active-color: var(${tokens.calendarActiveItemColor}); - --calendar_private-hovered-background: var(${tokens.calendarHoveredItemBackground}); - --calendar_private-hovered-color: var(${tokens.calendarHoveredItemColor}); - - ${String(selectedMixin)}; -`; - export const StyledYearRoot = styled.div` font-family: var(${tokens.calendarYearFontFamily}); font-size: var(${tokens.calendarYearFontSize}); @@ -54,12 +29,38 @@ export const StyledYearRoot = styled.div` position: relative; box-sizing: border-box; - min-height: 3.5rem; - - border-radius: var(${tokens.calendarItemBorderRadius}); + min-height: var(${tokens.calendarYearItemHeight}); + min-width: var(${tokens.calendarYearItemWidth}); - flex: 1; + border-radius: var(${tokens.calendarYearItemBorderRadius}); ${String(flexCenter)}; - ${selectable()}; + + ${addSelected({ + minWidth: `calc(var(${tokens.calendarYearItemWidth}) - 0.25rem)`, + minHeight: `calc(var(${tokens.calendarYearItemHeight}) - 0.25rem)`, + selectedFontWeight: `var(${tokens.calendarYearSelectedFontWeight})`, + selectedBackground: `var(${tokens.calendarSelectedItemBackground})`, + selectedColor: `var(${tokens.calendarSelectedItemColor})`, + selectableBackgroundHover: `var(${tokens.calendarSelectableItemBackgroundHover})`, + currentBorderColor: `var(${tokens.calendarCurrentItemBorderColor})`, + activeBackground: `var(${tokens.calendarActiveItemBackground})`, + activeColor: `var(${tokens.calendarActiveItemColor})`, + })}; + + ${addFocus({ + outlineSize: '0.063rem', + outlineOffset: '-0.125rem', + outlineColor: `var(${tokens.calendarOutlineFocusColor})`, + outlineRadius: `calc(var(${tokens.calendarYearItemBorderRadius}) + 0.125rem)`, + })}; + + &.${classes.currentItem} { + ${addFocus({ + outlineSize: '0.063rem', + outlineOffset: '-0.1875rem', + outlineColor: `var(${tokens.calendarOutlineFocusColor})`, + outlineRadius: `calc(var(${tokens.calendarYearItemBorderRadius}) + 0.125rem)`, + })}; + } `; diff --git a/packages/plasma-new-hope/src/components/Calendar/ui/CalendarYears/CalendarYears.tsx b/packages/plasma-new-hope/src/components/Calendar/ui/CalendarYears/CalendarYears.tsx index 209b4798b1..9823d2bcae 100644 --- a/packages/plasma-new-hope/src/components/Calendar/ui/CalendarYears/CalendarYears.tsx +++ b/packages/plasma-new-hope/src/components/Calendar/ui/CalendarYears/CalendarYears.tsx @@ -57,7 +57,7 @@ export const CalendarYears: React.FC = ({ {year.map(({ yearValue, isSelected, isCurrent }, j) => { const selectedClass = isSelected ? classes.selectedItem : undefined; - const currentClass = !isSelected && isCurrent ? classes.currentItem : undefined; + const currentClass = isCurrent ? classes.currentItem : undefined; return ( firstDate.monthIndex === secondDate.monthIndex && firstDate.year === secondDate.year; -export const isValueUpdate = (value: Date | [Date, Date?], prevValue: Date | [Date, Date?]) => { +export const isValueUpdate = (value: Date | [Date?, Date?], prevValue: Date | [Date?, Date?]) => { if (!Array.isArray(value) && !Array.isArray(prevValue)) { return prevValue?.getTime() !== value?.getTime(); } diff --git a/packages/plasma-new-hope/src/components/Combobox/Combobox.tsx b/packages/plasma-new-hope/src/components/Combobox/Combobox.tsx index 2cf472fba6..5faa89e50a 100644 --- a/packages/plasma-new-hope/src/components/Combobox/Combobox.tsx +++ b/packages/plasma-new-hope/src/components/Combobox/Combobox.tsx @@ -2,8 +2,7 @@ import React, { Children, forwardRef, useEffect, useRef, useState } from 'react' import { safeUseId, useForkRef } from '@salutejs/plasma-core'; import { RootProps } from '../../engines'; -import { cx } from '../../utils'; -import { getPlacements } from '../Dropdown/utils'; +import { cx, getPlacements } from '../../utils'; import { getChildren, getNewSelected, getValues } from '../Select/utils'; import { useKeyNavigation } from '../Select/hooks'; import { useDidMountEffect, useForceUpdate } from '../../hooks'; diff --git a/packages/plasma-new-hope/src/components/DatePicker/DatePicker.template-doc.mdx b/packages/plasma-new-hope/src/components/DatePicker/DatePicker.template-doc.mdx new file mode 100644 index 0000000000..5153ee68b5 --- /dev/null +++ b/packages/plasma-new-hope/src/components/DatePicker/DatePicker.template-doc.mdx @@ -0,0 +1,150 @@ +--- +id: datepicker +title: DatePicker +--- + +import { PropsTable, Description } from '@site/src/components'; + +# DatePicker + + + +## Использование +Компонент `DatePicker` представляет собой поле ввода даты с выпадающим календарем. + +Размер `DatePicker` задаётся с помощью свойства `size`. +Возможные значения свойтсва: `"l"`, `"m"`, `"s"`, `"xs"`. + +```tsx live +import React, {useState} from 'react'; +import { DatePicker, IconButton } from '@salutejs/{{ package }}'; +import { IconDone } from '@salutejs/plasma-icons'; + +export function App() { + return ( +
+ } + size="l" + /> +
+ ); +} +``` + +### Формат даты +Формат даты задается с помощью свойства `format`. +При выборе даты в календаре или вводе даты через поле ввода, дата будет приводиться к заданному формату. +Свойство `maskWithFormat` позволяет маскировать ввод: + +```tsx live +import React, {useState} from 'react'; +import { DatePicker, IconButton } from '@salutejs/{{ package }}'; +import { IconDone } from '@salutejs/plasma-icons'; + +export function App() { + return ( +
+ } + /> +
+ ); +} +``` + +### Валидация и индикация успешного ввода даты. +За индикацию ошибки или успешного ввода отвечают `valueError`, `valueSuccess`. +В данном примере валидация происходит при нажатии клавиши `Enter` после ввода значений: + +```tsx live +import React, {useState} from 'react'; +import { DatePicker, IconButton } from '@salutejs/{{ package }}'; +import { IconDone } from '@salutejs/plasma-icons'; + +export function App() { + const [isOpen, setIsOpen] = useState(false); + const [error, setError] = useState(false); + const [success, setSuccess] = useState(false); + + const handleCommitDate = (newDate: Date | string, dateError?: boolean, dateSuccess?: boolean) => { + if (dateError) { + setError(true); + return; + } + + if (dateSuccess) { + setSuccess(true); + } + + setIsOpen(false); + }; + + return ( +
+ } + onChangeValue={() => { + setError(false); + setSuccess(false); + }} + onCommitDate={handleCommitDate} + /> +
+ ); +} +``` + +## DatePickerRange + + + +## Использование +Компонент `DatePickerRange` представляет собой `Range` с выпадающим календарем. +Календарь может быть одиночным или двойным. За это отвечает свойство `isDoubleCalendar`. + +```tsx live +import React, {useState} from 'react'; +import { DatePickerRange, IconButton } from '@salutejs/{{ package }}'; +import { IconDone } from '@salutejs/plasma-icons'; + +export function App() { + const ActionButton = () => { + return ( + + + + ); + }; + + return ( +
+ } + isDoubleCalendar + /> +
+ ); +} +``` \ No newline at end of file diff --git a/packages/plasma-new-hope/src/components/DatePicker/DatePicker.tokens.ts b/packages/plasma-new-hope/src/components/DatePicker/DatePicker.tokens.ts new file mode 100644 index 0000000000..bea0b7a89d --- /dev/null +++ b/packages/plasma-new-hope/src/components/DatePicker/DatePicker.tokens.ts @@ -0,0 +1,198 @@ +export const classes = { + datePickerError: 'date-picker-error', + datePickerSuccess: 'date-picker-success', + datePickerRoot: 'date-picker-root', +}; + +export const tokens = { + width: '--plasma-date-picker-width', + + /** Токены полей ввода в рендже */ + background: '--plasma-date-picker_range-background', + backgroundError: '--plasma-date-picker_range-background-error', + backgroundSuccess: '--plasma-date-picker_range-background-success', + backgroundReadOnly: '--plasma-date-picker_range-background-readonly', + borderRadius: '--plasma-date-picker_range-border-radius', + borderWidth: '--plasma-date-picker_range-border-width', + borderColor: '--plasma-date-picker_range-border-color', + borderColorHover: '--plasma-date-picker_range-border-color-hover', + borderColorFocus: '--plasma-date-picker_range-border-color-focus', + borderColorError: '--plasma-date-picker_range-border-color-error', + borderColorSuccess: '--plasma-date-picker_range-border-color-success', + borderColorReadOnly: '--plasma-date-picker_range-border-color-readonly', + + /** Токены разделителя */ + dividerColor: '--plasma-date-picker_range__divider-color', + dividerColorReadOnly: '--plasma-date-picker_range__divider-color-readonly', + dividerPadding: '--plasma-date-picker_range__divider-padding', + dividerFontFamily: '--plasma-date-picker_range__divider-font-family', + dividerFontStyle: '--plasma-date-picker_range__divider-font-style', + dividerFontSize: '--plasma-date-picker_range__divider-font-size', + dividerFontWeight: '--plasma-date-picker_range__divider-font-weight', + dividerLetterSpacing: '--plasma-date-picker_range__divider-letter-spacing', + dividerLineHeight: '--plasma-date-picker_range__divider-line-height', + + /** Токены слотов для контента в рендже */ + leftContentMargin: '--plasma-date-picker_range__left-content-margin', + rightContentMargin: '--plasma-date-picker_range__right-content-margin', + + /** Токены лейбла */ + labelColor: '--plasma-date-picker__label-color', + labelColorReadOnly: '--plasma-date-picker__label-color-readonly', + labelOffset: '--plasma-date-picker__label-offset', + + labelFontFamily: '--plasma-date-picker__label-font-family', + labelFontStyle: '--plasma-date-picker__label-font-style', + labelFontSize: '--plasma-date-picker__label-font-size', + labelFontWeight: '--plasma-date-picker__label-font-weight', + labelLetterSpacing: '--plasma-date-picker__label-letter-spacing', + labelLineHeight: '--plasma-date-picker__label-line-height', + + /** Токены вспомогательного текста */ + leftHelperColor: '--plasma-date-picker__left-helper-color', + leftHelperColorReadOnly: '--plasma-date-picker__left-helper-color-readonly', + leftHelperOffset: '--plasma-date-picker__left-helper-offset', + + leftHelperFontFamily: '--plasma-date-picker__left-helper-font-family', + leftHelperFontStyle: '--plasma-date-picker__left-helper-font-style', + leftHelperFontSize: '--plasma-date-picker__left-helper-font-size', + leftHelperFontWeight: '--plasma-date-picker__left-helper-font-weight', + leftHelperLetterSpacing: '--plasma-date-picker__left-helper-letter-spacing', + leftHelperLineHeight: '--plasma-date-picker__left-helper-line-height', + + /** Прозрачность для всего компонента в состоянии disabled */ + disabledOpacity: '--plasma-date-picker-disabled-opacity', + + /** Цвет обводки поля ввода при фокусе */ + focusColor: '--plasma-date-picker-focus-color', + + /** Токены полей ввода */ + textFieldColor: '--plasma-date-picker-textfield-color', + textFieldFocusColor: '--plasma-date-picker-textfield-focus-color', + textFieldPlaceholderColor: '--plasma-date-picker-textfield-placeholder-color', + textFieldCaretColor: '--plasma-date-picker-textfield-caret-color', + + textFieldBackgroundColor: '--plasma-date-picker-textfield-background-color', + textFieldBackgroundColorHover: '--plasma-date-picker-textfield-background-color-hover', + textFieldBackgroundColorFocus: '--plasma-date-picker-textfield-background-color-focus', + textFieldBackgroundErrorColor: '--plasma-date-picker-textfield-background-color-error', + textFieldBackgroundErrorColorHover: '--plasma-date-picker-textfield-background-color-error-hover', + textFieldBackgroundErrorColorFocus: '--plasma-date-picker-textfield-background-color-error-focus', + textFieldBackgroundSuccessColor: '--plasma-date-picker-textfield-background-color-success', + textFieldBackgroundSuccessColorHover: '--plasma-date-picker-textfield-background-color-success-hover', + textFieldBackgroundSuccessColorFocus: '--plasma-date-picker-textfield-background-color-success-focus', + + textFieldBorderColor: '--plasma-date-picker-textfield-border-color', + textFieldBorderColorHover: '--plasma-date-picker-textfield-border-color-hover', + textFieldBorderColorFocus: '--plasma-date-picker-textfield-border-color-focus', + textFieldBorderColorError: '--plasma-date-picker-textfield-border-color-error', + textFieldBorderColorErrorHover: '--plasma-date-picker-textfield-border-color-error-hover', + textFieldBorderColorErrorFocus: '--plasma-date-picker-textfield-border-color-error-focus', + textFieldBorderColorSuccess: '--plasma-date-picker-textfield-border-color-success', + textFieldBorderColorSuccessHover: '--plasma-date-picker-textfield-border-color-success-hover', + textFieldBorderColorSuccessFocus: '--plasma-date-picker-textfield-border-color-success-focus', + + textFieldColorReadOnly: '--plasma-date-picker-textfield-color-readonly', + textFieldBackgroundColorReadOnly: '--plasma-date-picker-textfield-background-color-readonly', + textFieldBorderColorReadOnly: '--plasma-date-picker-textfield-border-color-readonly', + textFieldPlaceholderColorReadOnly: '--plasma-date-picker-textfield-placeholder-color-readonly', + + textFieldHeight: '--plasma-date-picker-textfield-height', + textFieldBorderWidth: '--plasma-date-picker-textfield-border-width', + textFieldBorderRadius: '--plasma-date-picker-textfield-border-radius', + textFieldPadding: '--plasma-date-picker-textfield-padding', + textFieldLeftContentMargin: '--plasma-date-picker-textfield__left-content-margin', + textFieldRightContentMargin: '--plasma-date-picker-textfield__right-content-margin', + textFieldFontFamily: '--plasma-date-picker-textfield-font-family', + textFieldFontStyle: '--plasma-date-picker-textfield-font-style', + textFieldFontSize: '--plasma-date-picker-textfield-font-size', + textFieldFontWeight: '--plasma-date-picker-textfield-font-weight', + textFieldLetterSpacing: '--plasma-date-picker-textfield-letter-spacing', + textFieldLineHeight: '--plasma-date-picker-textfield-line-height', + + textFieldTextBeforeColor: '--plasma-date-picker-textfield__before-text-color', + textFieldTextAfterColor: '--plasma-date-picker-textfield__after-text-color', + textFieldTextBeforeMargin: '--plasma-date-picker-textfield__before-text-margin', + textFieldTextAfterMargin: '--plasma-date-picker-textfield__after-text-margin', + + /** Токены календаря */ + calendarPaddingTop: '--plasma-date-picker-calendar-padding-top', + calendarShadow: '--plasma-date-picker-calendar-shadow', + calendarBorderRadius: '--plasma-date-picker-calendar-border-radius', + calendarWidth: '--plasma-date-picker-calendar-width', + calendarHeight: '--plasma-date-picker-calendar-height', + calendarYearsPadding: '--plasma-date-picker-calendar__years-padding', + calendarYearItemBorderRadius: '--plasma-date-picker-calendar__year-item-border-radius', + calendarYearItemWidth: '--plasma-date-picker-calendar__year-item-width', + calendarYearItemHeight: '--plasma-date-picker-calendar__year-item-height', + calendarYearFontFamily: '--plasma-date-picker-calendar__year-font-family', + calendarYearFontSize: '--plasma-date-picker-calendar__year-font-size', + calendarYearFontStyle: '--plasma-date-picker-calendar__year-font-style', + calendarYearFontLetterSpacing: '--plasma-date-picker-calendar__year-letter-spacing', + calendarYearFontLineHeight: '--plasma-date-picker-calendar__year-line-height', + calendarYearFontWeight: '--plasma-date-picker-calendar__year-font-weight', + calendarYearSelectedFontWeight: '--plasma-date-picker-calendar__year-selected-font-weight', + calendarMonthsPadding: '--plasma-date-picker-calendar__months-padding', + calendarMonthItemBorderRadius: '--plasma-date-picker-calendar__month-item-border-radius', + calendarMonthItemWidth: '--plasma-date-picker-calendar__month-item-width', + calendarMonthItemHeight: '--plasma-date-picker-calendar__month-item-height', + calendarMonthFontFamily: '--plasma-date-picker-calendar__month-font-family', + calendarMonthFontSize: '--plasma-date-picker-calendar__month-font-size', + calendarMonthFontStyle: '--plasma-date-picker-calendar__month-font-style', + calendarMonthFontLetterSpacing: '--plasma-date-picker-calendar__month-letter-spacing', + calendarMonthFontLineHeight: '--plasma-date-picker-calendar__month-line-height', + calendarMonthFontWeight: '--plasma-date-picker-calendar__month-font-weight', + calendarMonthSelectedFontWeight: '--plasma-date-picker-calendar__month-selected-font-weight', + calendarDaysPadding: '--plasma-date-picker-calendar__days-padding', + calendarDayItemBorderRadius: '--plasma-date-picker-calendar__day-item-border-radius', + calendarDayItemWidth: '--plasma-date-picker-calendar__day-item-width', + calendarDayItemHeight: '--plasma-date-picker-calendar__day-item-height', + calendarDayFontFamily: '--plasma-date-picker-calendar__day-font-family', + calendarDayFontSize: '--plasma-date-picker-calendar__day-font-size', + calendarDayFontStyle: '--plasma-date-picker-calendar__day-font-style', + calendarDayFontLetterSpacing: '--plasma-date-picker-calendar__day-letter-spacing', + calendarDayFontLineHeight: '--plasma-date-picker-calendar__day-line-height', + calendarDayFontWeight: '--plasma-date-picker-calendar__day-font-weight', + calendarDaySelectedFontWeight: '--plasma-date-picker-calendar__day-selected-font-weight', + calendarDayOfWeekColor: '--plasma-date-picker-calendar__day-of-week-color', + calendarHeaderWrapperPadding: '--plasma-date-picker-calendar__header-wrapper-padding', + calendarHeaderArrowGap: '--plasma-date-picker-calendar__header-arrow-gap', + calendarHeaderArrowPadding: '--plasma-date-picker-calendar__header-arrow-padding', + calendarHeaderPadding: '--plasma-date-picker-calendar__header-padding', + calendarHeaderDateGap: '--plasma-date-picker-calendar__header-date-gap', + calendarHeaderFontFamily: '--plasma-date-picker-calendar__header-font-family', + calendarHeaderFontSize: '--plasma-date-picker-calendar__header-font-size', + calendarHeaderFontStyle: '--plasma-date-picker-calendar__header-font-style', + calendarHeaderFontLetterSpacing: '--plasma-date-picker-calendar__header-letter-spacing', + calendarHeaderFontLineHeight: '--plasma-date-picker-calendar__header-line-height', + calendarHeaderFontWeight: '--plasma-date-picker-calendar__header-font-weight', + calendarHeaderFontWeightBold: '--plasma-date-picker-calendar__header-font-weight-bold', + iconButtonColor: '--plasma-date-picker-icon-button__color', + iconButtonBackgroundColor: '--plasma-date-picker-icon-button__background-color', + iconButtonColorHover: '--plasma-date-picker-icon-button__color-hover', + iconButtonBackgroundColorHover: '--plasma-date-picker-icon-button__background-color-hover', + iconButtonColorActive: '--plasma-date-picker-icon-button__color-active', + iconButtonBackgroundColorActive: '--plasma-date-picker-icon-button__background-color-active', + iconButtonHeight: '--plasma-date-picker-icon-button__height', + iconButtonWidth: '--plasma-date-picker-icon-button__width', + iconButtonPadding: '--plasma-date-picker-icon-button__padding', + iconButtonRadius: '--plasma-date-picker-icon-button__radius', + iconButtonFocusColor: '--plasma-date-picker-icon-button__focus-color', + calendarBackgroundColor: '--plasma-date-picker-calendar__background-color', + calendarSelectedItemBackground: '--plasma-date-picker-calendar__selected-item-background', + calendarSelectedItemColor: '--plasma-date-picker-calendar__selected-item-color', + calendarSelectableItemBackgroundHover: '--plasma-date-picker-calendar__selectable-item-background-hover', + calendarCurrentItemBorderColor: '--plasma-date-picker-calendar__current-item-border-color', + calendarCurrentItemBackgroundHover: '--plasma-date-picker-calendar__current-item-background-hover', + calendarCurrentItemColorHover: '--plasma-date-picker-calendar__current-item-color-hover', + calendarCurrentItemChildBackgroundHover: '--plasma-date-picker-calendar__current-item-child-background-hover', + calendarActiveItemBackground: '--plasma-date-picker-calendar__active-item-background', + calendarActiveItemColor: '--plasma-date-picker-calendar__active-item-color', + calendarHoveredItemBackground: '--plasma-date-picker-calendar__hovered-item-background', + calendarHoveredItemColor: '--plasma-date-picker-calendar__hovered-item-color', + calendarSeparatorBackground: '--plasma-date-picker-calendar__separator-background', + calendarRangeBackground: '--plasma-date-picker-calendar__range-background', + calendarOutlineFocusColor: '--plasma-date-picker-calendar__outline-focus-color', + calendarContentPrimaryColor: '--plasma-date-picker-calendar__content-primary-color', + calendarContentSecondaryColor: '--plasma-date-picker-calendar__content-secondary-color', +}; diff --git a/packages/plasma-new-hope/src/components/DatePicker/DatePickerBase.styles.ts b/packages/plasma-new-hope/src/components/DatePicker/DatePickerBase.styles.ts new file mode 100644 index 0000000000..22526a6e95 --- /dev/null +++ b/packages/plasma-new-hope/src/components/DatePicker/DatePickerBase.styles.ts @@ -0,0 +1,97 @@ +import { styled } from '@linaria/react'; + +import { calendarBaseConfig, calendarBaseTokens } from '../Calendar'; +import { component, mergeConfig } from '../../engines'; + +import { tokens } from './DatePicker.tokens'; + +const mergedCalendarConfig = mergeConfig(calendarBaseConfig); +const Calendar = component(mergedCalendarConfig); + +export const baseCalendarTokens = ` + padding-top: var(${tokens.calendarPaddingTop}); + box-shadow: var(${tokens.calendarShadow}); + border-radius: var(${tokens.calendarBorderRadius}); + + ${calendarBaseTokens.calendarBackgroundColor}: var(${tokens.calendarBackgroundColor}); + ${calendarBaseTokens.calendarSelectedItemBackground}: var(${tokens.calendarSelectedItemBackground}); + ${calendarBaseTokens.calendarSelectedItemColor}: var(${tokens.calendarSelectedItemColor}); + ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: var(${tokens.calendarSelectableItemBackgroundHover}); + ${calendarBaseTokens.calendarCurrentItemBorderColor}: var(${tokens.calendarCurrentItemBorderColor}); + ${calendarBaseTokens.calendarCurrentItemBackgroundHover}: var(${tokens.calendarCurrentItemBackgroundHover}); + ${calendarBaseTokens.calendarCurrentItemColorHover}: var(${tokens.calendarCurrentItemColorHover}); + ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: var(${tokens.calendarCurrentItemChildBackgroundHover}); + ${calendarBaseTokens.calendarActiveItemBackground}: var(${tokens.calendarActiveItemBackground}); + ${calendarBaseTokens.calendarActiveItemColor}: var(${tokens.calendarActiveItemColor}); + ${calendarBaseTokens.calendarHoveredItemBackground}: var(${tokens.calendarHoveredItemBackground}); + ${calendarBaseTokens.calendarHoveredItemColor}: var(${tokens.calendarHoveredItemColor}); + ${calendarBaseTokens.calendarRangeBackground}: var(${tokens.calendarRangeBackground}); + ${calendarBaseTokens.calendarOutlineFocusColor}: var(${tokens.calendarOutlineFocusColor}); + ${calendarBaseTokens.calendarContentPrimaryColor}: var(${tokens.calendarContentPrimaryColor}); + ${calendarBaseTokens.calendarContentSecondaryColor}: var(${tokens.calendarContentSecondaryColor}); + + ${calendarBaseTokens.iconButtonColor}: var(${tokens.iconButtonColor}); + ${calendarBaseTokens.iconButtonBackgroundColor}: var(${tokens.iconButtonBackgroundColor}); + ${calendarBaseTokens.iconButtonColorHover}: var(${tokens.iconButtonColorHover}); + ${calendarBaseTokens.iconButtonBackgroundColorHover}: var(${tokens.iconButtonBackgroundColorHover}); + ${calendarBaseTokens.iconButtonColorActive}: var(${tokens.iconButtonColorActive}); + ${calendarBaseTokens.iconButtonBackgroundColorActive}: var(${tokens.iconButtonBackgroundColorActive}); + + ${calendarBaseTokens.calendarWidth}: var(${tokens.calendarWidth}); + ${calendarBaseTokens.calendarHeight}: var(${tokens.calendarHeight}); + ${calendarBaseTokens.calendarYearsPadding}: var(${tokens.calendarYearsPadding}); + ${calendarBaseTokens.calendarYearItemBorderRadius}: var(${tokens.calendarYearItemBorderRadius}); + ${calendarBaseTokens.calendarYearItemWidth}: var(${tokens.calendarYearItemWidth}); + ${calendarBaseTokens.calendarYearItemHeight}: var(${tokens.calendarYearItemHeight}); + ${calendarBaseTokens.calendarYearFontFamily}: var(${tokens.calendarYearFontFamily}); + ${calendarBaseTokens.calendarYearFontSize}: var(${tokens.calendarYearFontSize}); + ${calendarBaseTokens.calendarYearFontStyle}: var(${tokens.calendarYearFontStyle}); + ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(${tokens.calendarYearFontLetterSpacing}); + ${calendarBaseTokens.calendarYearFontLineHeight}: var(${tokens.calendarYearFontLineHeight}); + ${calendarBaseTokens.calendarYearFontWeight}: var(${tokens.calendarYearFontWeight}); + ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(${tokens.calendarYearSelectedFontWeight}); + ${calendarBaseTokens.calendarMonthsPadding}: var(${tokens.calendarMonthsPadding}); + ${calendarBaseTokens.calendarMonthItemBorderRadius}: var(${tokens.calendarMonthItemBorderRadius}); + ${calendarBaseTokens.calendarMonthItemWidth}: var(${tokens.calendarMonthItemWidth}); + ${calendarBaseTokens.calendarMonthItemHeight}: var(${tokens.calendarMonthItemHeight}); + ${calendarBaseTokens.calendarMonthFontFamily}: var(${tokens.calendarMonthFontFamily}); + ${calendarBaseTokens.calendarMonthFontSize}: var(${tokens.calendarMonthFontSize}); + ${calendarBaseTokens.calendarMonthFontStyle}: var(${tokens.calendarMonthFontStyle}); + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(${tokens.calendarMonthFontLetterSpacing}); + ${calendarBaseTokens.calendarMonthFontLineHeight}: var(${tokens.calendarMonthFontLineHeight}); + ${calendarBaseTokens.calendarMonthFontWeight}: var(${tokens.calendarMonthFontWeight}); + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(${tokens.calendarMonthSelectedFontWeight}); + ${calendarBaseTokens.calendarDaysPadding}: var(${tokens.calendarDaysPadding}); + ${calendarBaseTokens.calendarDayItemBorderRadius}: var(${tokens.calendarDayItemBorderRadius}); + ${calendarBaseTokens.calendarDayItemWidth}: var(${tokens.calendarDayItemWidth}); + ${calendarBaseTokens.calendarDayItemHeight}: var(${tokens.calendarDayItemHeight}); + ${calendarBaseTokens.calendarDayFontFamily}: var(${tokens.calendarDayFontFamily}); + ${calendarBaseTokens.calendarDayFontSize}: var(${tokens.calendarDayFontSize}); + ${calendarBaseTokens.calendarDayFontStyle}: var(${tokens.calendarDayFontStyle}); + ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(${tokens.calendarDayFontLetterSpacing}); + ${calendarBaseTokens.calendarDayFontLineHeight}: var(${tokens.calendarDayFontLineHeight}); + ${calendarBaseTokens.calendarDayFontWeight}: var(${tokens.calendarDayFontWeight}); + ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(${tokens.calendarDaySelectedFontWeight}); + ${calendarBaseTokens.calendarHeaderWrapperPadding}: var(${tokens.calendarHeaderWrapperPadding}); + ${calendarBaseTokens.calendarHeaderArrowGap}: var(${tokens.calendarHeaderArrowGap}); + ${calendarBaseTokens.calendarHeaderArrowPadding}: var(${tokens.calendarHeaderArrowPadding}); + ${calendarBaseTokens.calendarHeaderPadding}: var(${tokens.calendarHeaderPadding}); + ${calendarBaseTokens.calendarHeaderDateGap}: var(${tokens.calendarHeaderDateGap}); + ${calendarBaseTokens.calendarHeaderFontFamily}: var(${tokens.calendarHeaderFontFamily}); + ${calendarBaseTokens.calendarHeaderFontSize}: var(${tokens.calendarHeaderFontSize}); + ${calendarBaseTokens.calendarHeaderFontStyle}: var(${tokens.calendarHeaderFontStyle}); + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(${tokens.calendarHeaderFontLetterSpacing}); + ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(${tokens.calendarHeaderFontLineHeight}); + ${calendarBaseTokens.calendarHeaderFontWeight}: var(${tokens.calendarHeaderFontWeight}); + ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(${tokens.calendarHeaderFontWeightBold}); + ${calendarBaseTokens.iconButtonHeight}: var(${tokens.iconButtonHeight}); + ${calendarBaseTokens.iconButtonWidth}: var(${tokens.iconButtonWidth}); + ${calendarBaseTokens.iconButtonPadding}: var(${tokens.iconButtonPadding}); + ${calendarBaseTokens.iconButtonRadius}: var(${tokens.iconButtonRadius}); + ${calendarBaseTokens.iconButtonFocusColor}: var(${tokens.iconButtonFocusColor}); +`; + +// NOTE: переопределение токенов Calendar +export const StyledCalendar = styled(Calendar)` + ${baseCalendarTokens} +`; diff --git a/packages/plasma-new-hope/src/components/DatePicker/DatePickerBase.types.ts b/packages/plasma-new-hope/src/components/DatePicker/DatePickerBase.types.ts new file mode 100644 index 0000000000..4f4066e675 --- /dev/null +++ b/packages/plasma-new-hope/src/components/DatePicker/DatePickerBase.types.ts @@ -0,0 +1,38 @@ +import type { Dispatch, MutableRefObject, SetStateAction, SyntheticEvent, ChangeEvent } from 'react'; + +export type DatePickerdVariationProps = { + /** + * Размер контрола. + */ + size?: string; + /** + * Вид контрола. + */ + view?: string; + /** + * Компонент доступен только для чтения. + */ + readOnly?: boolean; + /** + * Компонент неактивен. + */ + disabled?: boolean; +}; + +export type UseDatePickerProps = { + currentValue: string; + setInputValue: Dispatch>; + setCalendarValue: Dispatch>; + setIsInnerOpen: Dispatch>; + dateFormatDelimiter: () => string; + format?: string; + disabled?: boolean; + readOnly?: boolean; + maskWithFormat?: boolean; + valueError?: boolean; + valueSuccess?: boolean; + inputRef?: MutableRefObject; + onToggle?: (isOpen: boolean, event: SyntheticEvent | Event) => void; + onChangeValue?: (event: ChangeEvent, value?: string) => void; + onCommitDate?: (value: Date | string, error?: boolean, success?: boolean) => void; +}; diff --git a/packages/plasma-new-hope/src/components/DatePicker/RangeDate/RangeDate.styles.ts b/packages/plasma-new-hope/src/components/DatePicker/RangeDate/RangeDate.styles.ts new file mode 100644 index 0000000000..9f938fc5df --- /dev/null +++ b/packages/plasma-new-hope/src/components/DatePicker/RangeDate/RangeDate.styles.ts @@ -0,0 +1,116 @@ +import { styled } from '@linaria/react'; +import { css } from '@linaria/core'; + +import { component, mergeConfig } from '../../../engines'; +import { rangeConfig, rangeTokens } from '../../Range'; +import { tokens } from '../DatePicker.tokens'; +import { popoverConfig } from '../../Popover'; + +const mergedRangeConfig = mergeConfig(rangeConfig); +const Range = component(mergedRangeConfig); + +const mergedPopoverConfig = mergeConfig(popoverConfig); +const Popover = component(mergedPopoverConfig); + +export const StyledPopover = styled(Popover)``; + +// NOTE: переопределение токенов Range +export const StyledRange = styled(Range)` + ${rangeTokens.background}: var(${tokens.background}); + ${rangeTokens.backgroundError}: var(${tokens.backgroundError}); + ${rangeTokens.backgroundSuccess}: var(${tokens.backgroundSuccess}); + + ${rangeTokens.borderColor}: var(${tokens.borderColor}); + ${rangeTokens.borderColorError}: var(${tokens.borderColorError}); + ${rangeTokens.borderColorSuccess}: var(${tokens.borderColorSuccess}); + + ${rangeTokens.borderWidth}: var(${tokens.textFieldBorderWidth}); + + ${rangeTokens.dividerColor}: var(${tokens.dividerColor}); + ${rangeTokens.labelColor}: var(${tokens.labelColor}); + ${rangeTokens.leftHelperColor}: var(${tokens.leftHelperColor}); + + ${rangeTokens.textFieldColor}: var(${tokens.textFieldColor}); + ${rangeTokens.textFieldPlaceholderColor}: var(${tokens.textFieldPlaceholderColor}); + ${rangeTokens.textFieldCaretColor}: var(${tokens.textFieldCaretColor}); + + ${rangeTokens.textFieldBackgroundColorFocus}: var(${tokens.textFieldBackgroundColorFocus}); + ${rangeTokens.textFieldBackgroundErrorColor}: var(${tokens.textFieldBackgroundErrorColor}); + ${rangeTokens.textFieldBackgroundErrorColorFocus}: var(${tokens.textFieldBackgroundErrorColorFocus}); + ${rangeTokens.textFieldBackgroundSuccessColor}: var(${tokens.textFieldBackgroundSuccessColor}); + ${rangeTokens.textFieldBackgroundSuccessColorFocus}: var(${tokens.textFieldBackgroundSuccessColorFocus}); + + ${rangeTokens.textFieldBorderWidth}: var(${tokens.textFieldBorderWidth}); + ${rangeTokens.textFieldBorderColorFocus}: var(${tokens.textFieldBorderColorFocus}); + ${rangeTokens.textFieldBorderColorError}: var(${tokens.textFieldBorderColorError}); + ${rangeTokens.textFieldBorderColorErrorFocus}: var(${tokens.textFieldBorderColorErrorFocus}); + ${rangeTokens.textFieldBorderColorSuccess}: var(${tokens.textFieldBorderColorSuccess}); + ${rangeTokens.textFieldBorderColorSuccessFocus}: var(${tokens.textFieldBorderColorSuccessFocus}); + + ${rangeTokens.textFieldTextBeforeColor}: var(${tokens.textFieldTextBeforeColor}); + ${rangeTokens.textFieldTextAfterColor}: var(${tokens.textFieldTextAfterColor}); + + ${rangeTokens.focusColor}: var(${tokens.focusColor}); + + ${rangeTokens.borderRadius}: var(${tokens.borderRadius}); + + ${rangeTokens.dividerPadding}: var(${tokens.dividerPadding}); + ${rangeTokens.dividerFontFamily}: var(${tokens.dividerFontFamily}); + ${rangeTokens.dividerFontStyle}: var(${tokens.dividerFontStyle}); + ${rangeTokens.dividerFontSize}: var(${tokens.dividerFontSize}); + ${rangeTokens.dividerFontWeight}: var(${tokens.dividerFontWeight}); + ${rangeTokens.dividerLetterSpacing}: var(${tokens.dividerLetterSpacing}); + ${rangeTokens.dividerLineHeight}: var(${tokens.dividerLineHeight}); + + ${rangeTokens.leftContentMargin}: var(${tokens.leftContentMargin}); + ${rangeTokens.rightContentMargin}: var(${tokens.rightContentMargin}); + + ${rangeTokens.labelOffset}: var(${tokens.labelOffset}); + + ${rangeTokens.labelFontFamily}: var(${tokens.labelFontFamily}); + ${rangeTokens.labelFontStyle}: var(${tokens.labelFontStyle}); + ${rangeTokens.labelFontSize}: var(${tokens.labelFontSize}); + ${rangeTokens.labelFontWeight}: var(${tokens.labelFontWeight}); + ${rangeTokens.labelLetterSpacing}: var(${tokens.labelLetterSpacing}); + ${rangeTokens.labelLineHeight}: var(${tokens.labelLineHeight}); + + ${rangeTokens.textFieldHeight}: var(${tokens.textFieldHeight}); + ${rangeTokens.textFieldBorderRadius}: var(${tokens.textFieldBorderRadius}); + ${rangeTokens.textFieldPadding}: var(${tokens.textFieldPadding}); + ${rangeTokens.textFieldFontFamily}: var(${tokens.textFieldFontFamily}); + ${rangeTokens.textFieldFontStyle}: var(${tokens.textFieldFontStyle}); + ${rangeTokens.textFieldFontSize}: var(${tokens.textFieldFontSize}); + ${rangeTokens.textFieldFontWeight}: var(${tokens.textFieldFontWeight}); + ${rangeTokens.textFieldLetterSpacing}: var(${tokens.textFieldLetterSpacing}); + ${rangeTokens.textFieldLineHeight}: var(${tokens.textFieldLineHeight}); + + ${rangeTokens.leftHelperOffset}: var(${tokens.leftHelperOffset}); + ${rangeTokens.leftHelperFontFamily}: var(${tokens.leftHelperFontFamily}); + ${rangeTokens.leftHelperFontStyle}: var(${tokens.leftHelperFontStyle}); + ${rangeTokens.leftHelperFontSize}: var(${tokens.leftHelperFontSize}); + ${rangeTokens.leftHelperFontWeight}: var(${tokens.leftHelperFontWeight}); + ${rangeTokens.leftHelperLetterSpacing}: var(${tokens.leftHelperLetterSpacing}); + ${rangeTokens.leftHelperLineHeight}: var(${tokens.leftHelperLineHeight}); + + ${rangeTokens.textFieldLeftContentMargin}: var(${tokens.textFieldLeftContentMargin}); + ${rangeTokens.textFieldRightContentMargin}: var(${tokens.textFieldRightContentMargin}); + ${rangeTokens.textFieldTextBeforeMargin}: var(${tokens.textFieldTextBeforeMargin}); + ${rangeTokens.textFieldTextAfterMargin}: var(${tokens.textFieldTextAfterMargin}); + + ${rangeTokens.backgroundReadOnly}: var(${tokens.backgroundReadOnly}); + ${rangeTokens.labelColorReadOnly}: var(${tokens.labelColorReadOnly}); + ${rangeTokens.leftHelperColorReadOnly}: var(${tokens.leftHelperColorReadOnly}); + ${rangeTokens.dividerColorReadOnly}: var(${tokens.dividerColorReadOnly}); + + ${rangeTokens.textFieldColorReadOnly}: var(${tokens.textFieldColorReadOnly}); + ${rangeTokens.textFieldBackgroundColorReadOnly}: var(${tokens.textFieldBackgroundColorReadOnly}); + ${rangeTokens.textFieldPlaceholderColorReadOnly}: var(${tokens.textFieldPlaceholderColorReadOnly}); +`; + +export const base = css` + display: inline-block; +`; + +export const StyledLabel = styled.label``; + +export const LeftHelper = styled.div``; diff --git a/packages/plasma-new-hope/src/components/DatePicker/RangeDate/RangeDate.tsx b/packages/plasma-new-hope/src/components/DatePicker/RangeDate/RangeDate.tsx new file mode 100644 index 0000000000..cd17b6d637 --- /dev/null +++ b/packages/plasma-new-hope/src/components/DatePicker/RangeDate/RangeDate.tsx @@ -0,0 +1,303 @@ +import React, { + MutableRefObject, + SyntheticEvent, + createRef, + forwardRef, + useCallback, + useEffect, + useRef, + useState, +} from 'react'; + +import type { RootProps } from '../../../engines'; +import { cx } from '../../../utils'; +import { formatCalendarValue, formatInputValue, getDateFormatDelimiter } from '../utils/dateHelper'; +import { useDatePicker } from '../hooks/useDatePicker'; +import type { RangeInputRefs } from '../../Range/Range.types'; +import { classes } from '../DatePicker.tokens'; + +import type { DatePickerRangeProps } from './RangeDate.types'; +import { base as sizeCSS } from './variations/_size/base'; +import { base as viewCSS } from './variations/_view/base'; +import { base as disabledCSS } from './variations/_disabled/base'; +import { base as readOnlyCSS } from './variations/_readonly/base'; +import { LeftHelper, StyledLabel, StyledRange, base } from './RangeDate.styles'; +import { RangeDatePopover } from './RangeDatePopover/RangeDatePopover'; + +export const datePickerRangeRoot = ( + Root: RootProps>, +) => + forwardRef( + ( + { + className, + + isDoubleCalendar = false, + isOpen = false, + + label, + leftHelper, + contentLeft, + contentRight, + view, + size, + readOnly = false, + disabled = false, + + dividerVariant = 'dash', + dividerIcon, + + defaultFirstDate = '', + defaultSecondDate = '', + firstValueError, + secondValueError, + firstValueSuccess, + secondValueSuccess, + firstPlaceholder, + secondPlaceholder, + firstTextfieldContentLeft, + firstTextfieldContentRight, + secondTextfieldContentLeft, + secondTextfieldContentRight, + firstTextfieldTextBefore, + secondTextfieldTextBefore, + firstTextfieldTextAfter, + secondTextfieldTextAfter, + + format = 'DD.MM.YYYY', + maskWithFormat, + min, + max, + includeEdgeDates = false, + eventList, + disabledList, + type = 'Days', + + placement = ['top', 'bottom'], + closeOnOverlayClick = true, + closeOnEsc = true, + offset, + + onToggle, + + onChangeFirstValue, + onChangeSecondValue, + + onCommitFirstDate, + onCommitSecondDate, + + onFocusFirstTextfield, + onFocusSecondTextfield, + onBlurFirstTextfield, + onBlurSecondTextfield, + + ...rest + }, + ref, + ) => { + const rangeRef = ref && 'current' in ref ? ref : createRef(); + const rootRef = useRef(null); + + const [firstInputRef, setFirstInputRef] = useState | undefined>( + rangeRef?.current?.firstTextField(), + ); + const [secondInputRef, setSecondInputRef] = useState | undefined>( + rangeRef?.current?.secondTextField(), + ); + const [isInnerOpen, setIsInnerOpen] = useState(isOpen); + + const [calendarFirstValue, setCalendarFirstValue] = useState(formatCalendarValue(defaultFirstDate, format)); + const [inputFirstValue, setInputFirstValue] = useState(formatInputValue(defaultFirstDate, format)); + + const [calendarSecondValue, setCalendarSecondValue] = useState( + formatCalendarValue(defaultSecondDate, format), + ); + const [inputSecondValue, setInputSecondValue] = useState(formatInputValue(defaultSecondDate, format)); + + const dateFormatDelimiter = useCallback(() => getDateFormatDelimiter(format), [format]); + + const { + handleChangeValue: handleChangeFirstValue, + handleCommitDate: handleCommitFirstDate, + } = useDatePicker({ + currentValue: inputFirstValue, + setInputValue: setInputFirstValue, + setCalendarValue: setCalendarFirstValue, + setIsInnerOpen, + dateFormatDelimiter, + format, + disabled, + readOnly, + maskWithFormat, + valueError: firstValueError, + valueSuccess: firstValueSuccess, + inputRef: firstInputRef, + onChangeValue: onChangeFirstValue, + onCommitDate: onCommitFirstDate, + }); + + const { + handleChangeValue: handleChangeSecondValue, + handleCommitDate: handleCommitSecondDate, + } = useDatePicker({ + currentValue: inputSecondValue, + setInputValue: setInputSecondValue, + setCalendarValue: setCalendarSecondValue, + setIsInnerOpen, + dateFormatDelimiter, + format, + disabled, + readOnly, + maskWithFormat, + valueError: secondValueError, + valueSuccess: secondValueSuccess, + inputRef: secondInputRef, + onChangeValue: onChangeSecondValue, + onCommitDate: onCommitSecondDate, + }); + + const handleToggle = (opened: boolean, event: SyntheticEvent | Event) => { + if (disabled || readOnly) { + return; + } + + const isCalendarOpen = + firstInputRef?.current?.contains((event.target as Node) || null) || + secondInputRef?.current?.contains((event.target as Node) || null) + ? true + : opened; + + if (onToggle) { + return onToggle(isCalendarOpen, event); + } + + setIsInnerOpen(isCalendarOpen); + }; + + const RangeComponent = ( + <> + {/* TODO https://github.com/salute-developers/plasma/issues/1227 + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + //@ts-ignore */} + { + handleCommitFirstDate(String(date), true, false); + if (!calendarSecondValue || secondValueError) { + rangeRef?.current?.secondTextField()?.current?.focus(); + } + }} + onSearchSecondValue={(_, date) => { + handleCommitSecondDate(String(date), true, false); + if (!calendarFirstValue || firstValueError) { + rangeRef?.current?.firstTextField()?.current?.focus(); + } + }} + onFocusFirstTextfield={onFocusFirstTextfield} + onFocusSecondTextfield={onFocusSecondTextfield} + onBlurFirstTextfield={onBlurFirstTextfield} + onBlurSecondTextfield={onBlurSecondTextfield} + /> + + ); + + useEffect(() => { + setFirstInputRef(rangeRef.current?.firstTextField()); + setSecondInputRef(rangeRef.current?.secondTextField()); + }, [rangeRef.current]); + + return ( + + {label && {label}} + { + handleCommitFirstDate(firstDate, false, true); + handleCommitSecondDate(''); + }} + onChangeValue={([firstDate, secondDate]) => { + firstDate && handleCommitFirstDate(firstDate, false, true); + secondDate && handleCommitSecondDate(secondDate, false, true); + if (firstDate && secondDate && !firstValueError && !secondValueError) { + setIsInnerOpen(false); + } + }} + /> + {leftHelper && {leftHelper}} + + ); + }, + ); + +export const datePickerRangeConfig = { + name: 'DatePickerRange', + tag: 'div', + layout: datePickerRangeRoot, + base, + variations: { + view: { + css: viewCSS, + }, + size: { + css: sizeCSS, + }, + disabled: { + css: disabledCSS, + attrs: true, + }, + readOnly: { + css: readOnlyCSS, + attrs: true, + }, + }, + defaults: { + size: 'm', + view: 'default', + }, +}; diff --git a/packages/plasma-new-hope/src/components/DatePicker/RangeDate/RangeDate.types.ts b/packages/plasma-new-hope/src/components/DatePicker/RangeDate/RangeDate.types.ts new file mode 100644 index 0000000000..198af79080 --- /dev/null +++ b/packages/plasma-new-hope/src/components/DatePicker/RangeDate/RangeDate.types.ts @@ -0,0 +1,88 @@ +import type { HTMLAttributes } from 'react'; + +import type { CalendarStateType } from '../../Calendar'; +import type { DisabledDay, EventDay } from '../../Calendar/Calendar.types'; +import type { RangeInnerProps } from '../../Range/Range.types'; +import type { DatePickerdVariationProps } from '../DatePickerBase.types'; +import { DatePickerPopoverProps } from '../SingleDate/SingleDate.types'; + +export type DatePickerRangePlacement = 'top' | 'bottom'; + +type BaseRangeProps = Omit< + RangeInnerProps, + 'firstValue' | 'secondValue' | 'onSearchFirstValue' | 'onSearchSecondValue' +>; + +export type DatePickerRangeFieldProps = { + /** + * Значение по умолчанию для первого поля. + */ + defaultFirstDate?: Date; + /** + * Значение по умолчанию для второго поля. + */ + defaultSecondDate?: Date; + /** + * Callback по нажатию Enter в поле ввода или выборе дня на календаре для первой даты. + */ + onCommitFirstDate?: (value: Date | string, error?: boolean, success?: boolean) => void; + /** + * Callback по нажатию Enter в поле ввода или выборе дня на календаре для первой даты. + */ + onCommitSecondDate?: (value: Date | string, error?: boolean, success?: boolean) => void; +} & BaseRangeProps; + +export type DatePickerCalendarProps = { + /** + * Формат даты. + * @default `DD.MM.YYYY` + */ + format?: string; + /** + * Формат применяется в качестве маски ввода. + */ + maskWithFormat?: boolean; + /** + * Минимальное значение даты. + */ + min?: Date; + /** + * Максимальное значение даты. + */ + max?: Date; + /** + * Должны ли значения минимального и максимального дня включаться в диапазон. + */ + includeEdgeDates?: boolean; + /** + * Список событий. + */ + eventList?: EventDay[]; + /** + * Список отключенных дней. + */ + disabledList?: DisabledDay[]; + /** + * Тип отображения календаря: дни, месяца, года. + */ + type?: CalendarStateType; +}; + +export type DatePickerDoublePopoverProps = Omit & { + /** + * Сторона открытия календаря относительно поля ввода. + * @default + * ["bottom", "top"] + */ + placement?: DatePickerRangePlacement | Array; + /** + * Отобразить двойной календарь + */ + isDoubleCalendar?: boolean; +}; + +export type DatePickerRangeProps = DatePickerdVariationProps & + DatePickerRangeFieldProps & + DatePickerCalendarProps & + DatePickerDoublePopoverProps & + HTMLAttributes; diff --git a/packages/plasma-new-hope/src/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.styles.ts b/packages/plasma-new-hope/src/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.styles.ts new file mode 100644 index 0000000000..e5828a2e53 --- /dev/null +++ b/packages/plasma-new-hope/src/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.styles.ts @@ -0,0 +1,28 @@ +import { styled } from '@linaria/react'; + +import { calendarDoubleConfig, calendarBaseTokens, withRange, calendarBaseConfig } from '../../../Calendar'; +import type { CalendarDoubleProps, CalendarBaseProps } from '../../../Calendar'; +import { tokens } from '../../DatePicker.tokens'; +import { component, mergeConfig } from '../../../../engines'; +import { baseCalendarTokens } from '../../DatePickerBase.styles'; + +const mergedCalendarDoubleConfig = mergeConfig(calendarDoubleConfig); +const CalendarDouble = component(mergedCalendarDoubleConfig); + +const mergedCalendarConfig = mergeConfig(calendarBaseConfig); +const Calendar = component(mergedCalendarConfig); + +const CalendarDoubleRange = withRange(CalendarDouble); +const CalendarRange = withRange(Calendar); + +// NOTE: переопределение токенов Calendar +export const StyledCalendarDouble = styled(CalendarDoubleRange)` + ${calendarBaseTokens.calendarSeparatorBackground}: var(${tokens.calendarSeparatorBackground}); + ${baseCalendarTokens} + /* NOTE: помимо умножения ширины на 2, добавляется место под разделитель */ + ${calendarBaseTokens.calendarWidth}: calc(var(${tokens.calendarWidth}) * 2 + 2.063rem); +`; + +export const StyledCalendar = styled(CalendarRange)` + ${baseCalendarTokens} +`; diff --git a/packages/plasma-new-hope/src/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.tsx b/packages/plasma-new-hope/src/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.tsx new file mode 100644 index 0000000000..8ce42443a3 --- /dev/null +++ b/packages/plasma-new-hope/src/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.tsx @@ -0,0 +1,90 @@ +import React from 'react'; + +import { getPlacements } from '../../../../utils'; +import { StyledPopover } from '../RangeDate.styles'; + +import type { RangeDatePopoverProps } from './RangeDatePopover.types'; +import { StyledCalendar, StyledCalendarDouble } from './RangeDatePopover.styles'; + +export const RangeDatePopover = ({ + target, + + isOpen, + isDoubleCalendar, + + calendarValue, + min, + max, + includeEdgeDates, + eventList, + disabledList, + placement = ['top', 'bottom'], + closeOnOverlayClick = true, + closeOnEsc, + offset, + type, + size, + + onChangeValue, + onChangeStartOfRange, + + onToggle, +}: RangeDatePopoverProps) => { + if (isDoubleCalendar) { + return ( + + + + ); + } + + return ( + + + + ); +}; diff --git a/packages/plasma-new-hope/src/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.types.ts b/packages/plasma-new-hope/src/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.types.ts new file mode 100644 index 0000000000..c480aabed6 --- /dev/null +++ b/packages/plasma-new-hope/src/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.types.ts @@ -0,0 +1,31 @@ +import type { ReactNode } from 'react'; + +import type { DatePickerCalendarProps, DatePickerPopoverProps } from '../../SingleDate/SingleDate.types'; + +export type RangeDatePopoverProps = DatePickerCalendarProps & + DatePickerPopoverProps & { + /** + * Обработчик изменения значения. + */ + onChangeValue: (values: [Date, Date?]) => void; + /** + * Выбранное значение. + */ + calendarValue: [Date?, Date?]; + /** + * Отобразить двойной календарь + */ + isDoubleCalendar?: boolean; + /** + * Компонент для отображения диапазона. + */ + target?: ReactNode; + /** + * Обработчик для выбора стартового значения в диапазоне. + */ + onChangeStartOfRange?: (value: Date) => void; + /** + * Размер контрола. + */ + size?: string; + }; diff --git a/packages/plasma-new-hope/src/components/DatePicker/RangeDate/variations/_disabled/base.ts b/packages/plasma-new-hope/src/components/DatePicker/RangeDate/variations/_disabled/base.ts new file mode 100644 index 0000000000..4868755868 --- /dev/null +++ b/packages/plasma-new-hope/src/components/DatePicker/RangeDate/variations/_disabled/base.ts @@ -0,0 +1,10 @@ +import { css } from '@linaria/core'; + +import { tokens } from '../../../DatePicker.tokens'; + +export const base = css` + &[disabled] { + opacity: var(${tokens.disabledOpacity}); + cursor: not-allowed; + } +`; diff --git a/packages/plasma-new-hope/src/components/DatePicker/RangeDate/variations/_disabled/tokens.json b/packages/plasma-new-hope/src/components/DatePicker/RangeDate/variations/_disabled/tokens.json new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/plasma-new-hope/src/components/DatePicker/RangeDate/variations/_readonly/base.ts b/packages/plasma-new-hope/src/components/DatePicker/RangeDate/variations/_readonly/base.ts new file mode 100644 index 0000000000..c3e299edfc --- /dev/null +++ b/packages/plasma-new-hope/src/components/DatePicker/RangeDate/variations/_readonly/base.ts @@ -0,0 +1,20 @@ +import { css } from '@linaria/core'; + +import { tokens } from '../../../DatePicker.tokens'; +import { LeftHelper, StyledLabel } from '../../RangeDate.styles'; + +export const base = css` + &[readonly] { + cursor: default; + ${tokens.textFieldBackgroundColorReadOnly}: transparent; + + ${StyledLabel} { + display: block; + color: var(${tokens.labelColorReadOnly}); + } + + ${LeftHelper} { + color: var(${tokens.leftHelperColorReadOnly}); + } + } +`; diff --git a/packages/plasma-new-hope/src/components/DatePicker/RangeDate/variations/_readonly/tokens.json b/packages/plasma-new-hope/src/components/DatePicker/RangeDate/variations/_readonly/tokens.json new file mode 100644 index 0000000000..698f64ae5b --- /dev/null +++ b/packages/plasma-new-hope/src/components/DatePicker/RangeDate/variations/_readonly/tokens.json @@ -0,0 +1,4 @@ +{ + "type": "boolean", + "tokens": ["--plasma-date-picker__label-color-readonly", "--plasma-date-picker__left-helper-color-readonly"] +} diff --git a/packages/plasma-new-hope/src/components/DatePicker/RangeDate/variations/_size/base.ts b/packages/plasma-new-hope/src/components/DatePicker/RangeDate/variations/_size/base.ts new file mode 100644 index 0000000000..fc4598f860 --- /dev/null +++ b/packages/plasma-new-hope/src/components/DatePicker/RangeDate/variations/_size/base.ts @@ -0,0 +1,30 @@ +import { css } from '@linaria/core'; + +import { tokens } from '../../../DatePicker.tokens'; +import { StyledLabel, LeftHelper } from '../../RangeDate.styles'; + +export const base = css` + width: var(${tokens.width}); + + ${StyledLabel} { + margin: var(${tokens.labelOffset}); + + font-family: var(${tokens.labelFontFamily}); + font-size: var(${tokens.labelFontSize}); + font-style: var(${tokens.labelFontStyle}); + font-weight: var(${tokens.labelFontWeight}); + letter-spacing: var(${tokens.labelLetterSpacing}); + line-height: var(${tokens.labelLineHeight}); + } + + ${LeftHelper} { + margin: var(${tokens.leftHelperOffset}); + + font-family: var(${tokens.leftHelperFontFamily}); + font-size: var(${tokens.leftHelperFontSize}); + font-style: var(${tokens.leftHelperFontStyle}); + font-weight: var(${tokens.leftHelperFontWeight}); + letter-spacing: var(${tokens.leftHelperLetterSpacing}); + line-height: var(${tokens.leftHelperLineHeight}); + } +`; diff --git a/packages/plasma-new-hope/src/components/DatePicker/RangeDate/variations/_size/tokens.json b/packages/plasma-new-hope/src/components/DatePicker/RangeDate/variations/_size/tokens.json new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/plasma-new-hope/src/components/DatePicker/RangeDate/variations/_view/base.ts b/packages/plasma-new-hope/src/components/DatePicker/RangeDate/variations/_view/base.ts new file mode 100644 index 0000000000..25513f01f3 --- /dev/null +++ b/packages/plasma-new-hope/src/components/DatePicker/RangeDate/variations/_view/base.ts @@ -0,0 +1,15 @@ +import { css } from '@linaria/core'; + +import { LeftHelper, StyledLabel } from '../../RangeDate.styles'; +import { tokens } from '../../../DatePicker.tokens'; + +export const base = css` + ${StyledLabel} { + display: block; + color: var(${tokens.labelColor}); + } + + ${LeftHelper} { + color: var(${tokens.leftHelperColor}); + } +`; diff --git a/packages/plasma-new-hope/src/components/DatePicker/RangeDate/variations/_view/tokens.json b/packages/plasma-new-hope/src/components/DatePicker/RangeDate/variations/_view/tokens.json new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/plasma-new-hope/src/components/DatePicker/SingleDate/SingleDate.styles.ts b/packages/plasma-new-hope/src/components/DatePicker/SingleDate/SingleDate.styles.ts new file mode 100644 index 0000000000..fa046e8527 --- /dev/null +++ b/packages/plasma-new-hope/src/components/DatePicker/SingleDate/SingleDate.styles.ts @@ -0,0 +1,87 @@ +import { styled } from '@linaria/react'; +import { css } from '@linaria/core'; + +import { component, mergeConfig } from '../../../engines'; +import { textFieldConfig, textFieldTokens } from '../../TextField'; +import { classes, tokens } from '../DatePicker.tokens'; +import { popoverConfig } from '../../Popover'; + +const mergedTextFieldConfig = mergeConfig(textFieldConfig); +const TextField = component(mergedTextFieldConfig); + +const mergedPopoverConfig = mergeConfig(popoverConfig); +const Popover = component(mergedPopoverConfig); + +export const StyledPopover = styled(Popover)``; + +// NOTE: переопределение токенов TextField +export const StyledInput = styled(TextField)` + ${textFieldTokens.color}: var(${tokens.textFieldColor}); + ${textFieldTokens.placeholderColor}: var(${tokens.textFieldPlaceholderColor}); + ${textFieldTokens.caretColor}: var(${tokens.textFieldCaretColor}); + ${textFieldTokens.focusColor}: var(${tokens.textFieldFocusColor}); + + ${textFieldTokens.backgroundColor}: var(${tokens.textFieldBackgroundColor}); + ${textFieldTokens.backgroundColorHover}: var(${tokens.textFieldBackgroundColorHover}); + ${textFieldTokens.backgroundColorFocus}: var(${tokens.textFieldBackgroundColorFocus}); + + ${textFieldTokens.borderColor}: var(${tokens.borderColor}); + ${textFieldTokens.borderColorHover}: var(${tokens.borderColorHover}); + ${textFieldTokens.borderColorFocus}: var(${tokens.borderColorFocus}); + + ${textFieldTokens.colorReadOnly}: var(${tokens.textFieldColorReadOnly}); + ${textFieldTokens.backgroundColorReadOnly}: var(${tokens.textFieldBackgroundColorReadOnly}); + ${textFieldTokens.borderColorReadOnly}: var(${tokens.textFieldBorderColorReadOnly}); + ${textFieldTokens.placeholderColorReadOnly}: var(${tokens.textFieldPlaceholderColorReadOnly}); + + ${textFieldTokens.height}: var(${tokens.textFieldHeight}); + ${textFieldTokens.borderWidth}: var(${tokens.textFieldBorderWidth}); + ${textFieldTokens.borderRadius}: var(${tokens.textFieldBorderRadius}); + + ${textFieldTokens.padding}: var(${tokens.textFieldPadding}); + + ${textFieldTokens.leftContentMargin}: var(${tokens.textFieldLeftContentMargin}); + ${textFieldTokens.rightContentMargin}: var(${tokens.textFieldRightContentMargin}); + + ${textFieldTokens.fontFamily}: var(${tokens.textFieldFontFamily}); + ${textFieldTokens.fontSize}: var(${tokens.textFieldFontSize}); + ${textFieldTokens.fontStyle}: var(${tokens.textFieldFontStyle}); + ${textFieldTokens.fontWeight}: var(${tokens.textFieldFontWeight}); + ${textFieldTokens.letterSpacing}: var(${tokens.textFieldLetterSpacing}); + ${textFieldTokens.lineHeight}: var(${tokens.textFieldLineHeight}); + + ${textFieldTokens.disabledOpacity}: var(${tokens.disabledOpacity}); + + ${textFieldTokens.textBeforeColor}: var(${tokens.textFieldTextBeforeColor}); + ${textFieldTokens.textAfterColor}: var(${tokens.textFieldTextAfterColor}); + ${textFieldTokens.textBeforeMargin}: var(${tokens.textFieldTextBeforeMargin}); + ${textFieldTokens.textAfterMargin}: var(${tokens.textFieldTextAfterMargin}); + + &.${classes.datePickerError} { + ${textFieldTokens.backgroundColor}: var(${tokens.textFieldBackgroundErrorColor}); + ${textFieldTokens.backgroundColorHover}: var(${tokens.textFieldBackgroundErrorColorHover}); + ${textFieldTokens.backgroundColorFocus}: var(${tokens.textFieldBackgroundErrorColorFocus}); + + ${textFieldTokens.borderColor}: var(${tokens.textFieldBorderColorError}); + ${textFieldTokens.borderColorHover}: var(${tokens.textFieldBorderColorErrorHover}); + ${textFieldTokens.borderColorFocus}: var(${tokens.textFieldBorderColorErrorFocus}); + } + + &.${classes.datePickerSuccess} { + ${textFieldTokens.backgroundColor}: var(${tokens.textFieldBackgroundSuccessColor}); + ${textFieldTokens.backgroundColorHover}: var(${tokens.textFieldBackgroundSuccessColorHover}); + ${textFieldTokens.backgroundColorFocus}: var(${tokens.textFieldBackgroundSuccessColorFocus}); + + ${textFieldTokens.borderColor}: var(${tokens.textFieldBorderColorSuccess}); + ${textFieldTokens.borderColorHover}: var(${tokens.textFieldBorderColorSuccessHover}); + ${textFieldTokens.borderColorFocus}: var(${tokens.textFieldBorderColorSuccessFocus}); + } +`; + +export const base = css` + display: inline-block; +`; + +export const StyledLabel = styled.label``; + +export const LeftHelper = styled.div``; diff --git a/packages/plasma-new-hope/src/components/DatePicker/SingleDate/SingleDate.tsx b/packages/plasma-new-hope/src/components/DatePicker/SingleDate/SingleDate.tsx new file mode 100644 index 0000000000..d2cfd7c14a --- /dev/null +++ b/packages/plasma-new-hope/src/components/DatePicker/SingleDate/SingleDate.tsx @@ -0,0 +1,182 @@ +import React, { forwardRef, useCallback, useRef, useState } from 'react'; + +import type { RootProps } from '../../../engines'; +import { cx, getPlacements } from '../../../utils'; +import { formatCalendarValue, formatInputValue, getDateFormatDelimiter } from '../utils/dateHelper'; +import { useDatePicker } from '../hooks/useDatePicker'; +import { classes } from '../DatePicker.tokens'; +import { StyledCalendar } from '../DatePickerBase.styles'; + +import type { DatePickerProps } from './SingleDate.types'; +import { base as sizeCSS } from './variations/_size/base'; +import { base as viewCSS } from './variations/_view/base'; +import { base as disabledCSS } from './variations/_disabled/base'; +import { base as readOnlyCSS } from './variations/_readonly/base'; +import { LeftHelper, StyledInput, StyledLabel, StyledPopover, base } from './SingleDate.styles'; + +export const datePickerRoot = ( + Root: RootProps>, +) => + forwardRef( + ( + { + className, + isOpen = false, + + label, + placeholder, + leftHelper, + contentLeft, + contentRight, + textBefore, + textAfter, + view, + size, + readOnly = false, + disabled = false, + + defaultDate = '', + valueError, + valueSuccess, + format = 'DD.MM.YYYY', + maskWithFormat, + min, + max, + includeEdgeDates = false, + eventList, + disabledList, + type = 'Days', + + placement = ['top', 'bottom'], + closeOnOverlayClick = true, + offset, + + onChangeValue, + onCommitDate, + onToggle, + onFocus, + onBlur, + + ...rest + }, + ref, + ) => { + const inputRef = useRef(null); + const [isInnerOpen, setIsInnerOpen] = useState(isOpen); + + const [calendarValue, setCalendarValue] = useState(formatCalendarValue(defaultDate, format)); + const [inputValue, setInputValue] = useState(formatInputValue(defaultDate, format)); + + const dateFormatDelimiter = useCallback(() => getDateFormatDelimiter(format), [format]); + + const { + datePickerErrorClass, + datePickerSuccessClass, + handleToggle, + handleChangeValue, + handleCommitDate, + } = useDatePicker({ + currentValue: inputValue, + setInputValue, + setCalendarValue, + setIsInnerOpen, + dateFormatDelimiter, + format, + disabled, + readOnly, + maskWithFormat, + valueError, + valueSuccess, + inputRef, + onToggle, + onChangeValue, + onCommitDate, + }); + + const DatePickerInput = ( + handleCommitDate(date, true, false)} + onFocus={onFocus} + onBlur={onBlur} + /> + ); + + return ( + + {label && {label}} + + handleCommitDate(date, false, true)} + /> + + {leftHelper && {leftHelper}} + + ); + }, + ); + +export const datePickerConfig = { + name: 'DatePicker', + tag: 'div', + layout: datePickerRoot, + base, + variations: { + view: { + css: viewCSS, + }, + size: { + css: sizeCSS, + }, + disabled: { + css: disabledCSS, + attrs: true, + }, + readOnly: { + css: readOnlyCSS, + attrs: true, + }, + }, + defaults: { + size: 'm', + view: 'default', + }, +}; diff --git a/packages/plasma-new-hope/src/components/DatePicker/SingleDate/SingleDate.types.ts b/packages/plasma-new-hope/src/components/DatePicker/SingleDate/SingleDate.types.ts new file mode 100644 index 0000000000..44ee746ac4 --- /dev/null +++ b/packages/plasma-new-hope/src/components/DatePicker/SingleDate/SingleDate.types.ts @@ -0,0 +1,129 @@ +import type { HTMLAttributes, SyntheticEvent } from 'react'; + +import type { CalendarStateType } from '../../Calendar'; +import type { DisabledDay, EventDay } from '../../Calendar/Calendar.types'; +import type { DatePickerdVariationProps } from '../DatePickerBase.types'; + +export type DatePickerPlacementBasic = 'top' | 'bottom' | 'right' | 'left'; +export type DatePickerPlacement = DatePickerPlacementBasic | 'auto'; + +export type DatePickerTextFieldProps = { + /** + * Выбранное значение. + */ + defaultDate?: Date; + /** + * Некорректное значение даты + */ + valueError?: boolean; + /** + * Корректное значение даты + */ + valueSuccess?: boolean; + /** + * Метка-подпись к элементу + */ + label?: string; + /** + * Вспомогательный текст снизу слева для поля ввода. + */ + leftHelper?: string; + /** + * Слот для контента слева. + */ + contentLeft?: React.ReactElement; + /** + * Слот для контента справа. + */ + contentRight?: React.ReactElement; + /** + * Слот для вспомогательного текста справа. + */ + textBefore?: string; + /** + * Слот для вспомогательного текста слева. + */ + textAfter?: string; + /** + * Callback по нажатию Enter в поле ввода или выборе дня на календаре. + */ + onCommitDate?: (value: Date | string, error?: boolean, success?: boolean) => void; + /** + * Обработчик изменения значения. + */ + onChangeValue?: (event: SyntheticEvent, value?: string) => void; +}; + +export type DatePickerCalendarProps = { + /** + * Формат даты. + * @default `DD.MM.YYYY` + */ + format?: string; + /** + * Формат применяется в качестве маски ввода. + */ + maskWithFormat?: boolean; + /** + * Минимальное значение даты. + */ + min?: Date; + /** + * Максимальное значение даты. + */ + max?: Date; + /** + * Должны ли значения минимального и максимального дня включаться в диапазон. + */ + includeEdgeDates?: boolean; + /** + * Список событий. + */ + eventList?: EventDay[]; + /** + * Список отключенных дней. + */ + disabledList?: DisabledDay[]; + /** + * Тип отображения календаря: дни, месяца, года. + */ + type?: CalendarStateType; +}; + +export type DatePickerPopoverProps = { + /** + * Видимость календаря. + */ + isOpen?: boolean; + /** + * Сторона открытия календаря относительно поля ввода. + * @default + * ["bottom", "top"] + */ + placement?: DatePickerPlacement | Array; + /** + * Отступ календаря относительно поля ввода. + * @default [0, 0] + */ + offset?: [number, number]; + /** + * Закрывать календарь при нажатии вне области элемента. + * @default true + */ + closeOnOverlayClick?: boolean; + /** + * Закрывать календарь при нажатии Escape. + * @default true + */ + closeOnEsc?: boolean; + /** + * Событие сворачивания/разворачивания календаря. + */ + onToggle?: (isOpen: boolean, event: SyntheticEvent | Event) => void; +}; + +export type DatePickerProps = DatePickerdVariationProps & + DatePickerTextFieldProps & + DatePickerCalendarProps & + DatePickerPopoverProps & + Omit, 'defaultValue'>; diff --git a/packages/plasma-new-hope/src/components/DatePicker/SingleDate/variations/_disabled/base.ts b/packages/plasma-new-hope/src/components/DatePicker/SingleDate/variations/_disabled/base.ts new file mode 100644 index 0000000000..4868755868 --- /dev/null +++ b/packages/plasma-new-hope/src/components/DatePicker/SingleDate/variations/_disabled/base.ts @@ -0,0 +1,10 @@ +import { css } from '@linaria/core'; + +import { tokens } from '../../../DatePicker.tokens'; + +export const base = css` + &[disabled] { + opacity: var(${tokens.disabledOpacity}); + cursor: not-allowed; + } +`; diff --git a/packages/plasma-new-hope/src/components/DatePicker/SingleDate/variations/_disabled/tokens.json b/packages/plasma-new-hope/src/components/DatePicker/SingleDate/variations/_disabled/tokens.json new file mode 100644 index 0000000000..e013e492ea --- /dev/null +++ b/packages/plasma-new-hope/src/components/DatePicker/SingleDate/variations/_disabled/tokens.json @@ -0,0 +1,4 @@ +{ + "type": "boolean", + "tokens": ["--plasma-date-picker-disabled-opacity"] +} diff --git a/packages/plasma-new-hope/src/components/DatePicker/SingleDate/variations/_readonly/base.ts b/packages/plasma-new-hope/src/components/DatePicker/SingleDate/variations/_readonly/base.ts new file mode 100644 index 0000000000..a19a352a77 --- /dev/null +++ b/packages/plasma-new-hope/src/components/DatePicker/SingleDate/variations/_readonly/base.ts @@ -0,0 +1,19 @@ +import { css } from '@linaria/core'; + +import { tokens } from '../../../DatePicker.tokens'; +import { LeftHelper, StyledLabel } from '../../SingleDate.styles'; + +export const base = css` + &[readonly] { + cursor: default; + + ${StyledLabel} { + display: block; + color: var(${tokens.labelColorReadOnly}); + } + + ${LeftHelper} { + color: var(${tokens.leftHelperColorReadOnly}); + } + } +`; diff --git a/packages/plasma-new-hope/src/components/DatePicker/SingleDate/variations/_readonly/tokens.json b/packages/plasma-new-hope/src/components/DatePicker/SingleDate/variations/_readonly/tokens.json new file mode 100644 index 0000000000..698f64ae5b --- /dev/null +++ b/packages/plasma-new-hope/src/components/DatePicker/SingleDate/variations/_readonly/tokens.json @@ -0,0 +1,4 @@ +{ + "type": "boolean", + "tokens": ["--plasma-date-picker__label-color-readonly", "--plasma-date-picker__left-helper-color-readonly"] +} diff --git a/packages/plasma-new-hope/src/components/DatePicker/SingleDate/variations/_size/base.ts b/packages/plasma-new-hope/src/components/DatePicker/SingleDate/variations/_size/base.ts new file mode 100644 index 0000000000..b234ef9d44 --- /dev/null +++ b/packages/plasma-new-hope/src/components/DatePicker/SingleDate/variations/_size/base.ts @@ -0,0 +1,30 @@ +import { css } from '@linaria/core'; + +import { tokens } from '../../../DatePicker.tokens'; +import { StyledLabel, LeftHelper } from '../../SingleDate.styles'; + +export const base = css` + width: var(${tokens.width}); + + ${StyledLabel} { + margin: var(${tokens.labelOffset}); + + font-family: var(${tokens.labelFontFamily}); + font-size: var(${tokens.labelFontSize}); + font-style: var(${tokens.labelFontStyle}); + font-weight: var(${tokens.labelFontWeight}); + letter-spacing: var(${tokens.labelLetterSpacing}); + line-height: var(${tokens.labelLineHeight}); + } + + ${LeftHelper} { + margin: var(${tokens.leftHelperOffset}); + + font-family: var(${tokens.leftHelperFontFamily}); + font-size: var(${tokens.leftHelperFontSize}); + font-style: var(${tokens.leftHelperFontStyle}); + font-weight: var(${tokens.leftHelperFontWeight}); + letter-spacing: var(${tokens.leftHelperLetterSpacing}); + line-height: var(${tokens.leftHelperLineHeight}); + } +`; diff --git a/packages/plasma-new-hope/src/components/DatePicker/SingleDate/variations/_size/tokens.json b/packages/plasma-new-hope/src/components/DatePicker/SingleDate/variations/_size/tokens.json new file mode 100644 index 0000000000..6fb74382c7 --- /dev/null +++ b/packages/plasma-new-hope/src/components/DatePicker/SingleDate/variations/_size/tokens.json @@ -0,0 +1,16 @@ +[ + "--plasma-date-picker__label-offset", + "--plasma-date-picker__label-font-family", + "--plasma-date-picker__label-font-style", + "--plasma-date-picker__label-font-size", + "--plasma-date-picker__label-font-weight", + "--plasma-date-picker__label-letter-spacing", + "--plasma-date-picker__label-line-height", + "--plasma-date-picker__left-helper-offset", + "--plasma-date-picker__left-helper-font-family", + "--plasma-date-picker__left-helper-font-style", + "--plasma-date-picker__left-helper-font-size", + "--plasma-date-picker__left-helper-font-weight", + "--plasma-date-picker__left-helper-letter-spacing", + "--plasma-date-picker__left-helper-line-height" +] diff --git a/packages/plasma-new-hope/src/components/DatePicker/SingleDate/variations/_view/base.ts b/packages/plasma-new-hope/src/components/DatePicker/SingleDate/variations/_view/base.ts new file mode 100644 index 0000000000..ceb8303fbf --- /dev/null +++ b/packages/plasma-new-hope/src/components/DatePicker/SingleDate/variations/_view/base.ts @@ -0,0 +1,15 @@ +import { css } from '@linaria/core'; + +import { LeftHelper, StyledLabel } from '../../SingleDate.styles'; +import { tokens } from '../../../DatePicker.tokens'; + +export const base = css` + ${StyledLabel} { + display: block; + color: var(${tokens.labelColor}); + } + + ${LeftHelper} { + color: var(${tokens.leftHelperColor}); + } +`; diff --git a/packages/plasma-new-hope/src/components/DatePicker/SingleDate/variations/_view/tokens.json b/packages/plasma-new-hope/src/components/DatePicker/SingleDate/variations/_view/tokens.json new file mode 100644 index 0000000000..6fa6155b54 --- /dev/null +++ b/packages/plasma-new-hope/src/components/DatePicker/SingleDate/variations/_view/tokens.json @@ -0,0 +1 @@ +["--plasma-datepicker__label-color", "--plasma-datepicker__left-helper-color"] diff --git a/packages/plasma-new-hope/src/components/DatePicker/hooks/useDatePicker.ts b/packages/plasma-new-hope/src/components/DatePicker/hooks/useDatePicker.ts new file mode 100644 index 0000000000..720a691242 --- /dev/null +++ b/packages/plasma-new-hope/src/components/DatePicker/hooks/useDatePicker.ts @@ -0,0 +1,93 @@ +import { ChangeEvent, SyntheticEvent } from 'react'; + +import { classes } from '../DatePicker.tokens'; +import type { UseDatePickerProps } from '../DatePickerBase.types'; +import { formatCalendarValue, formatInputValue, getDateFromFormat, getMaskedDateOnInput } from '../utils/dateHelper'; + +export const useDatePicker = ({ + currentValue, + setInputValue, + setCalendarValue, + setIsInnerOpen, + dateFormatDelimiter, + format, + disabled, + readOnly, + maskWithFormat, + valueError, + valueSuccess, + inputRef, + onToggle, + onChangeValue, + onCommitDate, +}: UseDatePickerProps) => { + const datePickerErrorClass = valueError ? classes.datePickerError : undefined; + const datePickerSuccessClass = valueSuccess ? classes.datePickerSuccess : undefined; + + const handleToggle = (opened: boolean, event: SyntheticEvent | Event) => { + if (disabled || readOnly) { + return; + } + + const isCalendarOpen = event.target === inputRef?.current ? true : opened; + + if (onToggle) { + return onToggle(isCalendarOpen, event); + } + + setIsInnerOpen(isCalendarOpen); + }; + + const handleChangeValue = (event: ChangeEvent) => { + if (disabled || readOnly) { + return; + } + const { value } = event.target; + + const newValue = maskWithFormat + ? getMaskedDateOnInput(value, format, dateFormatDelimiter(), currentValue) + : value; + + setCalendarValue(formatCalendarValue(newValue, format)); + setInputValue(formatInputValue(newValue, format)); + + onChangeValue?.(event, newValue); + }; + + const handleCommitDate = (date?: Date | string, applyFormat?: boolean, isCalendarValue?: boolean) => { + if (disabled || readOnly) { + return; + } + + if (!date) { + setCalendarValue(undefined); + setInputValue(''); + + return onCommitDate?.('', false, true); + } + + if (isCalendarValue) { + setCalendarValue(formatCalendarValue(date, format)); + setInputValue(formatInputValue(date, format)); + + return onCommitDate?.(date, false, true); + } + + const formatString = applyFormat ? format : undefined; + + const { value: newDate, isError, isSuccess } = getDateFromFormat(date, formatString); + + setCalendarValue(formatCalendarValue(newDate, format)); + setInputValue(formatInputValue(newDate, format)); + + onCommitDate?.(newDate, isError, isSuccess); + }; + + return { + datePickerErrorClass, + datePickerSuccessClass, + handleToggle, + handleChangeValue, + handleCommitDate, + }; +}; diff --git a/packages/plasma-new-hope/src/components/DatePicker/index.ts b/packages/plasma-new-hope/src/components/DatePicker/index.ts new file mode 100644 index 0000000000..4e8fc1d59f --- /dev/null +++ b/packages/plasma-new-hope/src/components/DatePicker/index.ts @@ -0,0 +1,7 @@ +export { datePickerRoot, datePickerConfig } from './SingleDate/SingleDate'; +export type { DatePickerProps, DatePickerPlacementBasic, DatePickerPlacement } from './SingleDate/SingleDate.types'; + +export { datePickerRangeRoot, datePickerRangeConfig } from './RangeDate/RangeDate'; +export type { DatePickerRangeProps, DatePickerRangePlacement } from './RangeDate/RangeDate.types'; + +export { classes as datePickerClasses, tokens as datePickerTokens } from './DatePicker.tokens'; diff --git a/packages/plasma-new-hope/src/components/DatePicker/utils/dateHelper.ts b/packages/plasma-new-hope/src/components/DatePicker/utils/dateHelper.ts new file mode 100644 index 0000000000..4323d105bb --- /dev/null +++ b/packages/plasma-new-hope/src/components/DatePicker/utils/dateHelper.ts @@ -0,0 +1,79 @@ +import { customDayjs } from '../../../utils/datejs'; + +export const formatInputValue = (value?: Date | string, format?: string) => { + if (!value) { + return ''; + } + + if (format && customDayjs(value, format, true).isValid()) { + return customDayjs(value, format).format(format); + } + + if (format && String(value).length >= 10 && String(new Date(value)) !== 'Invalid Date') { + return customDayjs(value).format(format); + } + + return String(value); +}; + +export const formatCalendarValue = (value?: Date | string, format?: string) => { + if (!value) { + return undefined; + } + + if (format && customDayjs(value, format, true).isValid()) { + return customDayjs(value, format, true).toDate(); + } + + if (String(new Date(value)) !== 'Invalid Date') { + return customDayjs(value).toDate(); + } + + return undefined; +}; + +export const getDateFromFormat = (value: Date | string, format?: string) => { + if (format && customDayjs(value, format, true).isValid()) { + return { value: customDayjs(value, format, true).toDate(), isError: false, isSuccess: true }; + } + + if (!format && String(new Date(value)) !== 'Invalid Date') { + return { value: customDayjs(value).toDate(), isError: false, isSuccess: true }; + } + + return { value, isError: true, isSuccess: false }; +}; + +export const getDateFormatDelimiter = (format?: string) => { + if (!format) { + return ''; + } + + const delimiter = format.match(/[^a-zA-Z0-9]/)?.[0]; + + return delimiter ?? ''; +}; + +export const getMaskedDateOnInput = (value?: string, format?: string, delimiter?: string, prevValue?: string) => { + if (!value) { + return ''; + } + + if (!format || !delimiter) { + return value; + } + + if (value.length >= format.length) { + return value.slice(0, format.length); + } + + if (prevValue && value.length < prevValue.length && prevValue?.[value.length] === delimiter) { + return value.slice(0, -1); + } + + if (format?.[value.length] === delimiter) { + return value + delimiter; + } + + return value; +}; diff --git a/packages/plasma-new-hope/src/components/Dropdown/Dropdown.tsx b/packages/plasma-new-hope/src/components/Dropdown/Dropdown.tsx index 76fdaebbf0..6d2696ba9d 100644 --- a/packages/plasma-new-hope/src/components/Dropdown/Dropdown.tsx +++ b/packages/plasma-new-hope/src/components/Dropdown/Dropdown.tsx @@ -1,7 +1,7 @@ import React, { forwardRef, useReducer } from 'react'; import { RootProps } from '../../engines'; -import { cx } from '../../utils'; +import { cx, getPlacements } from '../../utils'; import { pathReducer } from './reducers/pathReducer'; import { focusedPathReducer } from './reducers/focusedPathReducer'; @@ -9,7 +9,7 @@ import { DropdownInner } from './ui'; import { base as viewCSS } from './variations/_view/base'; import { base as sizeCSS } from './variations/_size/base'; import { Ul, StyledPopover, base } from './Dropdown.styles'; -import { getPlacements, childrenWithProps } from './utils'; +import { childrenWithProps } from './utils'; import type { DropdownProps, HandleGlobalToggleType } from './Dropdown.types'; import { classes } from './Dropdown.tokens'; import { useKeyNavigation } from './hooks/useKeyboardNavigation'; @@ -139,6 +139,7 @@ export const dropdownRoot = (Root: RootProps) => listWidth={listWidth} variant={variant} hasArrow={hasArrow} + size={size} /> ))} diff --git a/packages/plasma-new-hope/src/components/Dropdown/ui/DropdownInner/DropdownInner.tsx b/packages/plasma-new-hope/src/components/Dropdown/ui/DropdownInner/DropdownInner.tsx index 75dcd8be6c..a490086807 100644 --- a/packages/plasma-new-hope/src/components/Dropdown/ui/DropdownInner/DropdownInner.tsx +++ b/packages/plasma-new-hope/src/components/Dropdown/ui/DropdownInner/DropdownInner.tsx @@ -25,6 +25,7 @@ const DropdownInner: FC = ({ listWidth, variant, hasArrow, + size, }) => { const handleToggle = (opened: boolean): void => { if (opened) { @@ -63,6 +64,7 @@ const DropdownInner: FC = ({ ariaExpanded={isCurrentListOpen} ariaLevel={nextLevel} ariaLabel={item.label} + size={size} /> } onToggle={handleToggle} @@ -98,6 +100,7 @@ const DropdownInner: FC = ({ listWidth={listWidth} variant={variant} hasArrow={hasArrow} + size={size} /> ))} @@ -118,6 +121,7 @@ const DropdownInner: FC = ({ onItemSelect={onItemSelect} onItemClick={onItemClick} variant={variant} + size={size} /> ); }; diff --git a/packages/plasma-new-hope/src/components/Dropdown/ui/DropdownInner/DropdownInner.type.ts b/packages/plasma-new-hope/src/components/Dropdown/ui/DropdownInner/DropdownInner.type.ts index 16b23d804c..f7c460a63a 100644 --- a/packages/plasma-new-hope/src/components/Dropdown/ui/DropdownInner/DropdownInner.type.ts +++ b/packages/plasma-new-hope/src/components/Dropdown/ui/DropdownInner/DropdownInner.type.ts @@ -24,4 +24,5 @@ export interface DropdownInnerProps { listWidth: DropdownProps['listWidth']; variant: DropdownProps['variant']; hasArrow: DropdownProps['hasArrow']; + size?: string; } diff --git a/packages/plasma-new-hope/src/components/Dropdown/ui/DropdownItem/DropdownItem.tsx b/packages/plasma-new-hope/src/components/Dropdown/ui/DropdownItem/DropdownItem.tsx index 0c99486fb3..a2e76ffca7 100644 --- a/packages/plasma-new-hope/src/components/Dropdown/ui/DropdownItem/DropdownItem.tsx +++ b/packages/plasma-new-hope/src/components/Dropdown/ui/DropdownItem/DropdownItem.tsx @@ -32,11 +32,13 @@ export const DropdownItem: FC = ({ ariaLabel, variant, hasArrow, + size, }) => { const { value, label, disabled, isDisabled, contentLeft, contentRight } = item; const ref = useRef(null); + const disclosureIconSize = size === 'xs' ? 'xs' : 's'; const isDisabledClassName = disabled || isDisabled ? classes.dropdownItemIsDisabled : undefined; const focusedClass = currentLevel === focusedPath.length - 1 && index === focusedPath?.[currentLevel] @@ -100,7 +102,7 @@ export const DropdownItem: FC = ({ {item.items && hasArrow && ( - + )} diff --git a/packages/plasma-new-hope/src/components/Dropdown/ui/DropdownItem/DropdownItem.type.ts b/packages/plasma-new-hope/src/components/Dropdown/ui/DropdownItem/DropdownItem.type.ts index d85ab33ed3..b5523148c1 100644 --- a/packages/plasma-new-hope/src/components/Dropdown/ui/DropdownItem/DropdownItem.type.ts +++ b/packages/plasma-new-hope/src/components/Dropdown/ui/DropdownItem/DropdownItem.type.ts @@ -52,6 +52,7 @@ export interface DropdownItemProps extends HTMLAttributes { currentLevel: number; index: number; variant: DropdownProps['variant']; + size?: string; path?: PathState; itemRole?: DropdownProps['itemRole']; closeOnSelect?: DropdownProps['closeOnSelect']; diff --git a/packages/plasma-new-hope/src/components/Dropdown/utils/index.tsx b/packages/plasma-new-hope/src/components/Dropdown/utils/index.tsx index aa3c438cf4..c62d2eb493 100644 --- a/packages/plasma-new-hope/src/components/Dropdown/utils/index.tsx +++ b/packages/plasma-new-hope/src/components/Dropdown/utils/index.tsx @@ -1,24 +1,7 @@ import type { ReactNode } from 'react'; import React, { Children, HTMLAttributes, ElementType, cloneElement, isValidElement } from 'react'; -import type { PopoverPlacementBasic } from '../../Popover'; -import type { DropdownPlacement, DropdownPlacementBasic, DropdownProps } from '../Dropdown.types'; - -export const getPlacement = (placement: DropdownPlacement) => { - return `${placement}-start` as PopoverPlacementBasic; -}; - -export const getPlacements = (placements?: DropdownPlacement | DropdownPlacementBasic[]) => { - if (!placements) { - return; - } - const isArray = Array.isArray(placements); - - if (!isArray) { - return getPlacement(placements as DropdownPlacement); - } - return ((placements || []) as DropdownPlacementBasic[]).map((placement) => getPlacement(placement)); -}; +import type { DropdownProps } from '../Dropdown.types'; export const getCorrectHeight = (listHeight: Required['listHeight']): string => { if (Number.isNaN(Number(listHeight))) { diff --git a/packages/plasma-new-hope/src/components/Range/Range.styles.ts b/packages/plasma-new-hope/src/components/Range/Range.styles.ts index e60f773896..1c05f0cd96 100644 --- a/packages/plasma-new-hope/src/components/Range/Range.styles.ts +++ b/packages/plasma-new-hope/src/components/Range/Range.styles.ts @@ -3,6 +3,7 @@ import { css } from '@linaria/core'; import { component, mergeConfig } from '../../engines'; import { textFieldConfig, textFieldTokens } from '../TextField'; +import { popoverClasses } from '../Popover'; import { classes, tokens } from './Range.tokens'; @@ -11,8 +12,6 @@ const TextField = component(mergedConfig); // NOTE: переопределение токенов TextField export const StyledInput = styled(TextField)` - flex: 1; - ${textFieldTokens.color}: var(${tokens.textFieldColor}); ${textFieldTokens.placeholderColor}: var(${tokens.textFieldPlaceholderColor}); ${textFieldTokens.caretColor}: var(${tokens.textFieldCaretColor}); @@ -75,7 +74,17 @@ export const StyledInput = styled(TextField)` } `; -export const base = css``; +export const base = css` + .${String(popoverClasses.wrapper)} { + display: block; + flex: 1; + } + + .${String(popoverClasses.target)} { + display: flex; + flex-direction: column; + } +`; export const StyledLabel = styled.label``; diff --git a/packages/plasma-new-hope/src/components/Range/Range.tsx b/packages/plasma-new-hope/src/components/Range/Range.tsx index b5ff9a9ea4..3cdec4d297 100644 --- a/packages/plasma-new-hope/src/components/Range/Range.tsx +++ b/packages/plasma-new-hope/src/components/Range/Range.tsx @@ -1,9 +1,9 @@ -import React, { forwardRef, useMemo } from 'react'; +import React, { forwardRef, useImperativeHandle, useMemo, useRef } from 'react'; import type { RootProps } from '../../engines'; import { cx } from '../../utils'; -import type { RangeProps } from './Range.types'; +import type { RangeInputRefs, RangeProps } from './Range.types'; import { base as sizeCSS } from './variations/_size/base'; import { base as viewCSS } from './variations/_view/base'; import { base as disabledCSS } from './variations/_disabled/base'; @@ -22,7 +22,7 @@ import { import { classes } from './Range.tokens'; export const rangeRoot = (Root: RootProps) => - forwardRef( + forwardRef( ( { label, @@ -67,6 +67,9 @@ export const rangeRoot = (Root: RootProps) => }, ref, ) => { + const rangeRef = useRef(null); + const firstTextFieldRef = useRef(null); + const secondTextFieldRef = useRef(null); const rangeErrorClass = firstValueError && secondValueError ? classes.rangeError : undefined; const firstValueErrorClass = !rangeErrorClass && firstValueError ? classes.rangeValueError : undefined; const secondValueErrorClass = !rangeErrorClass && secondValueError ? classes.rangeValueError : undefined; @@ -81,6 +84,19 @@ export const rangeRoot = (Root: RootProps) => const handleSearchFirstValue = getSearchHandler(onSearchFirstValue, disabled, readOnly); const handleSearchSecondValue = getSearchHandler(onSearchSecondValue, disabled, readOnly); + useImperativeHandle( + ref, + () => ({ + firstTextField: () => { + return firstTextFieldRef; + }, + secondTextField: () => { + return secondTextFieldRef; + }, + }), + [firstTextFieldRef, secondTextFieldRef], + ); + const Divider = useMemo(() => { if (dividerVariant === 'none') { return null; @@ -94,11 +110,19 @@ export const rangeRoot = (Root: RootProps) => }, [dividerVariant, dividerIcon]); return ( - + {label && {label}} {contentLeft && {contentLeft}} ) => /> {Divider} void; -export type RangeProps = { +export type RangeInputRefs = { + firstTextField: () => MutableRefObject; + secondTextField: () => MutableRefObject; +}; + +export type RangeInnerProps = { /** * Метка-подпись к элементу */ @@ -153,5 +158,6 @@ export type RangeProps = { * Коллбэк, вызываемый при потере фокуса вторым полем ввода */ onBlurSecondTextfield?: (event: ChangeEvent) => void; -} & RangeDividerVariants & - HTMLAttributes; +} & RangeDividerVariants; + +export type RangeProps = RangeInnerProps & HTMLAttributes; diff --git a/packages/plasma-new-hope/src/components/Range/index.ts b/packages/plasma-new-hope/src/components/Range/index.ts index bbbe686f37..f8cbfc374b 100644 --- a/packages/plasma-new-hope/src/components/Range/index.ts +++ b/packages/plasma-new-hope/src/components/Range/index.ts @@ -1,3 +1,3 @@ export { rangeRoot, rangeConfig } from './Range'; export { tokens as rangeTokens } from './Range.tokens'; -export type { RangeProps } from './Range.types'; +export type { RangeProps, RangeInputRefs } from './Range.types'; diff --git a/packages/plasma-new-hope/src/components/Select/Select.tsx b/packages/plasma-new-hope/src/components/Select/Select.tsx index 6d92f713cc..ce62edb38a 100644 --- a/packages/plasma-new-hope/src/components/Select/Select.tsx +++ b/packages/plasma-new-hope/src/components/Select/Select.tsx @@ -2,8 +2,7 @@ import React, { Children, forwardRef, useCallback, useEffect, useMemo, useRef, u import { safeUseId, useForkRef } from '@salutejs/plasma-core'; import { RootProps } from '../../engines'; -import { cx } from '../../utils'; -import { getPlacements } from '../Dropdown/utils'; +import { cx, getPlacements } from '../../utils'; import { useDidMountEffect, useForceUpdate } from '../../hooks'; import { base as targetCSS } from './variations/_target/base'; diff --git a/packages/plasma-new-hope/src/components/TextField/TextField.tokens.ts b/packages/plasma-new-hope/src/components/TextField/TextField.tokens.ts index 3c87fdea20..15629b3a79 100644 --- a/packages/plasma-new-hope/src/components/TextField/TextField.tokens.ts +++ b/packages/plasma-new-hope/src/components/TextField/TextField.tokens.ts @@ -26,7 +26,7 @@ export const tokens = { placeholderColor: '--plasma-textfield__placeholder-color', height: '--plasma-textfield-height', - borderWidth: '--plasmas-textfield-border-width', + borderWidth: '--plasma-textfield-border-width', borderRadius: '--plasma-textfield-border-radius', /** Отступ от границы ТextField */ diff --git a/packages/plasma-new-hope/src/components/TextField/variations/_size/base.ts b/packages/plasma-new-hope/src/components/TextField/variations/_size/base.ts index 2f86513f94..c362a90409 100644 --- a/packages/plasma-new-hope/src/components/TextField/variations/_size/base.ts +++ b/packages/plasma-new-hope/src/components/TextField/variations/_size/base.ts @@ -5,6 +5,7 @@ import { Input, InputWrapper, Label, LeftHelper, StyledTextAfter, StyledTextBefo export const base = css` ${Input} { + width: 100%; font-family: var(${tokens.fontFamily}); font-size: var(${tokens.fontSize}); font-style: var(${tokens.fontStyle}); diff --git a/packages/plasma-new-hope/src/components/_Icon/Icon.assets/DisclosureDownFill.tsx b/packages/plasma-new-hope/src/components/_Icon/Icon.assets/DisclosureDownFill.tsx new file mode 100644 index 0000000000..3381b312fc --- /dev/null +++ b/packages/plasma-new-hope/src/components/_Icon/Icon.assets/DisclosureDownFill.tsx @@ -0,0 +1,14 @@ +import React from 'react'; + +import { IconProps } from '../IconRoot'; + +export const DisclosureDownFill: React.FC = (props) => ( + + + +); diff --git a/packages/plasma-new-hope/src/components/_Icon/Icon.assets/DisclosureLeft.tsx b/packages/plasma-new-hope/src/components/_Icon/Icon.assets/DisclosureLeft.tsx index dc7e5978c7..145910f525 100644 --- a/packages/plasma-new-hope/src/components/_Icon/Icon.assets/DisclosureLeft.tsx +++ b/packages/plasma-new-hope/src/components/_Icon/Icon.assets/DisclosureLeft.tsx @@ -7,7 +7,7 @@ export const DisclosureLeft: React.FC = (props) => ( diff --git a/packages/plasma-new-hope/src/components/_Icon/Icon.assets/DisclosureRight.tsx b/packages/plasma-new-hope/src/components/_Icon/Icon.assets/DisclosureRight.tsx index a5c59fe645..de42b8a334 100644 --- a/packages/plasma-new-hope/src/components/_Icon/Icon.assets/DisclosureRight.tsx +++ b/packages/plasma-new-hope/src/components/_Icon/Icon.assets/DisclosureRight.tsx @@ -3,22 +3,12 @@ import React from 'react'; import { IconProps } from '../IconRoot'; export const DisclosureRight: React.FC = (props) => { - if (props.size === 'xs') { - return ( - - - - ); - } return ( diff --git a/packages/plasma-new-hope/src/components/_Icon/Icons/IconDisclosureDownFill.tsx b/packages/plasma-new-hope/src/components/_Icon/Icons/IconDisclosureDownFill.tsx new file mode 100644 index 0000000000..773fa08f4c --- /dev/null +++ b/packages/plasma-new-hope/src/components/_Icon/Icons/IconDisclosureDownFill.tsx @@ -0,0 +1,8 @@ +import React from 'react'; + +import { DisclosureDownFill } from '../Icon.assets/DisclosureDownFill'; +import { IconRoot, IconProps } from '../IconRoot'; + +export const IconDisclosureDownFill: React.FC = ({ size = 's', color, className }) => { + return ; +}; diff --git a/packages/plasma-new-hope/src/components/_Icon/index.tsx b/packages/plasma-new-hope/src/components/_Icon/index.tsx index cf8b1e70a0..854804d5b0 100644 --- a/packages/plasma-new-hope/src/components/_Icon/index.tsx +++ b/packages/plasma-new-hope/src/components/_Icon/index.tsx @@ -1,5 +1,6 @@ export { IconDisclosureLeft } from './Icons/IconDisclosureLeft'; export { IconDisclosureRight } from './Icons/IconDisclosureRight'; +export { IconDisclosureDownFill } from './Icons/IconDisclosureDownFill'; export { IconMic } from './Icons/IconMic'; export { IconChevronLeft } from './Icons/IconChevronLeft'; export { IconChevronDoubleLeft } from './Icons/IconChevronDoubleLeft'; diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Calendar/Calendar.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Calendar/Calendar.stories.tsx index c696c1e8b5..b9953502bd 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Calendar/Calendar.stories.tsx +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Calendar/Calendar.stories.tsx @@ -26,6 +26,12 @@ const meta: Meta = { type: 'date', }, }, + size: { + options: ['l', 'm', 's', 'xs'], + control: { + type: 'inline-radio', + }, + }, }, }; @@ -79,7 +85,7 @@ const baseEvents = [ ]; const StoryDefault = (args: CalendarProps) => { - const { isRange, isDouble, min, max, date, includeEdgeDates } = args; + const { isRange, isDouble, min, max, date, includeEdgeDates, size } = args; const [value, setValue] = useState(new Date(2023, 10, 16)); const [valueRange, setValueRange] = useState<[Date, Date?]>([new Date(2023, 10, 16), new Date(2023, 10, 23)]); @@ -102,6 +108,7 @@ const StoryDefault = (args: CalendarProps) => { return ( = { isDouble: false, isRange: false, includeEdgeDates: false, + size: 'm', }, render: (args) => , }; const StoryBase = (args: CalendarBaseProps) => { - const { min, max, type, includeEdgeDates } = args; + const { min, max, type, includeEdgeDates, size } = args; const [value, setValue] = useState(new Date(2023, 10, 16)); const handleOnChange = useCallback((newValue: Date) => { @@ -147,6 +155,7 @@ const StoryBase = (args: CalendarBaseProps) => { return ( = { }, }, args: { + size: 'm', min: new Date(2023, 10, 1), max: new Date(2023, 11, 24), includeEdgeDates: false, @@ -178,7 +188,7 @@ export const Base: StoryObj = { }; const StoryDouble = (args: CalendarDoubleProps) => { - const { min, max, includeEdgeDates } = args; + const { min, max, includeEdgeDates, size } = args; const [value, setValue] = useState(new Date(2023, 10, 16)); const handleOnChange = useCallback((newValue: Date) => { setValue(newValue); @@ -196,6 +206,7 @@ const StoryDouble = (args: CalendarDoubleProps) => { return ( { export const Double: StoryObj = { args: { + size: 'm', min: new Date(2023, 10, 1), max: new Date(2023, 11, 24), includeEdgeDates: false, @@ -217,7 +229,7 @@ export const Double: StoryObj = { }; const StoryRange = (args: CalendarBaseRangeProps) => { - const { min, max, type, includeEdgeDates } = args; + const { min, max, type, includeEdgeDates, size } = args; const [values, setValue] = useState<[Date, Date?]>([new Date(2023, 10, 15), new Date(2023, 10, 24)]); const handleOnChange = useCallback((newValue: [Date, Date?]) => { onChangeValue(newValue); @@ -238,6 +250,7 @@ const StoryRange = (args: CalendarBaseRangeProps) => { return ( = { }, }, args: { + size: 'm', min: new Date(2023, 10, 1), max: new Date(2023, 11, 24), includeEdgeDates: false, @@ -269,7 +283,7 @@ export const Range: StoryObj = { }; const StoryRangeDouble = (args: CalendarBaseRangeProps) => { - const { min, max, includeEdgeDates } = args; + const { min, max, includeEdgeDates, size } = args; const [values, setValue] = useState<[Date, Date?]>([new Date(2023, 10, 15), new Date(2023, 10, 24)]); const handleOnChange = useCallback((newValue: [Date, Date?]) => { onChangeValue(newValue); @@ -290,6 +304,7 @@ const StoryRangeDouble = (args: CalendarBaseRangeProps) => { return ( { export const RangeDouble: StoryObj = { args: { + size: 'm', min: new Date(2023, 10, 1), max: new Date(2023, 11, 24), includeEdgeDates: false, @@ -311,7 +327,7 @@ export const RangeDouble: StoryObj = { }; const StoryWithPopover = (args: CalendarProps) => { - const { isDouble, min, max, includeEdgeDates } = args; + const { isDouble, min, max, includeEdgeDates, size } = args; const [isOpen, setIsOpen] = useState(false); const [textValue, setTextValue] = useState('2023-10-16'); const [value, setValue] = useState(new Date(textValue)); @@ -345,6 +361,7 @@ const StoryWithPopover = (args: CalendarProps) => { closeOnOverlayClick > { export const WithPopover: StoryObj = { args: { + size: 'm', min: new Date(2023, 9, 1), max: new Date(2023, 11, 24), isDouble: false, diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Calendar/Calendar.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Calendar/Calendar.ts index 149a1c5cd0..9a0804f8ff 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Calendar/Calendar.ts +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Calendar/Calendar.ts @@ -1,3 +1,5 @@ +import type { FC } from 'react'; + import { component, mergeConfig } from '../../../../engines'; import { calendarBaseConfig, calendarDoubleConfig, withRange } from '../../../../components/Calendar'; import type { CalendarBaseProps, CalendarDoubleProps } from '../../../../components/Calendar'; @@ -15,8 +17,8 @@ export const CalendarBaseRange = withRange(CalendarBase); export const CalendarDoubleRange = withRange(CalendarDouble); export const Calendar = boundCalendar({ - base: CalendarBase, + base: CalendarBase as FC, baseRange: CalendarBaseRange, - double: CalendarDouble, + double: CalendarDouble as FC, doubleRange: CalendarDoubleRange, }); diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Calendar/CalendarBase.config.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Calendar/CalendarBase.config.ts index dcdef433a6..26672eace6 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Calendar/CalendarBase.config.ts +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Calendar/CalendarBase.config.ts @@ -10,28 +10,142 @@ export const config = { variations: { view: { default: css` - ${calendarBaseTokens.calendarBackgroundColor}: transparent; - ${calendarBaseTokens.calendarSelectedItemBackground}: var(--plasma-colors-primary); - ${calendarBaseTokens.calendarSelectedItemColor}: var(--plasma-colors-background-primary); - ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: var(--plasma-colors-surface-liquid02); - ${calendarBaseTokens.calendarCurrentItemBorderColor}: var(--plasma-colors-primary); + ${calendarBaseTokens.calendarSelectedItemBackground}: var(--surface-solid-default); + ${calendarBaseTokens.calendarSelectedItemColor}: var(--inverse-text-primary); + ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); + ${calendarBaseTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); ${calendarBaseTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarBaseTokens.calendarCurrentItemColorHover}: var(--plasma-colors-primary); - ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: var(--plasma-colors-surface-liquid02); - ${calendarBaseTokens.calendarActiveItemBackground}: var(--plasma-colors-primary); - ${calendarBaseTokens.calendarActiveItemColor}: var(--plasma-colors-surface-solid03); - ${calendarBaseTokens.calendarHoveredItemBackground}: var(--plasma-colors-accent); - ${calendarBaseTokens.calendarHoveredItemColor}: var(--plasma-colors-background-primary); - ${calendarBaseTokens.calendarRangeBackground}: var(--plasma-colors-surface-liquid02); - ${calendarBaseTokens.calendarOutlineFocusColor}: var(--plasma-colors-button-focused); - ${calendarBaseTokens.calendarContentPrimaryColor}: var(--plasma-colors-primary); - ${calendarBaseTokens.calendarContentSecondaryColor}: var(--plasma-colors-secondary); + ${calendarBaseTokens.calendarCurrentItemColorHover}: var(--text-primary); + ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); + ${calendarBaseTokens.calendarActiveItemBackground}: var(--surface-solid-default); + ${calendarBaseTokens.calendarActiveItemColor}: var(--inverse-text-primary); + ${calendarBaseTokens.calendarHoveredItemBackground}: var(--surface-accent); + ${calendarBaseTokens.calendarHoveredItemColor}: var(--text-primary); + ${calendarBaseTokens.calendarRangeBackground}: var(--surface-transparent-secondary); + ${calendarBaseTokens.calendarOutlineFocusColor}: var(--surface-accent); + ${calendarBaseTokens.calendarContentPrimaryColor}: var(--surface-solid-default); + ${calendarBaseTokens.calendarContentSecondaryColor}: var(--text-secondary); + ${calendarBaseTokens.calendarDayOfWeekColor}: var(--text-secondary); + + ${calendarBaseTokens.iconButtonColor}: var(--text-primary); + ${calendarBaseTokens.iconButtonBackgroundColor}: var(--surface-clear); + ${calendarBaseTokens.iconButtonColorHover}: var(--text-primary-hover); + ${calendarBaseTokens.iconButtonBackgroundColorHover}: var(--surface-clear); + ${calendarBaseTokens.iconButtonColorActive}: var(--text-primary-hover); + ${calendarBaseTokens.iconButtonBackgroundColorActive}: var(--surface-clear); + ${calendarBaseTokens.iconButtonFocusColor}: var(--surface-accent); `, }, size: { + l: css` + ${calendarBaseTokens.calendarWidth}: 24.5rem; + ${calendarBaseTokens.calendarHeight}: 25rem; + + ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.75rem; + ${calendarBaseTokens.calendarYearItemWidth}: 7.8125rem; + ${calendarBaseTokens.calendarYearItemHeight}: 5.25rem; + + ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); + ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); + ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); + ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); + ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.75rem; + ${calendarBaseTokens.calendarMonthItemWidth}: 7.8125rem; + ${calendarBaseTokens.calendarMonthItemHeight}: 5.25rem; + + ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); + ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); + ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0; + ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.75rem; + ${calendarBaseTokens.calendarDayItemWidth}: 3.5rem; + ${calendarBaseTokens.calendarDayItemHeight}: 3rem; + + ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); + ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); + ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); + ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); + ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${calendarBaseTokens.calendarHeaderArrowGap}: 0.5rem; + + ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 1rem; + ${calendarBaseTokens.calendarHeaderDateGap}: 0.5rem; + + ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); + ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); + ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); + ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); + ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); + ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + + ${calendarBaseTokens.iconButtonHeight}: 3.5rem; + ${calendarBaseTokens.iconButtonWidth}: 3.5rem; + ${calendarBaseTokens.iconButtonPadding}: 1.5rem; + ${calendarBaseTokens.iconButtonRadius}: 0.875rem; + `, m: css` - ${calendarBaseTokens.calendarHeaderArrowContainerWidth}: 5.5rem; - ${calendarBaseTokens.calendarItemBorderRadius}: 0.5rem; + ${calendarBaseTokens.calendarWidth}: 21rem; + ${calendarBaseTokens.calendarHeight}: 21rem; + + ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.625rem; + ${calendarBaseTokens.calendarYearItemWidth}: 6.688rem; + ${calendarBaseTokens.calendarYearItemHeight}: 4.375rem; + + ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); + ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); + ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); + ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.625rem; + ${calendarBaseTokens.calendarMonthItemWidth}: 6.688rem; + ${calendarBaseTokens.calendarMonthItemHeight}: 4.375rem; + + ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); + ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); + ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0; + ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.625rem; + ${calendarBaseTokens.calendarDayItemWidth}: 3rem; + ${calendarBaseTokens.calendarDayItemHeight}: 2.5rem; + + ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); + ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); + ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); + ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${calendarBaseTokens.calendarHeaderArrowGap}: 0.5rem; + + ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.75rem; + ${calendarBaseTokens.calendarHeaderDateGap}: 0.375rem; + ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); @@ -39,24 +153,133 @@ export const config = { ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + + ${calendarBaseTokens.iconButtonHeight}: 3rem; + ${calendarBaseTokens.iconButtonWidth}: 3rem; + ${calendarBaseTokens.iconButtonPadding}: 1.25rem; + ${calendarBaseTokens.iconButtonRadius}: 0.75rem; + `, + s: css` + ${calendarBaseTokens.calendarWidth}: 17.5rem; + ${calendarBaseTokens.calendarHeight}: 17rem; + + ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.5rem; + ${calendarBaseTokens.calendarYearItemWidth}: 5.5rem; + ${calendarBaseTokens.calendarYearItemHeight}: 3.5rem; + ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.5rem; + ${calendarBaseTokens.calendarMonthItemWidth}: 5.5rem; + ${calendarBaseTokens.calendarMonthItemHeight}: 3.5rem; + ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0; + ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem; + ${calendarBaseTokens.calendarDayItemWidth}: 2.5rem; + ${calendarBaseTokens.calendarDayItemHeight}: 2rem; + ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${calendarBaseTokens.calendarHeaderArrowGap}: 0.5rem; + + ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; + ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; + + ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); + ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); + ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); + ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); + ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); + ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + + ${calendarBaseTokens.iconButtonHeight}: 2.5rem; + ${calendarBaseTokens.iconButtonWidth}: 2.5rem; + ${calendarBaseTokens.iconButtonPadding}: 1rem; + ${calendarBaseTokens.iconButtonRadius}: 0.625rem; + `, + xs: css` + ${calendarBaseTokens.calendarWidth}: 17.5rem; + ${calendarBaseTokens.calendarHeight}: 15.5rem; + + ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; + ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.375rem; + ${calendarBaseTokens.calendarYearItemWidth}: 5.625rem; + ${calendarBaseTokens.calendarYearItemHeight}: 3.281rem; + + ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); + ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); + ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); + ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; + ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.375rem; + ${calendarBaseTokens.calendarMonthItemWidth}: 5.625rem; + ${calendarBaseTokens.calendarMonthItemHeight}: 3.281rem; + + ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); + ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); + ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; + ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem; + ${calendarBaseTokens.calendarDayItemWidth}: 2.5rem; + ${calendarBaseTokens.calendarDayItemHeight}: 1.875rem; + + ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); + ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); + ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); + ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${calendarBaseTokens.calendarHeaderArrowGap}: 0; + + ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; + ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; + + ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); + ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); + ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); + ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); + ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); + ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + + ${calendarBaseTokens.iconButtonHeight}: 2rem; + ${calendarBaseTokens.iconButtonWidth}: 2rem; + ${calendarBaseTokens.iconButtonPadding}: 0.75rem; + ${calendarBaseTokens.iconButtonRadius}: 0.5rem; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Calendar/CalendarDouble.config.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Calendar/CalendarDouble.config.ts index 624c10c465..8c7b1ca7cb 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Calendar/CalendarDouble.config.ts +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Calendar/CalendarDouble.config.ts @@ -10,28 +10,144 @@ export const config = { variations: { view: { default: css` + ${calendarDoubleTokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); ${calendarDoubleTokens.calendarBackgroundColor}: transparent; - ${calendarDoubleTokens.calendarSelectedItemBackground}: var(--plasma-colors-primary); - ${calendarDoubleTokens.calendarSelectedItemColor}: var(--plasma-colors-background-primary); - ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: var(--plasma-colors-surface-liquid02); - ${calendarDoubleTokens.calendarCurrentItemBorderColor}: var(--plasma-colors-primary); + ${calendarDoubleTokens.calendarSelectedItemBackground}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarSelectedItemColor}: var(--inverse-text-primary); + ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); + ${calendarDoubleTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); ${calendarDoubleTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarDoubleTokens.calendarCurrentItemColorHover}: var(--plasma-colors-primary); - ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: var(--plasma-colors-surface-liquid02); - ${calendarDoubleTokens.calendarActiveItemBackground}: var(--plasma-colors-primary); - ${calendarDoubleTokens.calendarActiveItemColor}: var(--plasma-colors-surface-solid03); - ${calendarDoubleTokens.calendarHoveredItemBackground}: var(--plasma-colors-accent); - ${calendarDoubleTokens.calendarHoveredItemColor}: var(--plasma-colors-background-primary); - ${calendarDoubleTokens.calendarSeparatorBackground}: var(--plasma-colors-surface-liquid02); - ${calendarDoubleTokens.calendarRangeBackground}: var(--plasma-colors-surface-liquid02); - ${calendarDoubleTokens.calendarOutlineFocusColor}: var(--plasma-colors-button-focused); - ${calendarDoubleTokens.calendarContentPrimaryColor}: var(--plasma-colors-primary); - ${calendarDoubleTokens.calendarContentSecondaryColor}: var(--plasma-colors-secondary); + ${calendarDoubleTokens.calendarCurrentItemColorHover}: var(--text-primary); + ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); + ${calendarDoubleTokens.calendarActiveItemBackground}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarActiveItemColor}: var(--inverse-text-primary); + ${calendarDoubleTokens.calendarHoveredItemBackground}: var(--surface-accent); + ${calendarDoubleTokens.calendarHoveredItemColor}: var(--text-primary); + ${calendarDoubleTokens.calendarRangeBackground}: var(--surface-transparent-secondary); + ${calendarDoubleTokens.calendarOutlineFocusColor}: var(--surface-accent); + ${calendarDoubleTokens.calendarContentPrimaryColor}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarContentSecondaryColor}: var(--text-secondary); + + ${calendarDoubleTokens.iconButtonColor}: var(--text-primary); + ${calendarDoubleTokens.iconButtonBackgroundColor}: var(--surface-clear); + ${calendarDoubleTokens.iconButtonColorHover}: var(--text-primary-hover); + ${calendarDoubleTokens.iconButtonBackgroundColorHover}: var(--surface-clear); + ${calendarDoubleTokens.iconButtonColorActive}: var(--text-primary-hover); + ${calendarDoubleTokens.iconButtonBackgroundColorActive}: var(--surface-clear); + ${calendarDoubleTokens.iconButtonFocusColor}: var(--surface-accent); `, }, size: { + l: css` + ${calendarDoubleTokens.calendarWidth}: 51.063rem; + ${calendarDoubleTokens.calendarHeight}: 25rem; + + ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.75rem; + ${calendarDoubleTokens.calendarYearItemWidth}: 7.8125rem; + ${calendarDoubleTokens.calendarYearItemHeight}: 5.25rem; + + ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); + ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); + ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.75rem; + ${calendarDoubleTokens.calendarMonthItemWidth}: 7.8125rem; + ${calendarDoubleTokens.calendarMonthItemHeight}: 5.25rem; + + ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); + ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); + ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.75rem; + ${calendarDoubleTokens.calendarDayItemWidth}: 3.5rem; + ${calendarDoubleTokens.calendarDayItemHeight}: 3rem; + + ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); + ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); + ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0.5rem; + + ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; + ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 1rem; + ${calendarDoubleTokens.calendarHeaderDateGap}: 0.5rem; + + ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); + ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); + ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); + ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + + ${calendarDoubleTokens.iconButtonHeight}: 3.5rem; + ${calendarDoubleTokens.iconButtonWidth}: 3.5rem; + ${calendarDoubleTokens.iconButtonPadding}: 1.5rem; + ${calendarDoubleTokens.iconButtonRadius}: 0.875rem; + `, m: css` - ${calendarDoubleTokens.calendarItemBorderRadius}: 0.5rem; + ${calendarDoubleTokens.calendarWidth}: 44.063rem; + ${calendarDoubleTokens.calendarHeight}: 21rem; + + ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.625rem; + ${calendarDoubleTokens.calendarYearItemWidth}: 6.688rem; + ${calendarDoubleTokens.calendarYearItemHeight}: 4.375rem; + + ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); + ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); + ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.625rem; + ${calendarDoubleTokens.calendarMonthItemWidth}: 6.688rem; + ${calendarDoubleTokens.calendarMonthItemHeight}: 4.375rem; + + ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); + ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); + ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; + ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.625rem; + ${calendarDoubleTokens.calendarDayItemWidth}: 3rem; + ${calendarDoubleTokens.calendarDayItemHeight}: 2.5rem; + + ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); + ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); + ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0.5rem; + + ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; + ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.75rem; + ${calendarDoubleTokens.calendarHeaderDateGap}: 0.375rem; + ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); @@ -39,24 +155,133 @@ export const config = { ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + + ${calendarDoubleTokens.iconButtonHeight}: 3rem; + ${calendarDoubleTokens.iconButtonWidth}: 3rem; + ${calendarDoubleTokens.iconButtonPadding}: 1.25rem; + ${calendarDoubleTokens.iconButtonRadius}: 0.75rem; + `, + s: css` + ${calendarDoubleTokens.calendarWidth}: 37.063rem; + ${calendarDoubleTokens.calendarHeight}: 17rem; + + ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.5rem; + ${calendarDoubleTokens.calendarYearItemWidth}: 5.5rem; + ${calendarDoubleTokens.calendarYearItemHeight}: 3.5rem; + ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.5rem; + ${calendarDoubleTokens.calendarMonthItemWidth}: 5.5rem; + ${calendarDoubleTokens.calendarMonthItemHeight}: 3.5rem; + ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.5rem; + ${calendarDoubleTokens.calendarDayItemWidth}: 2.5rem; + ${calendarDoubleTokens.calendarDayItemHeight}: 2rem; + ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0.5rem; + + ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; + ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; + ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; + + ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); + ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); + ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); + ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + + ${calendarDoubleTokens.iconButtonHeight}: 2.5rem; + ${calendarDoubleTokens.iconButtonWidth}: 2.5rem; + ${calendarDoubleTokens.iconButtonPadding}: 1rem; + ${calendarDoubleTokens.iconButtonRadius}: 0.625rem; + `, + xs: css` + ${calendarDoubleTokens.calendarWidth}: 37.063rem; + ${calendarDoubleTokens.calendarHeight}: 15.5rem; + + ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; + ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.375rem; + ${calendarDoubleTokens.calendarYearItemWidth}: 5.625rem; + ${calendarDoubleTokens.calendarYearItemHeight}: 3.281rem; + + ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); + ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); + ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; + ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.375rem; + ${calendarDoubleTokens.calendarMonthItemWidth}: 5.625rem; + ${calendarDoubleTokens.calendarMonthItemHeight}: 3.281rem; + + ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); + ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); + ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; + ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.375rem; + ${calendarDoubleTokens.calendarDayItemWidth}: 2.5rem; + ${calendarDoubleTokens.calendarDayItemHeight}: 1.875rem; + + ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); + ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); + ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0; + + ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; + ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; + + ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); + ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); + ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); + ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + + ${calendarDoubleTokens.iconButtonHeight}: 2rem; + ${calendarDoubleTokens.iconButtonWidth}: 2rem; + ${calendarDoubleTokens.iconButtonPadding}: 0.75rem; + ${calendarDoubleTokens.iconButtonRadius}: 0.5rem; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/DatePicker/DatePicker.config.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/DatePicker/DatePicker.config.ts new file mode 100644 index 0000000000..4c525c7015 --- /dev/null +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/DatePicker/DatePicker.config.ts @@ -0,0 +1,517 @@ +import { css } from '@linaria/core'; + +import { datePickerTokens as tokens } from '../../../../components/DatePicker'; + +export const config = { + defaults: { + view: 'default', + size: 'm', + }, + variations: { + view: { + default: css` + ${tokens.background}: var(--surface-transparent-primary); + ${tokens.backgroundError}: var(--surface-transparent-negative); + ${tokens.backgroundSuccess}: var(--surface-transparent-positive); + + ${tokens.dividerColor}: var(--text-primary); + ${tokens.labelColor}: var(--text-primary); + ${tokens.leftHelperColor}: var(--text-secondary); + + ${tokens.textFieldColor}: var(--text-primary); + ${tokens.textFieldPlaceholderColor}: var(--text-secondary); + ${tokens.textFieldCaretColor}: var(--text-accent); + + ${tokens.textFieldBackgroundColor}: var(--surface-transparent-secondary); + ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); + ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); + ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); + + ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); + ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + + ${tokens.focusColor}: var(--text-accent); + + ${tokens.calendarShadow}: var(--shadow-down-soft-s); + ${tokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); + ${tokens.calendarBackgroundColor}: var(--surface-solid-card); + ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); + ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); + ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemBackgroundHover}: transparent; + ${tokens.calendarCurrentItemColorHover}: var(--text-primary); + ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); + ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); + ${tokens.calendarHoveredItemBackground}: var(--surface-accent); + ${tokens.calendarHoveredItemColor}: var(--text-primary); + ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); + ${tokens.calendarOutlineFocusColor}: var(--surface-accent); + ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); + ${tokens.calendarContentSecondaryColor}: var(--text-secondary); + + ${tokens.iconButtonColor}: var(--text-primary); + ${tokens.iconButtonBackgroundColor}: var(--surface-clear); + ${tokens.iconButtonColorHover}: var(--text-primary-hover); + ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); + ${tokens.iconButtonColorActive}: var(--text-primary-hover); + ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); + ${tokens.iconButtonFocusColor}: var(--surface-accent); + `, + }, + size: { + l: css` + ${tokens.width}: 26.5rem; + ${tokens.borderRadius}: 0.875rem; + + ${tokens.dividerPadding}: 0 0.375rem; + ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + + ${tokens.leftContentMargin}: 0 0 0 1rem; + ${tokens.rightContentMargin}: 0; + + ${tokens.labelOffset}: 0 0 0.75rem 0; + + ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + + ${tokens.textFieldHeight}: 3.5rem; + ${tokens.textFieldBorderRadius}: 0.875rem; + ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + + ${tokens.leftHelperOffset}: 0.25rem 0 0 0; + ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; + ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; + ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; + ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; + + ${tokens.calendarBorderRadius}: 0.875rem; + ${tokens.calendarWidth}: 26.5rem; + + ${tokens.calendarYearsPadding}: 0.5rem 1rem 1.125rem 1rem; + ${tokens.calendarYearItemBorderRadius}: 0.75rem; + ${tokens.calendarYearItemWidth}: 7.8125rem; + ${tokens.calendarYearItemHeight}: 5.25rem; + + ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${tokens.calendarMonthsPadding}: 0.5rem 1rem 1.125rem 1rem; + ${tokens.calendarMonthItemBorderRadius}: 0.75rem; + ${tokens.calendarMonthItemWidth}: 7.8125rem; + ${tokens.calendarMonthItemHeight}: 5.25rem; + + ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${tokens.calendarDaysPadding}: 0.5rem 1rem 1.125rem 1rem; + ${tokens.calendarDayItemBorderRadius}: 0.75rem; + ${tokens.calendarDayItemWidth}: 3.5rem; + ${tokens.calendarDayItemHeight}: 3rem; + + ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${tokens.calendarHeaderWrapperPadding}: 0.875rem 1rem 0 1rem; + ${tokens.calendarHeaderArrowGap}: 0.5rem; + + ${tokens.calendarHeaderPadding}: 0 0 0 1rem; + ${tokens.calendarHeaderDateGap}: 0.5rem; + + ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); + ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); + ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); + ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); + ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); + ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); + ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + + ${tokens.iconButtonHeight}: 3.5rem; + ${tokens.iconButtonWidth}: 3.5rem; + ${tokens.iconButtonPadding}: 1.5rem; + ${tokens.iconButtonRadius}: 0.875rem; + `, + m: css` + ${tokens.width}: 23rem; + ${tokens.borderRadius}: 0.75rem; + + ${tokens.dividerPadding}: 0 0.375rem; + ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + + ${tokens.leftContentMargin}: 0 0 0 0.875rem; + ${tokens.rightContentMargin}: 0; + + ${tokens.labelOffset}: 0 0 0.625rem 0; + + ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + + ${tokens.textFieldHeight}: 3rem; + ${tokens.textFieldBorderRadius}: 0.75rem; + ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + + ${tokens.leftHelperOffset}: 0.25rem 0 0 0; + ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; + ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; + ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; + ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; + + ${tokens.calendarWidth}: 23rem; + ${tokens.calendarBorderRadius}: 0.875rem; + + ${tokens.calendarYearsPadding}: 0.5rem 1rem 1.125rem 1rem; + ${tokens.calendarYearItemBorderRadius}: 0.625rem; + ${tokens.calendarYearItemWidth}: 6.688rem; + ${tokens.calendarYearItemHeight}: 4.375rem; + + ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${tokens.calendarMonthsPadding}: 0.5rem 1rem 1.125rem 1rem; + ${tokens.calendarMonthItemBorderRadius}: 0.625rem; + ${tokens.calendarMonthItemWidth}: 6.688rem; + ${tokens.calendarMonthItemHeight}: 4.375rem; + + ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${tokens.calendarDaysPadding}: 0.5rem 1rem 1.125rem 1rem; + ${tokens.calendarDayItemBorderRadius}: 0.625rem; + ${tokens.calendarDayItemWidth}: 3rem; + ${tokens.calendarDayItemHeight}: 2.5rem; + + ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${tokens.calendarHeaderWrapperPadding}: 0.75rem 1rem 0 1rem; + ${tokens.calendarHeaderArrowGap}: 0.5rem; + + ${tokens.calendarHeaderPadding}: 0 0 0 0.875rem; + ${tokens.calendarHeaderDateGap}: 0.375rem; + + ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); + ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); + ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); + ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); + ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); + ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); + ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + + ${tokens.iconButtonHeight}: 3rem; + ${tokens.iconButtonWidth}: 3rem; + ${tokens.iconButtonPadding}: 1.25rem; + ${tokens.iconButtonRadius}: 0.75rem; + `, + s: css` + ${tokens.width}: 19.5rem; + ${tokens.borderRadius}: 0.625rem; + + ${tokens.dividerPadding}: 0 0.375rem; + ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + + ${tokens.leftContentMargin}: 0 0 0 0.75rem; + ${tokens.rightContentMargin}: 0; + + ${tokens.labelOffset}: 0 0 0.5rem 0; + + ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + + ${tokens.textFieldHeight}: 2.5rem; + ${tokens.textFieldBorderRadius}: 0.625rem; + ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + + ${tokens.leftHelperOffset}: 0.25rem 0 0 0; + ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; + ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; + ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; + ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; + + ${tokens.calendarWidth}: 19.5rem; + ${tokens.calendarBorderRadius}: 0.875rem; + + ${tokens.calendarYearsPadding}: 0.5rem 1rem 0.875rem 1rem; + ${tokens.calendarYearItemBorderRadius}: 0.5rem; + ${tokens.calendarYearItemWidth}: 5.5rem; + ${tokens.calendarYearItemHeight}: 3.5rem; + + ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${tokens.calendarMonthsPadding}: 0.5rem 1rem 0.875rem 1rem; + ${tokens.calendarMonthItemBorderRadius}: 0.5rem; + ${tokens.calendarMonthItemWidth}: 5.5rem; + ${tokens.calendarMonthItemHeight}: 3.5rem; + + ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${tokens.calendarDaysPadding}: 0.5rem 1rem 0.875rem 1rem; + ${tokens.calendarDayItemBorderRadius}: 0.5rem; + ${tokens.calendarDayItemWidth}: 2.5rem; + ${tokens.calendarDayItemHeight}: 2rem; + + ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${tokens.calendarHeaderWrapperPadding}: 0.75rem 1rem 0 1rem; + ${tokens.calendarHeaderArrowGap}: 0.5rem; + + ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; + ${tokens.calendarHeaderDateGap}: 0.25rem; + + ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); + ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); + ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); + ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); + ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); + ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); + ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + + ${tokens.iconButtonHeight}: 2rem; + ${tokens.iconButtonWidth}: 2rem; + ${tokens.iconButtonPadding}: 0.75rem; + ${tokens.iconButtonRadius}: 0.5rem; + `, + xs: css` + ${tokens.width}: 19rem; + ${tokens.borderRadius}: 0.5rem; + + ${tokens.dividerPadding}: 0 0.375rem; + ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.leftContentMargin}: 0 0 0 0.5rem; + ${tokens.rightContentMargin}: 0; + + ${tokens.labelOffset}: 0 0 0.375rem 0; + + ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.textFieldHeight}: 2rem; + ${tokens.textFieldBorderRadius}: 0.5rem; + ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.leftHelperOffset}: 0.25rem 0 0 0; + ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; + ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; + ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; + ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; + + ${tokens.calendarWidth}: 19rem; + ${tokens.calendarBorderRadius}: 0.5rem; + + ${tokens.calendarYearsPadding}: 0.5rem 0.75rem 0.625rem 0.75rem; + ${tokens.calendarYearItemBorderRadius}: 0.375rem; + ${tokens.calendarYearItemWidth}: 5.625rem; + ${tokens.calendarYearItemHeight}: 3.281rem; + + ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${tokens.calendarMonthsPadding}: 0.5rem 0.75rem 0.625rem 0.75rem; + ${tokens.calendarMonthItemBorderRadius}: 0.375rem; + ${tokens.calendarMonthItemWidth}: 5.625rem; + ${tokens.calendarMonthItemHeight}: 3.281rem; + + ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${tokens.calendarDaysPadding}: 0.375rem 0.75rem 0.625rem 0.75rem; + ${tokens.calendarDayItemBorderRadius}: 0.375rem; + ${tokens.calendarDayItemWidth}: 2.5rem; + ${tokens.calendarDayItemHeight}: 2rem; + + ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${tokens.calendarHeaderWrapperPadding}: 0.5rem 0.75rem 0 0.75rem; + ${tokens.calendarHeaderArrowGap}: 0; + + ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; + ${tokens.calendarHeaderDateGap}: 0.25rem; + + ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); + ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); + ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); + ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); + ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); + ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); + ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + + ${tokens.iconButtonHeight}: 2rem; + ${tokens.iconButtonWidth}: 2rem; + ${tokens.iconButtonPadding}: 0.75rem; + ${tokens.iconButtonRadius}: 0.5rem; + `, + }, + disabled: { + true: css` + ${tokens.disabledOpacity}: 0.4; + `, + }, + readOnly: { + true: css` + ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); + ${tokens.labelColorReadOnly}: var(--text-secondary); + ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: var(--text-secondary); + + ${tokens.textFieldColorReadOnly}: var(--text-secondary); + ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); + ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + `, + }, + }, +}; diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx new file mode 100644 index 0000000000..225aaed0d9 --- /dev/null +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/DatePicker/DatePicker.stories.tsx @@ -0,0 +1,257 @@ +import React, { ComponentProps, useRef, useState } from 'react'; +import type { StoryObj, Meta } from '@storybook/react'; +import { action } from '@storybook/addon-actions'; +import { IconPlaceholder } from '@salutejs/plasma-sb-utils'; + +import { WithTheme } from '../../../_helpers'; +import { IconButton } from '../IconButton/IconButton'; +import { RangeInputRefs } from '../../../../components/Range/Range.types'; + +import { DatePicker, DatePickerRange } from './DatePicker'; + +const onChangeValue = action('onChangeValue'); +const onBlur = action('onBlur'); +const onFocus = action('onFocus'); + +const onChangeFirstValue = action('onChangeFirstValue'); +const onChangeSecondValue = action('onChangeSecondValue'); + +const sizes = ['l', 'm', 's', 'xs']; +const views = ['default']; +const dividers = ['none', 'dash', 'icon']; + +const meta: Meta = { + title: 'plasma_b2c/DatePicker', + decorators: [WithTheme], + argTypes: { + view: { + options: views, + control: { + type: 'inline-radio', + }, + }, + size: { + options: sizes, + control: { + type: 'inline-radio', + }, + }, + min: { + control: { + type: 'date', + }, + }, + max: { + control: { + type: 'date', + }, + }, + }, +}; + +export default meta; + +type StoryPropsDefault = ComponentProps & { + enableContentLeft: boolean; + enableContentRight: boolean; +}; + +const StoryDefault = ({ + enableContentLeft, + enableContentRight, + valueError, + valueSuccess, + size, + ...rest +}: StoryPropsDefault) => { + const [isOpen, setIsOpen] = useState(false); + + const iconSize = size === 'xs' ? 'xs' : 's'; + + return ( + : undefined} + contentRight={enableContentRight ? : undefined} + onBlur={onBlur} + onFocus={onFocus} + onToggle={(is) => setIsOpen(is)} + onChangeValue={(e, currentValue) => { + onChangeValue(e, currentValue); + }} + onCommitDate={() => setIsOpen(false)} + {...rest} + /> + ); +}; + +export const Default: StoryObj = { + argTypes: { + defaultDate: { + control: { + type: 'date', + }, + }, + }, + args: { + label: 'Лейбл', + leftHelper: 'Подсказка к полю', + placeholder: '30.05.2024', + size: 'l', + view: 'default', + defaultDate: new Date(2024, 5, 14), + min: new Date(2024, 1, 1), + max: new Date(2024, 12, 29), + maskWithFormat: false, + disabled: false, + readOnly: false, + textBefore: '', + enableContentLeft: true, + enableContentRight: true, + valueError: false, + valueSuccess: false, + }, + render: (args) => , +}; + +type StoryPropsRange = ComponentProps & { + enableContentLeft: boolean; + enableContentRight: boolean; + enableFirstTextfieldContentLeft: boolean; + enableSecondTextfieldContentLeft: boolean; + enableFirstTextfieldContentRight: boolean; + enableSecondTextfieldContentRight: boolean; +}; + +const ActionButton = ({ size }) => { + const iconSize = size === 'xs' ? 'xs' : 's'; + return ( + + + + ); +}; + +const StoryRange = ({ + dividerVariant, + enableContentLeft, + enableContentRight, + firstTextfieldTextBefore, + secondTextfieldTextBefore, + enableFirstTextfieldContentLeft, + enableSecondTextfieldContentLeft, + enableFirstTextfieldContentRight, + enableSecondTextfieldContentRight, + firstValueError, + firstValueSuccess, + secondValueError, + secondValueSuccess, + size, + ...rest +}: StoryPropsRange) => { + const rangeRef = useRef(null); + + const [isOpen, setIsOpen] = useState(false); + const [firstDate, setFirstDate] = useState(''); + + const iconSize = size === 'xs' ? 'xs' : 's'; + const showDividerIcon = dividerVariant === 'icon'; + const showDefaultTextBefore = dividerVariant === 'none'; + + const dividerIconProps = { + dividerIcon: showDividerIcon ? : null, + dividerVariant, + }; + + return ( + : undefined} + contentRight={enableContentRight ? : undefined} + firstTextfieldContentLeft={ + enableFirstTextfieldContentLeft ? : undefined + } + firstTextfieldContentRight={ + enableFirstTextfieldContentRight ? : undefined + } + secondTextfieldContentLeft={ + enableSecondTextfieldContentLeft ? : undefined + } + secondTextfieldContentRight={ + enableSecondTextfieldContentRight ? : undefined + } + firstTextfieldTextBefore={ + showDefaultTextBefore ? firstTextfieldTextBefore || 'С' : firstTextfieldTextBefore + } + secondTextfieldTextBefore={ + showDefaultTextBefore ? secondTextfieldTextBefore || 'ПО' : secondTextfieldTextBefore + } + onToggle={(is) => setIsOpen(is)} + onChangeFirstValue={(e, currentValue) => { + onChangeFirstValue(e, currentValue); + }} + onChangeSecondValue={(e, currentValue) => { + onChangeSecondValue(e, currentValue); + }} + onCommitFirstDate={(currentValue) => { + setFirstDate(currentValue); + }} + onCommitSecondDate={(currentValue) => { + firstDate && currentValue && setIsOpen(false); + }} + {...dividerIconProps} + {...rest} + /> + ); +}; + +export const Range: StoryObj = { + argTypes: { + dividerVariant: { + options: dividers, + control: { + type: 'inline-radio', + }, + }, + }, + args: { + label: 'Лейбл', + leftHelper: 'Подсказка к полю', + firstPlaceholder: '30.05.2024', + secondPlaceholder: '04.06.2024', + firstTextfieldTextBefore: '', + secondTextfieldTextBefore: '', + firstTextfieldTextAfter: '', + secondTextfieldTextAfter: '', + size: 'l', + view: 'default', + isDoubleCalendar: false, + dividerVariant: 'dash', + min: new Date(2024, 1, 1), + max: new Date(2024, 12, 29), + maskWithFormat: false, + disabled: false, + readOnly: false, + enableContentLeft: true, + enableContentRight: true, + enableFirstTextfieldContentLeft: false, + enableFirstTextfieldContentRight: false, + enableSecondTextfieldContentLeft: false, + enableSecondTextfieldContentRight: false, + + firstValueError: false, + firstValueSuccess: false, + secondValueError: false, + secondValueSuccess: false, + }, + render: (args) => , +}; diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/DatePicker/DatePicker.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/DatePicker/DatePicker.ts new file mode 100644 index 0000000000..cd8ddb476c --- /dev/null +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/DatePicker/DatePicker.ts @@ -0,0 +1,10 @@ +import { component, mergeConfig } from '../../../../engines'; +import { datePickerConfig, datePickerRangeConfig } from '../../../../components/DatePicker'; + +import { config } from './DatePicker.config'; + +const mergedConfig = mergeConfig(datePickerConfig, config); +export const DatePicker = component(mergedConfig); + +const mergedRangeConfig = mergeConfig(datePickerRangeConfig, config); +export const DatePickerRange = component(mergedRangeConfig); diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Range/Range.config.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Range/Range.config.ts index 419dfcb7e7..bd69b3fd7e 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Range/Range.config.ts +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Range/Range.config.ts @@ -46,7 +46,7 @@ export const config = { ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.leftContentMargin}: 0 0.375rem 0 1rem; + ${tokens.leftContentMargin}: 0 0 0 1rem; ${tokens.rightContentMargin}: 0; ${tokens.labelOffset}: 0 0 0.75rem 0; @@ -92,7 +92,7 @@ export const config = { ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.leftContentMargin}: 0 0.375rem 0 0.875rem; + ${tokens.leftContentMargin}: 0 0 0 0.875rem; ${tokens.rightContentMargin}: 0; ${tokens.labelOffset}: 0 0 0.625rem 0; @@ -138,7 +138,7 @@ export const config = { ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.leftContentMargin}: 0 0.375rem 0 0.75rem; + ${tokens.leftContentMargin}: 0 0 0 0.75rem; ${tokens.rightContentMargin}: 0; ${tokens.labelOffset}: 0 0 0.5rem 0; @@ -184,7 +184,7 @@ export const config = { ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.leftContentMargin}: 0 0.25rem 0 0.5rem; + ${tokens.leftContentMargin}: 0 0 0 0.5rem; ${tokens.rightContentMargin}: 0; ${tokens.labelOffset}: 0 0 0.375rem 0; diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Calendar/Calendar.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_web/components/Calendar/Calendar.stories.tsx index 5bd7591258..544544de71 100644 --- a/packages/plasma-new-hope/src/examples/plasma_web/components/Calendar/Calendar.stories.tsx +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Calendar/Calendar.stories.tsx @@ -26,6 +26,12 @@ const meta: Meta = { type: 'date', }, }, + size: { + options: ['l', 'm', 's', 'xs'], + control: { + type: 'inline-radio', + }, + }, }, }; @@ -79,7 +85,7 @@ const baseEvents = [ ]; const StoryDefault = (args: CalendarProps) => { - const { isRange, isDouble, min, max, date, includeEdgeDates } = args; + const { isRange, isDouble, min, max, date, includeEdgeDates, size } = args; const [value, setValue] = useState(new Date(2023, 10, 16)); const [valueRange, setValueRange] = useState<[Date, Date?]>([new Date(2023, 10, 16), new Date(2023, 10, 23)]); @@ -102,6 +108,7 @@ const StoryDefault = (args: CalendarProps) => { return ( = { isDouble: false, isRange: false, includeEdgeDates: false, + size: 'm', }, render: (args) => , }; const StoryBase = (args: CalendarBaseProps) => { - const { min, max, type, includeEdgeDates } = args; + const { min, max, type, includeEdgeDates, size } = args; const [value, setValue] = useState(new Date(2023, 10, 16)); const handleOnChange = useCallback((newValue: Date) => { @@ -147,6 +155,7 @@ const StoryBase = (args: CalendarBaseProps) => { return ( = { }, }, args: { + size: 'm', min: new Date(2023, 10, 1), max: new Date(2023, 11, 24), includeEdgeDates: false, @@ -178,7 +188,7 @@ export const Base: StoryObj = { }; const StoryDouble = (args: CalendarDoubleProps) => { - const { min, max, includeEdgeDates } = args; + const { min, max, includeEdgeDates, size } = args; const [value, setValue] = useState(new Date(2023, 10, 16)); const handleOnChange = useCallback((newValue: Date) => { setValue(newValue); @@ -196,6 +206,7 @@ const StoryDouble = (args: CalendarDoubleProps) => { return ( { export const Double: StoryObj = { args: { + size: 'm', min: new Date(2023, 10, 1), max: new Date(2023, 11, 24), includeEdgeDates: false, @@ -217,7 +229,7 @@ export const Double: StoryObj = { }; const StoryRange = (args: CalendarBaseRangeProps) => { - const { min, max, type, includeEdgeDates } = args; + const { min, max, type, includeEdgeDates, size } = args; const [values, setValue] = useState<[Date, Date?]>([new Date(2023, 10, 15), new Date(2023, 10, 24)]); const handleOnChange = useCallback((newValue: [Date, Date?]) => { onChangeValue(newValue); @@ -238,6 +250,7 @@ const StoryRange = (args: CalendarBaseRangeProps) => { return ( = { }, }, args: { + size: 'm', min: new Date(2023, 10, 1), max: new Date(2023, 11, 24), includeEdgeDates: false, @@ -269,7 +283,7 @@ export const Range: StoryObj = { }; const StoryRangeDouble = (args: CalendarBaseRangeProps) => { - const { min, max, includeEdgeDates } = args; + const { min, max, includeEdgeDates, size } = args; const [values, setValue] = useState<[Date, Date?]>([new Date(2023, 10, 15), new Date(2023, 10, 24)]); const handleOnChange = useCallback((newValue: [Date, Date?]) => { onChangeValue(newValue); @@ -290,6 +304,7 @@ const StoryRangeDouble = (args: CalendarBaseRangeProps) => { return ( { export const RangeDouble: StoryObj = { args: { + size: 'm', min: new Date(2023, 10, 1), max: new Date(2023, 11, 24), includeEdgeDates: false, @@ -311,7 +327,7 @@ export const RangeDouble: StoryObj = { }; const StoryWithPopover = (args: CalendarProps) => { - const { isDouble, min, max, includeEdgeDates } = args; + const { isDouble, min, max, includeEdgeDates, size } = args; const [isOpen, setIsOpen] = useState(false); const [textValue, setTextValue] = useState('2023-10-16'); const [value, setValue] = useState(new Date(textValue)); @@ -345,6 +361,7 @@ const StoryWithPopover = (args: CalendarProps) => { closeOnOverlayClick > { export const WithPopover: StoryObj = { args: { + size: 'm', min: new Date(2023, 9, 1), max: new Date(2023, 11, 24), isDouble: false, diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Calendar/Calendar.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/Calendar/Calendar.ts index 149a1c5cd0..9a0804f8ff 100644 --- a/packages/plasma-new-hope/src/examples/plasma_web/components/Calendar/Calendar.ts +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Calendar/Calendar.ts @@ -1,3 +1,5 @@ +import type { FC } from 'react'; + import { component, mergeConfig } from '../../../../engines'; import { calendarBaseConfig, calendarDoubleConfig, withRange } from '../../../../components/Calendar'; import type { CalendarBaseProps, CalendarDoubleProps } from '../../../../components/Calendar'; @@ -15,8 +17,8 @@ export const CalendarBaseRange = withRange(CalendarBase); export const CalendarDoubleRange = withRange(CalendarDouble); export const Calendar = boundCalendar({ - base: CalendarBase, + base: CalendarBase as FC, baseRange: CalendarBaseRange, - double: CalendarDouble, + double: CalendarDouble as FC, doubleRange: CalendarDoubleRange, }); diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Calendar/CalendarBase.config.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/Calendar/CalendarBase.config.ts index dcdef433a6..26672eace6 100644 --- a/packages/plasma-new-hope/src/examples/plasma_web/components/Calendar/CalendarBase.config.ts +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Calendar/CalendarBase.config.ts @@ -10,28 +10,142 @@ export const config = { variations: { view: { default: css` - ${calendarBaseTokens.calendarBackgroundColor}: transparent; - ${calendarBaseTokens.calendarSelectedItemBackground}: var(--plasma-colors-primary); - ${calendarBaseTokens.calendarSelectedItemColor}: var(--plasma-colors-background-primary); - ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: var(--plasma-colors-surface-liquid02); - ${calendarBaseTokens.calendarCurrentItemBorderColor}: var(--plasma-colors-primary); + ${calendarBaseTokens.calendarSelectedItemBackground}: var(--surface-solid-default); + ${calendarBaseTokens.calendarSelectedItemColor}: var(--inverse-text-primary); + ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); + ${calendarBaseTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); ${calendarBaseTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarBaseTokens.calendarCurrentItemColorHover}: var(--plasma-colors-primary); - ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: var(--plasma-colors-surface-liquid02); - ${calendarBaseTokens.calendarActiveItemBackground}: var(--plasma-colors-primary); - ${calendarBaseTokens.calendarActiveItemColor}: var(--plasma-colors-surface-solid03); - ${calendarBaseTokens.calendarHoveredItemBackground}: var(--plasma-colors-accent); - ${calendarBaseTokens.calendarHoveredItemColor}: var(--plasma-colors-background-primary); - ${calendarBaseTokens.calendarRangeBackground}: var(--plasma-colors-surface-liquid02); - ${calendarBaseTokens.calendarOutlineFocusColor}: var(--plasma-colors-button-focused); - ${calendarBaseTokens.calendarContentPrimaryColor}: var(--plasma-colors-primary); - ${calendarBaseTokens.calendarContentSecondaryColor}: var(--plasma-colors-secondary); + ${calendarBaseTokens.calendarCurrentItemColorHover}: var(--text-primary); + ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); + ${calendarBaseTokens.calendarActiveItemBackground}: var(--surface-solid-default); + ${calendarBaseTokens.calendarActiveItemColor}: var(--inverse-text-primary); + ${calendarBaseTokens.calendarHoveredItemBackground}: var(--surface-accent); + ${calendarBaseTokens.calendarHoveredItemColor}: var(--text-primary); + ${calendarBaseTokens.calendarRangeBackground}: var(--surface-transparent-secondary); + ${calendarBaseTokens.calendarOutlineFocusColor}: var(--surface-accent); + ${calendarBaseTokens.calendarContentPrimaryColor}: var(--surface-solid-default); + ${calendarBaseTokens.calendarContentSecondaryColor}: var(--text-secondary); + ${calendarBaseTokens.calendarDayOfWeekColor}: var(--text-secondary); + + ${calendarBaseTokens.iconButtonColor}: var(--text-primary); + ${calendarBaseTokens.iconButtonBackgroundColor}: var(--surface-clear); + ${calendarBaseTokens.iconButtonColorHover}: var(--text-primary-hover); + ${calendarBaseTokens.iconButtonBackgroundColorHover}: var(--surface-clear); + ${calendarBaseTokens.iconButtonColorActive}: var(--text-primary-hover); + ${calendarBaseTokens.iconButtonBackgroundColorActive}: var(--surface-clear); + ${calendarBaseTokens.iconButtonFocusColor}: var(--surface-accent); `, }, size: { + l: css` + ${calendarBaseTokens.calendarWidth}: 24.5rem; + ${calendarBaseTokens.calendarHeight}: 25rem; + + ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.75rem; + ${calendarBaseTokens.calendarYearItemWidth}: 7.8125rem; + ${calendarBaseTokens.calendarYearItemHeight}: 5.25rem; + + ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); + ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); + ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); + ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); + ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.75rem; + ${calendarBaseTokens.calendarMonthItemWidth}: 7.8125rem; + ${calendarBaseTokens.calendarMonthItemHeight}: 5.25rem; + + ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); + ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); + ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0; + ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.75rem; + ${calendarBaseTokens.calendarDayItemWidth}: 3.5rem; + ${calendarBaseTokens.calendarDayItemHeight}: 3rem; + + ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); + ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); + ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); + ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); + ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${calendarBaseTokens.calendarHeaderArrowGap}: 0.5rem; + + ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 1rem; + ${calendarBaseTokens.calendarHeaderDateGap}: 0.5rem; + + ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); + ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); + ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); + ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); + ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); + ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + + ${calendarBaseTokens.iconButtonHeight}: 3.5rem; + ${calendarBaseTokens.iconButtonWidth}: 3.5rem; + ${calendarBaseTokens.iconButtonPadding}: 1.5rem; + ${calendarBaseTokens.iconButtonRadius}: 0.875rem; + `, m: css` - ${calendarBaseTokens.calendarHeaderArrowContainerWidth}: 5.5rem; - ${calendarBaseTokens.calendarItemBorderRadius}: 0.5rem; + ${calendarBaseTokens.calendarWidth}: 21rem; + ${calendarBaseTokens.calendarHeight}: 21rem; + + ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.625rem; + ${calendarBaseTokens.calendarYearItemWidth}: 6.688rem; + ${calendarBaseTokens.calendarYearItemHeight}: 4.375rem; + + ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); + ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); + ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); + ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.625rem; + ${calendarBaseTokens.calendarMonthItemWidth}: 6.688rem; + ${calendarBaseTokens.calendarMonthItemHeight}: 4.375rem; + + ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); + ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); + ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0; + ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.625rem; + ${calendarBaseTokens.calendarDayItemWidth}: 3rem; + ${calendarBaseTokens.calendarDayItemHeight}: 2.5rem; + + ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); + ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); + ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); + ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${calendarBaseTokens.calendarHeaderArrowGap}: 0.5rem; + + ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.75rem; + ${calendarBaseTokens.calendarHeaderDateGap}: 0.375rem; + ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); @@ -39,24 +153,133 @@ export const config = { ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + + ${calendarBaseTokens.iconButtonHeight}: 3rem; + ${calendarBaseTokens.iconButtonWidth}: 3rem; + ${calendarBaseTokens.iconButtonPadding}: 1.25rem; + ${calendarBaseTokens.iconButtonRadius}: 0.75rem; + `, + s: css` + ${calendarBaseTokens.calendarWidth}: 17.5rem; + ${calendarBaseTokens.calendarHeight}: 17rem; + + ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.5rem; + ${calendarBaseTokens.calendarYearItemWidth}: 5.5rem; + ${calendarBaseTokens.calendarYearItemHeight}: 3.5rem; + ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.5rem; + ${calendarBaseTokens.calendarMonthItemWidth}: 5.5rem; + ${calendarBaseTokens.calendarMonthItemHeight}: 3.5rem; + ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0; + ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem; + ${calendarBaseTokens.calendarDayItemWidth}: 2.5rem; + ${calendarBaseTokens.calendarDayItemHeight}: 2rem; + ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${calendarBaseTokens.calendarHeaderArrowGap}: 0.5rem; + + ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; + ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; + + ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); + ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); + ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); + ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); + ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); + ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + + ${calendarBaseTokens.iconButtonHeight}: 2.5rem; + ${calendarBaseTokens.iconButtonWidth}: 2.5rem; + ${calendarBaseTokens.iconButtonPadding}: 1rem; + ${calendarBaseTokens.iconButtonRadius}: 0.625rem; + `, + xs: css` + ${calendarBaseTokens.calendarWidth}: 17.5rem; + ${calendarBaseTokens.calendarHeight}: 15.5rem; + + ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; + ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.375rem; + ${calendarBaseTokens.calendarYearItemWidth}: 5.625rem; + ${calendarBaseTokens.calendarYearItemHeight}: 3.281rem; + + ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); + ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); + ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); + ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; + ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.375rem; + ${calendarBaseTokens.calendarMonthItemWidth}: 5.625rem; + ${calendarBaseTokens.calendarMonthItemHeight}: 3.281rem; + + ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); + ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); + ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; + ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem; + ${calendarBaseTokens.calendarDayItemWidth}: 2.5rem; + ${calendarBaseTokens.calendarDayItemHeight}: 1.875rem; + + ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); + ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); + ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); + ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${calendarBaseTokens.calendarHeaderArrowGap}: 0; + + ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; + ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; + + ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); + ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); + ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); + ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); + ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); + ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + + ${calendarBaseTokens.iconButtonHeight}: 2rem; + ${calendarBaseTokens.iconButtonWidth}: 2rem; + ${calendarBaseTokens.iconButtonPadding}: 0.75rem; + ${calendarBaseTokens.iconButtonRadius}: 0.5rem; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Calendar/CalendarDouble.config.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/Calendar/CalendarDouble.config.ts index 624c10c465..8c7b1ca7cb 100644 --- a/packages/plasma-new-hope/src/examples/plasma_web/components/Calendar/CalendarDouble.config.ts +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Calendar/CalendarDouble.config.ts @@ -10,28 +10,144 @@ export const config = { variations: { view: { default: css` + ${calendarDoubleTokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); ${calendarDoubleTokens.calendarBackgroundColor}: transparent; - ${calendarDoubleTokens.calendarSelectedItemBackground}: var(--plasma-colors-primary); - ${calendarDoubleTokens.calendarSelectedItemColor}: var(--plasma-colors-background-primary); - ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: var(--plasma-colors-surface-liquid02); - ${calendarDoubleTokens.calendarCurrentItemBorderColor}: var(--plasma-colors-primary); + ${calendarDoubleTokens.calendarSelectedItemBackground}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarSelectedItemColor}: var(--inverse-text-primary); + ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); + ${calendarDoubleTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); ${calendarDoubleTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarDoubleTokens.calendarCurrentItemColorHover}: var(--plasma-colors-primary); - ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: var(--plasma-colors-surface-liquid02); - ${calendarDoubleTokens.calendarActiveItemBackground}: var(--plasma-colors-primary); - ${calendarDoubleTokens.calendarActiveItemColor}: var(--plasma-colors-surface-solid03); - ${calendarDoubleTokens.calendarHoveredItemBackground}: var(--plasma-colors-accent); - ${calendarDoubleTokens.calendarHoveredItemColor}: var(--plasma-colors-background-primary); - ${calendarDoubleTokens.calendarSeparatorBackground}: var(--plasma-colors-surface-liquid02); - ${calendarDoubleTokens.calendarRangeBackground}: var(--plasma-colors-surface-liquid02); - ${calendarDoubleTokens.calendarOutlineFocusColor}: var(--plasma-colors-button-focused); - ${calendarDoubleTokens.calendarContentPrimaryColor}: var(--plasma-colors-primary); - ${calendarDoubleTokens.calendarContentSecondaryColor}: var(--plasma-colors-secondary); + ${calendarDoubleTokens.calendarCurrentItemColorHover}: var(--text-primary); + ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); + ${calendarDoubleTokens.calendarActiveItemBackground}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarActiveItemColor}: var(--inverse-text-primary); + ${calendarDoubleTokens.calendarHoveredItemBackground}: var(--surface-accent); + ${calendarDoubleTokens.calendarHoveredItemColor}: var(--text-primary); + ${calendarDoubleTokens.calendarRangeBackground}: var(--surface-transparent-secondary); + ${calendarDoubleTokens.calendarOutlineFocusColor}: var(--surface-accent); + ${calendarDoubleTokens.calendarContentPrimaryColor}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarContentSecondaryColor}: var(--text-secondary); + + ${calendarDoubleTokens.iconButtonColor}: var(--text-primary); + ${calendarDoubleTokens.iconButtonBackgroundColor}: var(--surface-clear); + ${calendarDoubleTokens.iconButtonColorHover}: var(--text-primary-hover); + ${calendarDoubleTokens.iconButtonBackgroundColorHover}: var(--surface-clear); + ${calendarDoubleTokens.iconButtonColorActive}: var(--text-primary-hover); + ${calendarDoubleTokens.iconButtonBackgroundColorActive}: var(--surface-clear); + ${calendarDoubleTokens.iconButtonFocusColor}: var(--surface-accent); `, }, size: { + l: css` + ${calendarDoubleTokens.calendarWidth}: 51.063rem; + ${calendarDoubleTokens.calendarHeight}: 25rem; + + ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.75rem; + ${calendarDoubleTokens.calendarYearItemWidth}: 7.8125rem; + ${calendarDoubleTokens.calendarYearItemHeight}: 5.25rem; + + ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); + ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); + ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.75rem; + ${calendarDoubleTokens.calendarMonthItemWidth}: 7.8125rem; + ${calendarDoubleTokens.calendarMonthItemHeight}: 5.25rem; + + ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); + ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); + ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.75rem; + ${calendarDoubleTokens.calendarDayItemWidth}: 3.5rem; + ${calendarDoubleTokens.calendarDayItemHeight}: 3rem; + + ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); + ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); + ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0.5rem; + + ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; + ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 1rem; + ${calendarDoubleTokens.calendarHeaderDateGap}: 0.5rem; + + ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); + ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); + ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); + ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + + ${calendarDoubleTokens.iconButtonHeight}: 3.5rem; + ${calendarDoubleTokens.iconButtonWidth}: 3.5rem; + ${calendarDoubleTokens.iconButtonPadding}: 1.5rem; + ${calendarDoubleTokens.iconButtonRadius}: 0.875rem; + `, m: css` - ${calendarDoubleTokens.calendarItemBorderRadius}: 0.5rem; + ${calendarDoubleTokens.calendarWidth}: 44.063rem; + ${calendarDoubleTokens.calendarHeight}: 21rem; + + ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.625rem; + ${calendarDoubleTokens.calendarYearItemWidth}: 6.688rem; + ${calendarDoubleTokens.calendarYearItemHeight}: 4.375rem; + + ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); + ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); + ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.625rem; + ${calendarDoubleTokens.calendarMonthItemWidth}: 6.688rem; + ${calendarDoubleTokens.calendarMonthItemHeight}: 4.375rem; + + ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); + ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); + ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; + ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.625rem; + ${calendarDoubleTokens.calendarDayItemWidth}: 3rem; + ${calendarDoubleTokens.calendarDayItemHeight}: 2.5rem; + + ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); + ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); + ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0.5rem; + + ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; + ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.75rem; + ${calendarDoubleTokens.calendarHeaderDateGap}: 0.375rem; + ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); @@ -39,24 +155,133 @@ export const config = { ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + + ${calendarDoubleTokens.iconButtonHeight}: 3rem; + ${calendarDoubleTokens.iconButtonWidth}: 3rem; + ${calendarDoubleTokens.iconButtonPadding}: 1.25rem; + ${calendarDoubleTokens.iconButtonRadius}: 0.75rem; + `, + s: css` + ${calendarDoubleTokens.calendarWidth}: 37.063rem; + ${calendarDoubleTokens.calendarHeight}: 17rem; + + ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.5rem; + ${calendarDoubleTokens.calendarYearItemWidth}: 5.5rem; + ${calendarDoubleTokens.calendarYearItemHeight}: 3.5rem; + ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.5rem; + ${calendarDoubleTokens.calendarMonthItemWidth}: 5.5rem; + ${calendarDoubleTokens.calendarMonthItemHeight}: 3.5rem; + ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.5rem; + ${calendarDoubleTokens.calendarDayItemWidth}: 2.5rem; + ${calendarDoubleTokens.calendarDayItemHeight}: 2rem; + ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0.5rem; + + ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; + ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; + ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; + + ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); + ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); + ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); + ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + + ${calendarDoubleTokens.iconButtonHeight}: 2.5rem; + ${calendarDoubleTokens.iconButtonWidth}: 2.5rem; + ${calendarDoubleTokens.iconButtonPadding}: 1rem; + ${calendarDoubleTokens.iconButtonRadius}: 0.625rem; + `, + xs: css` + ${calendarDoubleTokens.calendarWidth}: 37.063rem; + ${calendarDoubleTokens.calendarHeight}: 15.5rem; + + ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; + ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.375rem; + ${calendarDoubleTokens.calendarYearItemWidth}: 5.625rem; + ${calendarDoubleTokens.calendarYearItemHeight}: 3.281rem; + + ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); + ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); + ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; + ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.375rem; + ${calendarDoubleTokens.calendarMonthItemWidth}: 5.625rem; + ${calendarDoubleTokens.calendarMonthItemHeight}: 3.281rem; + + ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); + ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); + ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; + ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.375rem; + ${calendarDoubleTokens.calendarDayItemWidth}: 2.5rem; + ${calendarDoubleTokens.calendarDayItemHeight}: 1.875rem; + + ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); + ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); + ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0; + + ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; + ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; + + ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); + ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); + ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); + ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + + ${calendarDoubleTokens.iconButtonHeight}: 2rem; + ${calendarDoubleTokens.iconButtonWidth}: 2rem; + ${calendarDoubleTokens.iconButtonPadding}: 0.75rem; + ${calendarDoubleTokens.iconButtonRadius}: 0.5rem; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/DatePicker/DatePicker.config.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/DatePicker/DatePicker.config.ts new file mode 100644 index 0000000000..6c37996569 --- /dev/null +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/DatePicker/DatePicker.config.ts @@ -0,0 +1,530 @@ +import { css } from '@linaria/core'; + +import { datePickerTokens as tokens } from '../../../../components/DatePicker'; + +export const config = { + defaults: { + view: 'default', + size: 'm', + }, + variations: { + view: { + default: css` + ${tokens.background}: var(--surface-clear); + ${tokens.borderColor}: var(--surface-transparent-tertiary); + ${tokens.borderColorError}: var(--surface-negative); + ${tokens.borderColorSuccess}: var(--surface-positive); + ${tokens.borderColorHover}: var(--plasma-colors-secondary); + ${tokens.borderColorFocus}: var(--surface-accent); + + ${tokens.dividerColor}: var(--text-primary); + ${tokens.labelColor}: var(--text-primary); + ${tokens.leftHelperColor}: var(--text-secondary); + + ${tokens.textFieldColor}: var(--text-primary); + ${tokens.textFieldPlaceholderColor}: var(--text-secondary); + ${tokens.textFieldCaretColor}: var(--text-accent); + + ${tokens.textFieldBorderColorFocus}: var(--surface-accent); + ${tokens.textFieldBorderColorError}: var(--surface-negative); + ${tokens.textFieldBorderColorErrorFocus}: var(--surface-accent); + ${tokens.textFieldBorderColorSuccess}: var(--surface-positive); + ${tokens.textFieldBorderColorSuccessFocus}: var(--surface-accent); + + ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); + ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + + ${tokens.focusColor}: var(--text-accent); + + ${tokens.calendarShadow}: var(--shadow-down-soft-s); + ${tokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); + ${tokens.calendarBackgroundColor}: var(--surface-solid-card); + ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); + ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); + ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemBackgroundHover}: transparent; + ${tokens.calendarCurrentItemColorHover}: var(--text-primary); + ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); + ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); + ${tokens.calendarHoveredItemBackground}: var(--surface-accent); + ${tokens.calendarHoveredItemColor}: var(--text-primary); + ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); + ${tokens.calendarOutlineFocusColor}: var(--surface-accent); + ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); + ${tokens.calendarContentSecondaryColor}: var(--text-secondary); + + ${tokens.iconButtonColor}: var(--text-primary); + ${tokens.iconButtonBackgroundColor}: var(--surface-clear); + ${tokens.iconButtonColorHover}: var(--text-primary-hover); + ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); + ${tokens.iconButtonColorActive}: var(--text-primary-hover); + ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); + ${tokens.iconButtonFocusColor}: var(--surface-accent); + `, + }, + size: { + l: css` + ${tokens.width}: 26.5rem; + ${tokens.borderRadius}: 0.875rem; + ${tokens.borderWidth}: 0.0625rem; + + ${tokens.dividerPadding}: 0 0.375rem; + ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + + ${tokens.leftContentMargin}: 0 0 0 1rem; + ${tokens.rightContentMargin}: 0; + + ${tokens.labelOffset}: 0 0 0.75rem 0; + + ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + + ${tokens.textFieldHeight}: 3.5rem; + ${tokens.textFieldBorderRadius}: 0.875rem; + ${tokens.textFieldBorderWidth}: 0.0625rem; + ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + + ${tokens.leftHelperOffset}: 0.25rem 0 0 0; + ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; + ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; + ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; + ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; + + ${tokens.calendarBorderRadius}: 0.875rem; + ${tokens.calendarPaddingTop}: 0.875rem + ${tokens.calendarWidth}: 26.5rem; + + ${tokens.calendarYearsPadding}: 0.5rem 1rem 1.125rem 1rem; + ${tokens.calendarYearItemBorderRadius}: 0.75rem; + ${tokens.calendarYearItemWidth}: 7.8125rem; + ${tokens.calendarYearItemHeight}: 5.25rem; + + ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${tokens.calendarMonthsPadding}: 0.5rem 1rem 1.125rem 1rem; + ${tokens.calendarMonthItemBorderRadius}: 0.75rem; + ${tokens.calendarMonthItemWidth}: 7.8125rem; + ${tokens.calendarMonthItemHeight}: 5.25rem; + + ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${tokens.calendarDaysPadding}: 0.5rem 1rem 1.125rem 1rem; + ${tokens.calendarDayItemBorderRadius}: 0.75rem; + ${tokens.calendarDayItemWidth}: 3.5rem; + ${tokens.calendarDayItemHeight}: 3rem; + + ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${tokens.calendarHeaderWrapperPadding}: 0.875rem 1rem 0 1rem; + ${tokens.calendarHeaderArrowGap}: 0.5rem; + + ${tokens.calendarHeaderPadding}: 0 0 0 1rem; + ${tokens.calendarHeaderDateGap}: 0.5rem; + + ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); + ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); + ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); + ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); + ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); + ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); + ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + + ${tokens.iconButtonHeight}: 3.5rem; + ${tokens.iconButtonWidth}: 3.5rem; + ${tokens.iconButtonPadding}: 1.5rem; + ${tokens.iconButtonRadius}: 0.875rem; + `, + m: css` + ${tokens.width}: 23rem; + ${tokens.borderRadius}: 0.75rem; + ${tokens.borderWidth}: 0.0625rem; + + ${tokens.dividerPadding}: 0 0.375rem; + ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + + ${tokens.leftContentMargin}: 0 0 0 0.875rem; + ${tokens.rightContentMargin}: 0; + + ${tokens.labelOffset}: 0 0 0.625rem 0; + + ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + + ${tokens.textFieldHeight}: 3rem; + ${tokens.textFieldBorderRadius}: 0.75rem; + ${tokens.textFieldBorderWidth}: 0.0625rem; + ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + + ${tokens.leftHelperOffset}: 0.25rem 0 0 0; + ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; + ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; + ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; + ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; + + ${tokens.calendarWidth}: 23rem; + ${tokens.calendarBorderRadius}: 0.875rem; + + ${tokens.calendarYearsPadding}: 0.5rem 1rem 1.125rem 1rem; + ${tokens.calendarYearItemBorderRadius}: 0.625rem; + ${tokens.calendarYearItemWidth}: 6.688rem; + ${tokens.calendarYearItemHeight}: 4.375rem; + + ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${tokens.calendarMonthsPadding}: 0.5rem 1rem 1.125rem 1rem; + ${tokens.calendarMonthItemBorderRadius}: 0.625rem; + ${tokens.calendarMonthItemWidth}: 6.688rem; + ${tokens.calendarMonthItemHeight}: 4.375rem; + + ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${tokens.calendarDaysPadding}: 0.5rem 1rem 1.125rem 1rem; + ${tokens.calendarDayItemBorderRadius}: 0.625rem; + ${tokens.calendarDayItemWidth}: 3rem; + ${tokens.calendarDayItemHeight}: 2.5rem; + + ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${tokens.calendarHeaderWrapperPadding}: 0.75rem 1rem 0 1rem; + ${tokens.calendarHeaderArrowGap}: 0.5rem; + + ${tokens.calendarHeaderPadding}: 0 0 0 0.875rem; + ${tokens.calendarHeaderDateGap}: 0.375rem; + + ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); + ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); + ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); + ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); + ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); + ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); + ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + + ${tokens.iconButtonHeight}: 3rem; + ${tokens.iconButtonWidth}: 3rem; + ${tokens.iconButtonPadding}: 1.25rem; + ${tokens.iconButtonRadius}: 0.75rem; + `, + s: css` + ${tokens.width}: 19.5rem; + ${tokens.borderRadius}: 0.625rem; + ${tokens.borderWidth}: 0.0625rem; + + ${tokens.dividerPadding}: 0 0.375rem; + ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + + ${tokens.leftContentMargin}: 0 0.375rem 0 0.75rem; + ${tokens.rightContentMargin}: 0; + + ${tokens.labelOffset}: 0 0 0.5rem 0; + + ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + + ${tokens.textFieldHeight}: 2.5rem; + ${tokens.textFieldBorderRadius}: 0.625rem; + ${tokens.textFieldBorderWidth}: 0.0625rem; + ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + + ${tokens.leftHelperOffset}: 0.25rem 0 0 0; + ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; + ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; + ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; + ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; + + ${tokens.calendarWidth}: 19.5rem; + ${tokens.calendarBorderRadius}: 0.875rem; + + ${tokens.calendarYearsPadding}: 0.5rem 1rem 0.875rem 1rem; + ${tokens.calendarYearItemBorderRadius}: 0.5rem; + ${tokens.calendarYearItemWidth}: 5.5rem; + ${tokens.calendarYearItemHeight}: 3.5rem; + + ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${tokens.calendarMonthsPadding}: 0.5rem 1rem 0.875rem 1rem; + ${tokens.calendarMonthItemBorderRadius}: 0.5rem; + ${tokens.calendarMonthItemWidth}: 5.5rem; + ${tokens.calendarMonthItemHeight}: 3.5rem; + + ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${tokens.calendarDaysPadding}: 0.5rem 1rem 0.875rem 1rem; + ${tokens.calendarDayItemBorderRadius}: 0.5rem; + ${tokens.calendarDayItemWidth}: 2.5rem; + ${tokens.calendarDayItemHeight}: 2rem; + + ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${tokens.calendarHeaderWrapperPadding}: 0.75rem 1rem 0 1rem; + ${tokens.calendarHeaderArrowGap}: 0.5rem; + + ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; + ${tokens.calendarHeaderDateGap}: 0.25rem; + + ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); + ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); + ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); + ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); + ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); + ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); + ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + + ${tokens.iconButtonHeight}: 2rem; + ${tokens.iconButtonWidth}: 2rem; + ${tokens.iconButtonPadding}: 0.75rem; + ${tokens.iconButtonRadius}: 0.5rem; + `, + xs: css` + ${tokens.width}: 19rem; + ${tokens.borderRadius}: 0.5rem; + ${tokens.borderWidth}: 0.0625rem; + + ${tokens.dividerPadding}: 0 0.375rem; + ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.leftContentMargin}: 0 0 0 0.5rem; + ${tokens.rightContentMargin}: 0; + + ${tokens.labelOffset}: 0 0 0.375rem 0; + + ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.textFieldHeight}: 2rem; + ${tokens.textFieldBorderRadius}: 0.5rem; + ${tokens.textFieldBorderWidth}: 0.0625rem; + ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.leftHelperOffset}: 0.25rem 0 0 0; + ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; + ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; + ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; + ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; + + ${tokens.calendarWidth}: 19rem; + ${tokens.calendarBorderRadius}: 0.5rem; + ${tokens.calendarPaddingTop}: 0.5rem + + ${tokens.calendarYearsPadding}: 0.5rem 0.75rem 0.625rem 0.75rem; + ${tokens.calendarYearItemBorderRadius}: 0.375rem; + ${tokens.calendarYearItemWidth}: 5.625rem; + ${tokens.calendarYearItemHeight}: 3.281rem; + + ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${tokens.calendarMonthsPadding}: 0.5rem 0.75rem 0.625rem 0.75rem; + ${tokens.calendarMonthItemBorderRadius}: 0.375rem; + ${tokens.calendarMonthItemWidth}: 5.625rem; + ${tokens.calendarMonthItemHeight}: 3.281rem; + + ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${tokens.calendarDaysPadding}: 0.375rem 0.75rem 0.625rem 0.75rem; + ${tokens.calendarDayItemBorderRadius}: 0.375rem; + ${tokens.calendarDayItemWidth}: 2.5rem; + ${tokens.calendarDayItemHeight}: 2rem; + + ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${tokens.calendarHeaderWrapperPadding}: 0.5rem 0.75rem 0 0.75rem; + ${tokens.calendarHeaderArrowGap}: 0; + + ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; + ${tokens.calendarHeaderDateGap}: 0.25rem; + + ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); + ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); + ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); + ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); + ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); + ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); + ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + + ${tokens.iconButtonHeight}: 2rem; + ${tokens.iconButtonWidth}: 2rem; + ${tokens.iconButtonPadding}: 0.75rem; + ${tokens.iconButtonRadius}: 0.5rem; + `, + }, + disabled: { + true: css` + ${tokens.disabledOpacity}: 0.4; + `, + }, + readOnly: { + true: css` + ${tokens.backgroundReadOnly}: var(--surface-clear); + ${tokens.borderColorReadOnly}: var(--surface-transparent-tertiary); + ${tokens.labelColorReadOnly}: var(--text-secondary); + ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: var(--text-secondary); + + ${tokens.textFieldColorReadOnly}: var(--text-secondary); + ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-clear); + ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + `, + }, + }, +}; diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx new file mode 100644 index 0000000000..0628716e13 --- /dev/null +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/DatePicker/DatePicker.stories.tsx @@ -0,0 +1,257 @@ +import React, { ComponentProps, useRef, useState } from 'react'; +import type { StoryObj, Meta } from '@storybook/react'; +import { action } from '@storybook/addon-actions'; +import { IconPlaceholder } from '@salutejs/plasma-sb-utils'; + +import { WithTheme } from '../../../_helpers'; +import { IconButton } from '../IconButton/IconButton'; +import { RangeInputRefs } from '../../../../components/Range/Range.types'; + +import { DatePicker, DatePickerRange } from './DatePicker'; + +const onChangeValue = action('onChangeValue'); +const onBlur = action('onBlur'); +const onFocus = action('onFocus'); + +const onChangeFirstValue = action('onChangeFirstValue'); +const onChangeSecondValue = action('onChangeSecondValue'); + +const sizes = ['l', 'm', 's', 'xs']; +const views = ['default']; +const dividers = ['none', 'dash', 'icon']; + +const meta: Meta = { + title: 'plasma_web/DatePicker', + decorators: [WithTheme], + argTypes: { + view: { + options: views, + control: { + type: 'inline-radio', + }, + }, + size: { + options: sizes, + control: { + type: 'inline-radio', + }, + }, + min: { + control: { + type: 'date', + }, + }, + max: { + control: { + type: 'date', + }, + }, + }, +}; + +export default meta; + +type StoryPropsDefault = ComponentProps & { + enableContentLeft: boolean; + enableContentRight: boolean; +}; + +const StoryDefault = ({ + enableContentLeft, + enableContentRight, + valueError, + valueSuccess, + size, + ...rest +}: StoryPropsDefault) => { + const [isOpen, setIsOpen] = useState(false); + + const iconSize = size === 'xs' ? 'xs' : 's'; + + return ( + : undefined} + contentRight={enableContentRight ? : undefined} + onBlur={onBlur} + onFocus={onFocus} + onToggle={(is) => setIsOpen(is)} + onChangeValue={(e, currentValue) => { + onChangeValue(e, currentValue); + }} + onCommitDate={() => setIsOpen(false)} + {...rest} + /> + ); +}; + +export const Default: StoryObj = { + argTypes: { + defaultDate: { + control: { + type: 'date', + }, + }, + }, + args: { + label: 'Лейбл', + leftHelper: 'Подсказка к полю', + placeholder: '30.05.2024', + size: 'l', + view: 'default', + defaultDate: new Date(2024, 5, 14), + min: new Date(2024, 1, 1), + max: new Date(2024, 12, 29), + maskWithFormat: false, + disabled: false, + readOnly: false, + textBefore: '', + enableContentLeft: true, + enableContentRight: true, + valueError: false, + valueSuccess: false, + }, + render: (args) => , +}; + +type StoryPropsRange = ComponentProps & { + enableContentLeft: boolean; + enableContentRight: boolean; + enableFirstTextfieldContentLeft: boolean; + enableSecondTextfieldContentLeft: boolean; + enableFirstTextfieldContentRight: boolean; + enableSecondTextfieldContentRight: boolean; +}; + +const ActionButton = ({ size }) => { + const iconSize = size === 'xs' ? 'xs' : 's'; + return ( + + + + ); +}; + +const StoryRange = ({ + dividerVariant, + enableContentLeft, + enableContentRight, + firstTextfieldTextBefore, + secondTextfieldTextBefore, + enableFirstTextfieldContentLeft, + enableSecondTextfieldContentLeft, + enableFirstTextfieldContentRight, + enableSecondTextfieldContentRight, + firstValueError, + firstValueSuccess, + secondValueError, + secondValueSuccess, + size, + ...rest +}: StoryPropsRange) => { + const rangeRef = useRef(null); + + const [isOpen, setIsOpen] = useState(false); + const [firstDate, setFirstDate] = useState(''); + + const iconSize = size === 'xs' ? 'xs' : 's'; + const showDividerIcon = dividerVariant === 'icon'; + const showDefaultTextBefore = dividerVariant === 'none'; + + const dividerIconProps = { + dividerIcon: showDividerIcon ? : null, + dividerVariant, + }; + + return ( + : undefined} + contentRight={enableContentRight ? : undefined} + firstTextfieldContentLeft={ + enableFirstTextfieldContentLeft ? : undefined + } + firstTextfieldContentRight={ + enableFirstTextfieldContentRight ? : undefined + } + secondTextfieldContentLeft={ + enableSecondTextfieldContentLeft ? : undefined + } + secondTextfieldContentRight={ + enableSecondTextfieldContentRight ? : undefined + } + firstTextfieldTextBefore={ + showDefaultTextBefore ? firstTextfieldTextBefore || 'С' : firstTextfieldTextBefore + } + secondTextfieldTextBefore={ + showDefaultTextBefore ? secondTextfieldTextBefore || 'ПО' : secondTextfieldTextBefore + } + onToggle={(is) => setIsOpen(is)} + onChangeFirstValue={(e, currentValue) => { + onChangeFirstValue(e, currentValue); + }} + onChangeSecondValue={(e, currentValue) => { + onChangeSecondValue(e, currentValue); + }} + onCommitFirstDate={(currentValue) => { + setFirstDate(currentValue); + }} + onCommitSecondDate={(currentValue) => { + firstDate && currentValue && setIsOpen(false); + }} + {...dividerIconProps} + {...rest} + /> + ); +}; + +export const Range: StoryObj = { + argTypes: { + dividerVariant: { + options: dividers, + control: { + type: 'inline-radio', + }, + }, + }, + args: { + label: 'Лейбл', + leftHelper: 'Подсказка к полю', + firstPlaceholder: '30.05.2024', + secondPlaceholder: '04.06.2024', + firstTextfieldTextBefore: '', + secondTextfieldTextBefore: '', + firstTextfieldTextAfter: '', + secondTextfieldTextAfter: '', + size: 'l', + view: 'default', + isDoubleCalendar: false, + dividerVariant: 'dash', + min: new Date(2024, 1, 1), + max: new Date(2024, 12, 29), + maskWithFormat: false, + disabled: false, + readOnly: false, + enableContentLeft: true, + enableContentRight: true, + enableFirstTextfieldContentLeft: false, + enableFirstTextfieldContentRight: false, + enableSecondTextfieldContentLeft: false, + enableSecondTextfieldContentRight: false, + + firstValueError: false, + firstValueSuccess: false, + secondValueError: false, + secondValueSuccess: false, + }, + render: (args) => , +}; diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/DatePicker/DatePicker.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/DatePicker/DatePicker.ts new file mode 100644 index 0000000000..cd8ddb476c --- /dev/null +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/DatePicker/DatePicker.ts @@ -0,0 +1,10 @@ +import { component, mergeConfig } from '../../../../engines'; +import { datePickerConfig, datePickerRangeConfig } from '../../../../components/DatePicker'; + +import { config } from './DatePicker.config'; + +const mergedConfig = mergeConfig(datePickerConfig, config); +export const DatePicker = component(mergedConfig); + +const mergedRangeConfig = mergeConfig(datePickerRangeConfig, config); +export const DatePickerRange = component(mergedRangeConfig); diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Range/Range.config.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/Range/Range.config.ts index c8d17a98fe..9e0839c415 100644 --- a/packages/plasma-new-hope/src/examples/plasma_web/components/Range/Range.config.ts +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Range/Range.config.ts @@ -48,7 +48,7 @@ export const config = { ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.leftContentMargin}: 0 0.375rem 0 1rem; + ${tokens.leftContentMargin}: 0 0 0 1rem; ${tokens.rightContentMargin}: 0; ${tokens.labelOffset}: 0 0 0.75rem 0; @@ -96,7 +96,7 @@ export const config = { ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.leftContentMargin}: 0 0.375rem 0 0.875rem; + ${tokens.leftContentMargin}: 0 0 0 0.875rem; ${tokens.rightContentMargin}: 0; ${tokens.labelOffset}: 0 0 0.625rem 0; @@ -144,7 +144,7 @@ export const config = { ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.leftContentMargin}: 0 0.375rem 0 0.75rem; + ${tokens.leftContentMargin}: 0 0 0 0.75rem; ${tokens.rightContentMargin}: 0; ${tokens.labelOffset}: 0 0 0.5rem 0; @@ -192,7 +192,7 @@ export const config = { ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.leftContentMargin}: 0 0.25rem 0 0.5rem; + ${tokens.leftContentMargin}: 0 0 0 0.5rem; ${tokens.rightContentMargin}: 0; ${tokens.labelOffset}: 0 0 0.375rem 0; diff --git a/packages/plasma-new-hope/src/examples/sds_engineer/components/Calendar/Calendar.stories.tsx b/packages/plasma-new-hope/src/examples/sds_engineer/components/Calendar/Calendar.stories.tsx index 2434df2271..2ff5e71e83 100644 --- a/packages/plasma-new-hope/src/examples/sds_engineer/components/Calendar/Calendar.stories.tsx +++ b/packages/plasma-new-hope/src/examples/sds_engineer/components/Calendar/Calendar.stories.tsx @@ -26,6 +26,12 @@ const meta: Meta = { type: 'date', }, }, + size: { + options: ['l', 'm', 's', 'xs'], + control: { + type: 'inline-radio', + }, + }, }, }; @@ -79,7 +85,7 @@ const baseEvents = [ ]; const StoryDefault = (args: CalendarProps) => { - const { isRange, isDouble, min, max, date, includeEdgeDates } = args; + const { isRange, isDouble, min, max, date, includeEdgeDates, size } = args; const [value, setValue] = useState(new Date(2023, 10, 16)); const [valueRange, setValueRange] = useState<[Date, Date?]>([new Date(2023, 10, 16), new Date(2023, 10, 23)]); @@ -102,6 +108,7 @@ const StoryDefault = (args: CalendarProps) => { return ( = { isDouble: false, isRange: false, includeEdgeDates: false, + size: 'm', }, render: (args) => , }; const StoryBase = (args: CalendarBaseProps) => { - const { min, max, type, includeEdgeDates } = args; + const { min, max, type, includeEdgeDates, size } = args; const [value, setValue] = useState(new Date(2023, 10, 16)); const handleOnChange = useCallback((newValue: Date) => { @@ -147,6 +155,7 @@ const StoryBase = (args: CalendarBaseProps) => { return ( = { }, }, args: { + size: 'm', min: new Date(2023, 10, 1), max: new Date(2023, 11, 24), includeEdgeDates: false, @@ -178,7 +188,7 @@ export const Base: StoryObj = { }; const StoryDouble = (args: CalendarDoubleProps) => { - const { min, max, includeEdgeDates } = args; + const { min, max, includeEdgeDates, size } = args; const [value, setValue] = useState(new Date(2023, 10, 16)); const handleOnChange = useCallback((newValue: Date) => { setValue(newValue); @@ -196,6 +206,7 @@ const StoryDouble = (args: CalendarDoubleProps) => { return ( { export const Double: StoryObj = { args: { + size: 'm', min: new Date(2023, 10, 1), max: new Date(2023, 11, 24), includeEdgeDates: false, @@ -217,7 +229,7 @@ export const Double: StoryObj = { }; const StoryRange = (args: CalendarBaseRangeProps) => { - const { min, max, type, includeEdgeDates } = args; + const { min, max, type, includeEdgeDates, size } = args; const [values, setValue] = useState<[Date, Date?]>([new Date(2023, 10, 15), new Date(2023, 10, 24)]); const handleOnChange = useCallback((newValue: [Date, Date?]) => { onChangeValue(newValue); @@ -238,6 +250,7 @@ const StoryRange = (args: CalendarBaseRangeProps) => { return ( = { }, }, args: { + size: 'm', min: new Date(2023, 10, 1), max: new Date(2023, 11, 24), includeEdgeDates: false, @@ -269,7 +283,7 @@ export const Range: StoryObj = { }; const StoryRangeDouble = (args: CalendarBaseRangeProps) => { - const { min, max, includeEdgeDates } = args; + const { min, max, includeEdgeDates, size } = args; const [values, setValue] = useState<[Date, Date?]>([new Date(2023, 10, 15), new Date(2023, 10, 24)]); const handleOnChange = useCallback((newValue: [Date, Date?]) => { onChangeValue(newValue); @@ -290,6 +304,7 @@ const StoryRangeDouble = (args: CalendarBaseRangeProps) => { return ( { export const RangeDouble: StoryObj = { args: { + size: 'm', min: new Date(2023, 10, 1), max: new Date(2023, 11, 24), includeEdgeDates: false, @@ -311,7 +327,7 @@ export const RangeDouble: StoryObj = { }; const StoryWithPopover = (args: CalendarProps) => { - const { isDouble, min, max, includeEdgeDates } = args; + const { isDouble, min, max, includeEdgeDates, size } = args; const [isOpen, setIsOpen] = useState(false); const [textValue, setTextValue] = useState('2023-10-16'); const [value, setValue] = useState(new Date(textValue)); @@ -345,6 +361,7 @@ const StoryWithPopover = (args: CalendarProps) => { closeOnOverlayClick > { export const WithPopover: StoryObj = { args: { + size: 'm', min: new Date(2023, 9, 1), max: new Date(2023, 11, 24), isDouble: false, diff --git a/packages/plasma-new-hope/src/examples/sds_engineer/components/Calendar/Calendar.ts b/packages/plasma-new-hope/src/examples/sds_engineer/components/Calendar/Calendar.ts index 149a1c5cd0..9a0804f8ff 100644 --- a/packages/plasma-new-hope/src/examples/sds_engineer/components/Calendar/Calendar.ts +++ b/packages/plasma-new-hope/src/examples/sds_engineer/components/Calendar/Calendar.ts @@ -1,3 +1,5 @@ +import type { FC } from 'react'; + import { component, mergeConfig } from '../../../../engines'; import { calendarBaseConfig, calendarDoubleConfig, withRange } from '../../../../components/Calendar'; import type { CalendarBaseProps, CalendarDoubleProps } from '../../../../components/Calendar'; @@ -15,8 +17,8 @@ export const CalendarBaseRange = withRange(CalendarBase); export const CalendarDoubleRange = withRange(CalendarDouble); export const Calendar = boundCalendar({ - base: CalendarBase, + base: CalendarBase as FC, baseRange: CalendarBaseRange, - double: CalendarDouble, + double: CalendarDouble as FC, doubleRange: CalendarDoubleRange, }); diff --git a/packages/plasma-new-hope/src/examples/sds_engineer/components/Calendar/CalendarBase.config.ts b/packages/plasma-new-hope/src/examples/sds_engineer/components/Calendar/CalendarBase.config.ts index dcdef433a6..44be2018eb 100644 --- a/packages/plasma-new-hope/src/examples/sds_engineer/components/Calendar/CalendarBase.config.ts +++ b/packages/plasma-new-hope/src/examples/sds_engineer/components/Calendar/CalendarBase.config.ts @@ -10,28 +10,142 @@ export const config = { variations: { view: { default: css` - ${calendarBaseTokens.calendarBackgroundColor}: transparent; - ${calendarBaseTokens.calendarSelectedItemBackground}: var(--plasma-colors-primary); - ${calendarBaseTokens.calendarSelectedItemColor}: var(--plasma-colors-background-primary); - ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: var(--plasma-colors-surface-liquid02); - ${calendarBaseTokens.calendarCurrentItemBorderColor}: var(--plasma-colors-primary); + ${calendarBaseTokens.calendarSelectedItemBackground}: var(--surface-solid-default); + ${calendarBaseTokens.calendarSelectedItemColor}: var(--inverse-text-primary); + ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); + ${calendarBaseTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); ${calendarBaseTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarBaseTokens.calendarCurrentItemColorHover}: var(--plasma-colors-primary); - ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: var(--plasma-colors-surface-liquid02); - ${calendarBaseTokens.calendarActiveItemBackground}: var(--plasma-colors-primary); - ${calendarBaseTokens.calendarActiveItemColor}: var(--plasma-colors-surface-solid03); - ${calendarBaseTokens.calendarHoveredItemBackground}: var(--plasma-colors-accent); - ${calendarBaseTokens.calendarHoveredItemColor}: var(--plasma-colors-background-primary); - ${calendarBaseTokens.calendarRangeBackground}: var(--plasma-colors-surface-liquid02); - ${calendarBaseTokens.calendarOutlineFocusColor}: var(--plasma-colors-button-focused); - ${calendarBaseTokens.calendarContentPrimaryColor}: var(--plasma-colors-primary); - ${calendarBaseTokens.calendarContentSecondaryColor}: var(--plasma-colors-secondary); + ${calendarBaseTokens.calendarCurrentItemColorHover}: var(--text-primary); + ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); + ${calendarBaseTokens.calendarActiveItemBackground}: var(--surface-solid-default); + ${calendarBaseTokens.calendarActiveItemColor}: var(--inverse-text-primary); + ${calendarBaseTokens.calendarHoveredItemBackground}: var(--surface-accent); + ${calendarBaseTokens.calendarHoveredItemColor}: var(--text-primary); + ${calendarBaseTokens.calendarRangeBackground}: var(--surface-transparent-secondary); + ${calendarBaseTokens.calendarOutlineFocusColor}: var(--surface-accent); + ${calendarBaseTokens.calendarContentPrimaryColor}: var(--surface-solid-default); + ${calendarBaseTokens.calendarContentSecondaryColor}: var(--text-secondary); + ${calendarBaseTokens.calendarDayOfWeekColor}: var(--text-secondary); + + ${calendarBaseTokens.iconButtonColor}: var(--text-primary); + ${calendarBaseTokens.iconButtonBackgroundColor}: var(--surface-clear); + ${calendarBaseTokens.iconButtonColorHover}: var(--text-primary-hover); + ${calendarBaseTokens.iconButtonBackgroundColorHover}: var(--surface-clear); + ${calendarBaseTokens.iconButtonColorActive}: var(--text-primary-active); + ${calendarBaseTokens.iconButtonBackgroundColorActive}: var(--surface-clear); + ${calendarBaseTokens.iconButtonFocusColor}: var(--surface-accent); `, }, size: { + l: css` + ${calendarBaseTokens.calendarWidth}: 24.5rem; + ${calendarBaseTokens.calendarHeight}: 25rem; + + ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.75rem; + ${calendarBaseTokens.calendarYearItemWidth}: 7.8125rem; + ${calendarBaseTokens.calendarYearItemHeight}: 5.25rem; + + ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); + ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); + ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); + ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); + ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.75rem; + ${calendarBaseTokens.calendarMonthItemWidth}: 7.8125rem; + ${calendarBaseTokens.calendarMonthItemHeight}: 5.25rem; + + ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); + ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); + ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0; + ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.75rem; + ${calendarBaseTokens.calendarDayItemWidth}: 3.5rem; + ${calendarBaseTokens.calendarDayItemHeight}: 3rem; + + ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); + ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); + ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); + ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); + ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${calendarBaseTokens.calendarHeaderArrowGap}: 0.5rem; + + ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 1rem; + ${calendarBaseTokens.calendarHeaderDateGap}: 0.5rem; + + ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); + ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); + ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); + ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); + ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); + ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + + ${calendarBaseTokens.iconButtonHeight}: 3.5rem; + ${calendarBaseTokens.iconButtonWidth}: 3.5rem; + ${calendarBaseTokens.iconButtonPadding}: 1.5rem; + ${calendarBaseTokens.iconButtonRadius}: 0.875rem; + `, m: css` - ${calendarBaseTokens.calendarHeaderArrowContainerWidth}: 5.5rem; - ${calendarBaseTokens.calendarItemBorderRadius}: 0.5rem; + ${calendarBaseTokens.calendarWidth}: 21rem; + ${calendarBaseTokens.calendarHeight}: 21rem; + + ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.625rem; + ${calendarBaseTokens.calendarYearItemWidth}: 6.688rem; + ${calendarBaseTokens.calendarYearItemHeight}: 4.375rem; + + ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); + ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); + ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); + ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.625rem; + ${calendarBaseTokens.calendarMonthItemWidth}: 6.688rem; + ${calendarBaseTokens.calendarMonthItemHeight}: 4.375rem; + + ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); + ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); + ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0; + ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.625rem; + ${calendarBaseTokens.calendarDayItemWidth}: 3rem; + ${calendarBaseTokens.calendarDayItemHeight}: 2.5rem; + + ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); + ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); + ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); + ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${calendarBaseTokens.calendarHeaderArrowGap}: 0.5rem; + + ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.75rem; + ${calendarBaseTokens.calendarHeaderDateGap}: 0.375rem; + ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); @@ -39,24 +153,133 @@ export const config = { ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + + ${calendarBaseTokens.iconButtonHeight}: 3rem; + ${calendarBaseTokens.iconButtonWidth}: 3rem; + ${calendarBaseTokens.iconButtonPadding}: 1.25rem; + ${calendarBaseTokens.iconButtonRadius}: 0.75rem; + `, + s: css` + ${calendarBaseTokens.calendarWidth}: 17.5rem; + ${calendarBaseTokens.calendarHeight}: 17rem; + + ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.5rem; + ${calendarBaseTokens.calendarYearItemWidth}: 5.5rem; + ${calendarBaseTokens.calendarYearItemHeight}: 3.5rem; + ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.5rem; + ${calendarBaseTokens.calendarMonthItemWidth}: 5.5rem; + ${calendarBaseTokens.calendarMonthItemHeight}: 3.5rem; + ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0; + ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem; + ${calendarBaseTokens.calendarDayItemWidth}: 2.5rem; + ${calendarBaseTokens.calendarDayItemHeight}: 2rem; + ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${calendarBaseTokens.calendarHeaderArrowGap}: 0.5rem; + + ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; + ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; + + ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); + ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); + ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); + ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); + ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); + ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + + ${calendarBaseTokens.iconButtonHeight}: 2.5rem; + ${calendarBaseTokens.iconButtonWidth}: 2.5rem; + ${calendarBaseTokens.iconButtonPadding}: 1rem; + ${calendarBaseTokens.iconButtonRadius}: 0.625rem; + `, + xs: css` + ${calendarBaseTokens.calendarWidth}: 17.5rem; + ${calendarBaseTokens.calendarHeight}: 15.5rem; + + ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; + ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.375rem; + ${calendarBaseTokens.calendarYearItemWidth}: 5.625rem; + ${calendarBaseTokens.calendarYearItemHeight}: 3.281rem; + + ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); + ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); + ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); + ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; + ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.375rem; + ${calendarBaseTokens.calendarMonthItemWidth}: 5.625rem; + ${calendarBaseTokens.calendarMonthItemHeight}: 3.281rem; + + ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); + ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); + ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; + ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem; + ${calendarBaseTokens.calendarDayItemWidth}: 2.5rem; + ${calendarBaseTokens.calendarDayItemHeight}: 1.875rem; + + ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); + ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); + ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); + ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${calendarBaseTokens.calendarHeaderArrowGap}: 0; + + ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; + ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; + + ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); + ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); + ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); + ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); + ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); + ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + + ${calendarBaseTokens.iconButtonHeight}: 2rem; + ${calendarBaseTokens.iconButtonWidth}: 2rem; + ${calendarBaseTokens.iconButtonPadding}: 0.75rem; + ${calendarBaseTokens.iconButtonRadius}: 0.5rem; `, }, }, diff --git a/packages/plasma-new-hope/src/examples/sds_engineer/components/Calendar/CalendarDouble.config.ts b/packages/plasma-new-hope/src/examples/sds_engineer/components/Calendar/CalendarDouble.config.ts index 624c10c465..6a8a0a6f3a 100644 --- a/packages/plasma-new-hope/src/examples/sds_engineer/components/Calendar/CalendarDouble.config.ts +++ b/packages/plasma-new-hope/src/examples/sds_engineer/components/Calendar/CalendarDouble.config.ts @@ -10,28 +10,144 @@ export const config = { variations: { view: { default: css` + ${calendarDoubleTokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); ${calendarDoubleTokens.calendarBackgroundColor}: transparent; - ${calendarDoubleTokens.calendarSelectedItemBackground}: var(--plasma-colors-primary); - ${calendarDoubleTokens.calendarSelectedItemColor}: var(--plasma-colors-background-primary); - ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: var(--plasma-colors-surface-liquid02); - ${calendarDoubleTokens.calendarCurrentItemBorderColor}: var(--plasma-colors-primary); + ${calendarDoubleTokens.calendarSelectedItemBackground}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarSelectedItemColor}: var(--inverse-text-primary); + ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); + ${calendarDoubleTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); ${calendarDoubleTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarDoubleTokens.calendarCurrentItemColorHover}: var(--plasma-colors-primary); - ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: var(--plasma-colors-surface-liquid02); - ${calendarDoubleTokens.calendarActiveItemBackground}: var(--plasma-colors-primary); - ${calendarDoubleTokens.calendarActiveItemColor}: var(--plasma-colors-surface-solid03); - ${calendarDoubleTokens.calendarHoveredItemBackground}: var(--plasma-colors-accent); - ${calendarDoubleTokens.calendarHoveredItemColor}: var(--plasma-colors-background-primary); - ${calendarDoubleTokens.calendarSeparatorBackground}: var(--plasma-colors-surface-liquid02); - ${calendarDoubleTokens.calendarRangeBackground}: var(--plasma-colors-surface-liquid02); - ${calendarDoubleTokens.calendarOutlineFocusColor}: var(--plasma-colors-button-focused); - ${calendarDoubleTokens.calendarContentPrimaryColor}: var(--plasma-colors-primary); - ${calendarDoubleTokens.calendarContentSecondaryColor}: var(--plasma-colors-secondary); + ${calendarDoubleTokens.calendarCurrentItemColorHover}: var(--text-primary); + ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); + ${calendarDoubleTokens.calendarActiveItemBackground}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarActiveItemColor}: var(--inverse-text-primary); + ${calendarDoubleTokens.calendarHoveredItemBackground}: var(--surface-accent); + ${calendarDoubleTokens.calendarHoveredItemColor}: var(--text-primary); + ${calendarDoubleTokens.calendarRangeBackground}: var(--surface-transparent-secondary); + ${calendarDoubleTokens.calendarOutlineFocusColor}: var(--surface-accent); + ${calendarDoubleTokens.calendarContentPrimaryColor}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarContentSecondaryColor}: var(--text-secondary); + + ${calendarDoubleTokens.iconButtonColor}: var(--text-primary); + ${calendarDoubleTokens.iconButtonBackgroundColor}: var(--surface-clear); + ${calendarDoubleTokens.iconButtonColorHover}: var(--text-primary-hover); + ${calendarDoubleTokens.iconButtonBackgroundColorHover}: var(--surface-clear); + ${calendarDoubleTokens.iconButtonColorActive}: var(--text-primary-active); + ${calendarDoubleTokens.iconButtonBackgroundColorActive}: var(--surface-clear); + ${calendarDoubleTokens.iconButtonFocusColor}: var(--surface-accent); `, }, size: { + l: css` + ${calendarDoubleTokens.calendarWidth}: 51.063rem; + ${calendarDoubleTokens.calendarHeight}: 25rem; + + ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.75rem; + ${calendarDoubleTokens.calendarYearItemWidth}: 7.8125rem; + ${calendarDoubleTokens.calendarYearItemHeight}: 5.25rem; + + ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); + ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); + ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.75rem; + ${calendarDoubleTokens.calendarMonthItemWidth}: 7.8125rem; + ${calendarDoubleTokens.calendarMonthItemHeight}: 5.25rem; + + ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); + ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); + ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.75rem; + ${calendarDoubleTokens.calendarDayItemWidth}: 3.5rem; + ${calendarDoubleTokens.calendarDayItemHeight}: 3rem; + + ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); + ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); + ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0.5rem; + + ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; + ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 1rem; + ${calendarDoubleTokens.calendarHeaderDateGap}: 0.5rem; + + ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); + ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); + ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); + ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + + ${calendarDoubleTokens.iconButtonHeight}: 3.5rem; + ${calendarDoubleTokens.iconButtonWidth}: 3.5rem; + ${calendarDoubleTokens.iconButtonPadding}: 1.5rem; + ${calendarDoubleTokens.iconButtonRadius}: 0.875rem; + `, m: css` - ${calendarDoubleTokens.calendarItemBorderRadius}: 0.5rem; + ${calendarDoubleTokens.calendarWidth}: 44.063rem; + ${calendarDoubleTokens.calendarHeight}: 21rem; + + ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.625rem; + ${calendarDoubleTokens.calendarYearItemWidth}: 6.688rem; + ${calendarDoubleTokens.calendarYearItemHeight}: 4.375rem; + + ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); + ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); + ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.625rem; + ${calendarDoubleTokens.calendarMonthItemWidth}: 6.688rem; + ${calendarDoubleTokens.calendarMonthItemHeight}: 4.375rem; + + ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); + ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); + ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; + ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.625rem; + ${calendarDoubleTokens.calendarDayItemWidth}: 3rem; + ${calendarDoubleTokens.calendarDayItemHeight}: 2.5rem; + + ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); + ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); + ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0.5rem; + + ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; + ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.75rem; + ${calendarDoubleTokens.calendarHeaderDateGap}: 0.375rem; + ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); @@ -39,24 +155,133 @@ export const config = { ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + + ${calendarDoubleTokens.iconButtonHeight}: 3rem; + ${calendarDoubleTokens.iconButtonWidth}: 3rem; + ${calendarDoubleTokens.iconButtonPadding}: 1.25rem; + ${calendarDoubleTokens.iconButtonRadius}: 0.75rem; + `, + s: css` + ${calendarDoubleTokens.calendarWidth}: 37.063rem; + ${calendarDoubleTokens.calendarHeight}: 17rem; + + ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.5rem; + ${calendarDoubleTokens.calendarYearItemWidth}: 5.5rem; + ${calendarDoubleTokens.calendarYearItemHeight}: 3.5rem; + ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.5rem; + ${calendarDoubleTokens.calendarMonthItemWidth}: 5.5rem; + ${calendarDoubleTokens.calendarMonthItemHeight}: 3.5rem; + ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.5rem; + ${calendarDoubleTokens.calendarDayItemWidth}: 2.5rem; + ${calendarDoubleTokens.calendarDayItemHeight}: 2rem; + ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0.5rem; + + ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; + ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; + ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; + + ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); + ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); + ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); + ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + + ${calendarDoubleTokens.iconButtonHeight}: 2.5rem; + ${calendarDoubleTokens.iconButtonWidth}: 2.5rem; + ${calendarDoubleTokens.iconButtonPadding}: 1rem; + ${calendarDoubleTokens.iconButtonRadius}: 0.625rem; + `, + xs: css` + ${calendarDoubleTokens.calendarWidth}: 37.063rem; + ${calendarDoubleTokens.calendarHeight}: 15.5rem; + + ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; + ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.375rem; + ${calendarDoubleTokens.calendarYearItemWidth}: 5.625rem; + ${calendarDoubleTokens.calendarYearItemHeight}: 3.281rem; + + ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); + ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); + ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; + ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.375rem; + ${calendarDoubleTokens.calendarMonthItemWidth}: 5.625rem; + ${calendarDoubleTokens.calendarMonthItemHeight}: 3.281rem; + + ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); + ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); + ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; + ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.375rem; + ${calendarDoubleTokens.calendarDayItemWidth}: 2.5rem; + ${calendarDoubleTokens.calendarDayItemHeight}: 1.875rem; + + ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); + ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); + ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0; + + ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; + ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; + + ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); + ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); + ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); + ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + + ${calendarDoubleTokens.iconButtonHeight}: 2rem; + ${calendarDoubleTokens.iconButtonWidth}: 2rem; + ${calendarDoubleTokens.iconButtonPadding}: 0.75rem; + ${calendarDoubleTokens.iconButtonRadius}: 0.5rem; `, }, }, diff --git a/packages/plasma-new-hope/src/index.ts b/packages/plasma-new-hope/src/index.ts index f73c752b28..ad8869777d 100644 --- a/packages/plasma-new-hope/src/index.ts +++ b/packages/plasma-new-hope/src/index.ts @@ -50,3 +50,4 @@ export * from './components/Sheet'; export * from './components/Slider'; export * from './components/Range'; export * from './components/Accordion'; +export * from './components/DatePicker'; diff --git a/packages/plasma-new-hope/src/utils/datejs.ts b/packages/plasma-new-hope/src/utils/datejs.ts new file mode 100644 index 0000000000..ad70e58833 --- /dev/null +++ b/packages/plasma-new-hope/src/utils/datejs.ts @@ -0,0 +1,6 @@ +import dayjs from 'dayjs'; +import customParseFormat from 'dayjs/plugin/customParseFormat'; + +dayjs.extend(customParseFormat); + +export const customDayjs = dayjs; diff --git a/packages/plasma-new-hope/src/utils/getPopoverPlacement.ts b/packages/plasma-new-hope/src/utils/getPopoverPlacement.ts new file mode 100644 index 0000000000..588c3308e4 --- /dev/null +++ b/packages/plasma-new-hope/src/utils/getPopoverPlacement.ts @@ -0,0 +1,20 @@ +import { PopoverPlacementBasic } from '../components/Popover'; + +export type PlacementBasic = 'top' | 'bottom' | 'right' | 'left'; +export type Placement = PlacementBasic | 'auto'; + +export const getPlacement = (placement: Placement) => { + return `${placement}-start` as PopoverPlacementBasic; +}; + +export const getPlacements = (placements?: Placement | PlacementBasic[]) => { + if (!placements) { + return; + } + const isArray = Array.isArray(placements); + + if (!isArray) { + return getPlacement(placements as Placement); + } + return ((placements || []) as PlacementBasic[]).map((placement) => getPlacement(placement)); +}; diff --git a/packages/plasma-new-hope/src/utils/index.ts b/packages/plasma-new-hope/src/utils/index.ts index 6b9dfc2bfc..acac721b86 100644 --- a/packages/plasma-new-hope/src/utils/index.ts +++ b/packages/plasma-new-hope/src/utils/index.ts @@ -5,6 +5,7 @@ export { extractTextFrom } from './extractTextFrom'; export { getSizeValueFromProp } from './getSizeValueFromProp'; export { IS_REACT_18, safeUseId } from './react'; export { isNumber } from './isNumber'; +export * from './getPopoverPlacement'; export const cx = (...classes: (string | undefined)[]) => classes.filter((classItem) => classItem).join(' '); diff --git a/packages/plasma-web/api/plasma-web.api.md b/packages/plasma-web/api/plasma-web.api.md index 15f4d43cdd..d632a288a0 100644 --- a/packages/plasma-web/api/plasma-web.api.md +++ b/packages/plasma-web/api/plasma-web.api.md @@ -95,6 +95,18 @@ import { counterTokens } from '@salutejs/plasma-new-hope/styled-components'; import { CustomComboboxProps } from '@salutejs/plasma-new-hope/types/components/Combobox/Combobox.types'; import { CustomPopoverProps } from '@salutejs/plasma-new-hope/types/components/Popover/Popover.types'; import { CustomToastProps } from '@salutejs/plasma-new-hope/types/components/Toast/Toast.types'; +import { DatePickerCalendarProps } from '@salutejs/plasma-new-hope/types/components/DatePicker/SingleDate/SingleDate.types'; +import { DatePickerCalendarProps as DatePickerCalendarProps_2 } from '@salutejs/plasma-new-hope/types/components/DatePicker/RangeDate/RangeDate.types'; +import { datePickerClasses } from '@salutejs/plasma-new-hope/styled-components'; +import { DatePickerdVariationProps } from '@salutejs/plasma-new-hope/types/components/DatePicker/DatePickerBase.types'; +import { DatePickerPlacement } from '@salutejs/plasma-new-hope/styled-components'; +import { DatePickerPlacementBasic } from '@salutejs/plasma-new-hope/styled-components'; +import { DatePickerPopoverProps } from '@salutejs/plasma-new-hope/types/components/DatePicker/SingleDate/SingleDate.types'; +import { DatePickerProps } from '@salutejs/plasma-new-hope/styled-components'; +import { DatePickerRangePlacement } from '@salutejs/plasma-new-hope/styled-components'; +import { DatePickerRangeProps } from '@salutejs/plasma-new-hope/styled-components'; +import { DatePickerTextFieldProps } from '@salutejs/plasma-new-hope/types/components/DatePicker/SingleDate/SingleDate.types'; +import { datePickerTokens } from '@salutejs/plasma-new-hope/styled-components'; import { defaultValidate } from '@salutejs/plasma-hope'; import { DisabledProps } from '@salutejs/plasma-core'; import { DividerProps } from '@salutejs/plasma-new-hope/styled-components'; @@ -181,6 +193,7 @@ import { ProgressProps } from '@salutejs/plasma-new-hope/styled-components'; import { PropsType } from '@salutejs/plasma-new-hope/types/engines/types'; import { RadioGroup } from '@salutejs/plasma-new-hope/styled-components'; import { radiuses } from '@salutejs/plasma-core'; +import { RangeInputRefs } from '@salutejs/plasma-new-hope/styled-components'; import { RangeProps } from '@salutejs/plasma-new-hope/styled-components'; import { rangeTokens } from '@salutejs/plasma-new-hope/styled-components'; import { Ratio } from '@salutejs/plasma-new-hope/styled-components'; @@ -654,13 +667,17 @@ export const Calendar: FC; export const CalendarBase: FunctionComponent & HTMLAttributes & Calendar_2 & { +}> & Calendar_2 & { type?: "Days" | "Months" | "Years" | undefined; +size?: string | undefined; +view?: string | undefined; } & RefAttributes>; export { CalendarBaseProps } @@ -672,12 +689,17 @@ export const CalendarBaseRange: ({ value, disabledList, eventList, min, max, onC export const CalendarDouble: FunctionComponent & HTMLAttributes & Calendar_2 & RefAttributes>; +}> & HTMLAttributes & Calendar_2 & { +size?: string | undefined; +view?: string | undefined; +} & RefAttributes>; export { CalendarDoubleProps } @@ -965,6 +987,97 @@ export { CounterProps } export { counterTokens } +// @public (undocumented) +export const DatePicker: FunctionComponent & DatePickerdVariationProps & DatePickerTextFieldProps & DatePickerCalendarProps & DatePickerPopoverProps & Omit, "defaultValue"> & RefAttributes>; + +export { datePickerClasses } + +export { DatePickerPlacement } + +export { DatePickerPlacementBasic } + +export { DatePickerProps } + +// @public (undocumented) +export const DatePickerRange: FunctionComponent & DatePickerdVariationProps & { +defaultFirstDate?: Date | undefined; +defaultSecondDate?: Date | undefined; +onCommitFirstDate?: ((value: string | Date, error?: boolean | undefined, success?: boolean | undefined) => void) | undefined; +onCommitSecondDate?: ((value: string | Date, error?: boolean | undefined, success?: boolean | undefined) => void) | undefined; +} & { +label?: string | undefined; +view?: string | undefined; +disabled?: boolean | undefined; +readOnly?: boolean | undefined; +size?: string | undefined; +contentLeft?: ReactNode; +contentRight?: ReactNode; +leftHelper?: string | undefined; +dividerVariant?: "none" | "icon" | "dash" | undefined; +dividerIcon?: ReactNode; +firstValueError?: boolean | undefined; +secondValueError?: boolean | undefined; +firstValueSuccess?: boolean | undefined; +secondValueSuccess?: boolean | undefined; +firstPlaceholder?: string | undefined; +secondPlaceholder?: string | undefined; +firstTextfieldContentLeft?: ReactElement> | undefined; +firstTextfieldContentRight?: ReactElement> | undefined; +secondTextfieldContentLeft?: ReactElement> | undefined; +secondTextfieldContentRight?: ReactElement> | undefined; +firstTextfieldTextBefore?: string | undefined; +secondTextfieldTextBefore?: string | undefined; +firstTextfieldTextAfter?: string | undefined; +secondTextfieldTextAfter?: string | undefined; +onChangeFirstValue?: BaseCallbackChangeInstance | undefined; +onChangeSecondValue?: BaseCallbackChangeInstance | undefined; +onFocusFirstTextfield?: ((event: ChangeEvent) => void) | undefined; +onFocusSecondTextfield?: ((event: ChangeEvent) => void) | undefined; +onBlurFirstTextfield?: ((event: ChangeEvent) => void) | undefined; +onBlurSecondTextfield?: ((event: ChangeEvent) => void) | undefined; +} & DatePickerCalendarProps_2 & Omit & { +placement?: DatePickerRangePlacement | DatePickerRangePlacement[] | undefined; +isDoubleCalendar?: boolean | undefined; +} & HTMLAttributes & RefAttributes>; + +export { DatePickerRangePlacement } + +export { DatePickerRangeProps } + +export { datePickerTokens } + export { defaultValidate } export { DisabledProps } @@ -1673,7 +1786,7 @@ firstTextfieldTextBefore: string; secondTextfieldTextBefore: string; dividerVariant?: "none" | undefined; dividerIcon?: undefined; -} & HTMLAttributes & RefAttributes) | ({ +} & HTMLAttributes & RefAttributes) | ({ label?: string | undefined; leftHelper?: string | undefined; contentLeft?: ReactNode; @@ -1709,7 +1822,7 @@ dividerVariant?: "dash" | undefined; dividerIcon?: undefined; firstTextfieldTextBefore?: string | undefined; secondTextfieldTextBefore?: string | undefined; -} & HTMLAttributes & RefAttributes) | ({ +} & HTMLAttributes & RefAttributes) | ({ label?: string | undefined; leftHelper?: string | undefined; contentLeft?: ReactNode; @@ -1745,7 +1858,7 @@ dividerIcon?: ReactNode; dividerVariant?: "icon" | undefined; firstTextfieldTextBefore?: string | undefined; secondTextfieldTextBefore?: string | undefined; -} & HTMLAttributes & RefAttributes))>; +} & HTMLAttributes & RefAttributes))>; export { Range_2 as Range } export { RangeProps } diff --git a/packages/plasma-web/src/components/Calendar/Calendar.component-test.tsx b/packages/plasma-web/src/components/Calendar/Calendar.component-test.tsx index 0ceebe64c3..2aa0fd6b50 100644 --- a/packages/plasma-web/src/components/Calendar/Calendar.component-test.tsx +++ b/packages/plasma-web/src/components/Calendar/Calendar.component-test.tsx @@ -394,7 +394,10 @@ describe('plasma-web: Calendar keyboard navigation', () => { .should('have.attr', 'tabindex', '0') .should('have.attr', 'data-year', date.getFullYear() - 1); - cy.get('[id="id-grid-label"]').contains(`${getMonth()} ${date.getFullYear() - 1}`); + cy.get('[id="id-grid-label"] span').first().contains(`${getMonth()}`); + cy.get('[id="id-grid-label"] span') + .last() + .contains(`${date.getFullYear() - 1}`); cy.get('body').type('{shift}{pagedown}'.repeat(2)); cy.get('body') @@ -403,7 +406,10 @@ describe('plasma-web: Calendar keyboard navigation', () => { .should('have.attr', 'tabindex', '0') .should('have.attr', 'data-year', date.getFullYear() + 1); - cy.get('[id="id-grid-label"]').contains(`${getMonth()} ${date.getFullYear() + 1}`); + cy.get('[id="id-grid-label"] span').first().contains(`${getMonth()}`); + cy.get('[id="id-grid-label"] span') + .last() + .contains(`${date.getFullYear() + 1}`); }); it('navigate with arrow abroad bounds', () => { diff --git a/packages/plasma-web/src/components/Calendar/Calendar.tsx b/packages/plasma-web/src/components/Calendar/Calendar.tsx index 2b35827380..f034ca3263 100644 --- a/packages/plasma-web/src/components/Calendar/Calendar.tsx +++ b/packages/plasma-web/src/components/Calendar/Calendar.tsx @@ -7,6 +7,7 @@ import { mergeConfig, } from '@salutejs/plasma-new-hope/styled-components'; import type { CalendarBaseProps, CalendarDoubleProps } from '@salutejs/plasma-new-hope/styled-components'; +import type { FC } from 'react'; import { config as baseConfig } from './CalendarBase.config'; import { config as doubleConfig } from './CalendarDouble.config'; @@ -20,8 +21,8 @@ export const CalendarBaseRange = withRange(CalendarBase); export const CalendarDoubleRange = withRange(CalendarDouble); export const Calendar = boundCalendar({ - base: CalendarBase, + base: CalendarBase as FC, baseRange: CalendarBaseRange, - double: CalendarDouble, + double: CalendarDouble as FC, doubleRange: CalendarDoubleRange, }); diff --git a/packages/plasma-web/src/components/Calendar/CalendarBase.config.ts b/packages/plasma-web/src/components/Calendar/CalendarBase.config.ts index 3ad7eb625d..83cc1c49de 100644 --- a/packages/plasma-web/src/components/Calendar/CalendarBase.config.ts +++ b/packages/plasma-web/src/components/Calendar/CalendarBase.config.ts @@ -8,50 +8,142 @@ export const config = { variations: { view: { default: css` - ${calendarBaseTokens.calendarBackgroundColor}: transparent; - ${calendarBaseTokens.calendarSelectedItemBackground}: var(--plasma-colors-primary); - ${calendarBaseTokens.calendarSelectedItemColor}: var(--plasma-colors-background-primary); - ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: var(--plasma-colors-surface-liquid02); - ${calendarBaseTokens.calendarCurrentItemBorderColor}: var(--plasma-colors-primary); + ${calendarBaseTokens.calendarSelectedItemBackground}: var(--surface-solid-default); + ${calendarBaseTokens.calendarSelectedItemColor}: var(--inverse-text-primary); + ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); + ${calendarBaseTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); ${calendarBaseTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarBaseTokens.calendarCurrentItemColorHover}: var(--plasma-colors-primary); - ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: var(--plasma-colors-surface-liquid02); - ${calendarBaseTokens.calendarActiveItemBackground}: var(--plasma-colors-primary); - ${calendarBaseTokens.calendarActiveItemColor}: var(--plasma-colors-surface-solid03); - ${calendarBaseTokens.calendarHoveredItemBackground}: var(--plasma-colors-accent); - ${calendarBaseTokens.calendarHoveredItemColor}: var(--plasma-colors-background-primary); - ${calendarBaseTokens.calendarRangeBackground}: var(--plasma-colors-surface-liquid02); - ${calendarBaseTokens.calendarOutlineFocusColor}: var(--plasma-colors-button-focused); - ${calendarBaseTokens.calendarContentPrimaryColor}: var(--plasma-colors-primary); - ${calendarBaseTokens.calendarContentSecondaryColor}: var(--plasma-colors-secondary); - `, - /** - * @deprecated - * использовать `default` - */ - primary: css` - ${calendarBaseTokens.calendarBackgroundColor}: transparent; - ${calendarBaseTokens.calendarSelectedItemBackground}: var(--plasma-colors-primary); - ${calendarBaseTokens.calendarSelectedItemColor}: var(--plasma-colors-background-primary); - ${calendarBaseTokens.calendarSelectableItemBackgroundHover}: var(--plasma-colors-surface-liquid02); - ${calendarBaseTokens.calendarCurrentItemBorderColor}: var(--plasma-colors-primary); - ${calendarBaseTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarBaseTokens.calendarCurrentItemColorHover}: var(--plasma-colors-primary); - ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: var(--plasma-colors-surface-liquid02); - ${calendarBaseTokens.calendarActiveItemBackground}: var(--plasma-colors-primary); - ${calendarBaseTokens.calendarActiveItemColor}: var(--plasma-colors-surface-solid03); - ${calendarBaseTokens.calendarHoveredItemBackground}: var(--plasma-colors-accent); - ${calendarBaseTokens.calendarHoveredItemColor}: var(--plasma-colors-background-primary); - ${calendarBaseTokens.calendarRangeBackground}: var(--plasma-colors-surface-liquid02); - ${calendarBaseTokens.calendarOutlineFocusColor}: var(--plasma-colors-button-focused); - ${calendarBaseTokens.calendarContentPrimaryColor}: var(--plasma-colors-primary); - ${calendarBaseTokens.calendarContentSecondaryColor}: var(--plasma-colors-secondary); + ${calendarBaseTokens.calendarCurrentItemColorHover}: var(--text-primary); + ${calendarBaseTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); + ${calendarBaseTokens.calendarActiveItemBackground}: var(--surface-solid-default); + ${calendarBaseTokens.calendarActiveItemColor}: var(--inverse-text-primary); + ${calendarBaseTokens.calendarHoveredItemBackground}: var(--surface-accent); + ${calendarBaseTokens.calendarHoveredItemColor}: var(--text-primary); + ${calendarBaseTokens.calendarRangeBackground}: var(--surface-transparent-secondary); + ${calendarBaseTokens.calendarOutlineFocusColor}: var(--surface-accent); + ${calendarBaseTokens.calendarContentPrimaryColor}: var(--surface-solid-default); + ${calendarBaseTokens.calendarContentSecondaryColor}: var(--text-secondary); + ${calendarBaseTokens.calendarDayOfWeekColor}: var(--text-secondary); + + ${calendarBaseTokens.iconButtonColor}: var(--text-primary); + ${calendarBaseTokens.iconButtonBackgroundColor}: var(--surface-clear); + ${calendarBaseTokens.iconButtonColorHover}: var(--text-primary-hover); + ${calendarBaseTokens.iconButtonBackgroundColorHover}: var(--surface-clear); + ${calendarBaseTokens.iconButtonColorActive}: var(--text-primary-hover); + ${calendarBaseTokens.iconButtonBackgroundColorActive}: var(--surface-clear); + ${calendarBaseTokens.iconButtonFocusColor}: var(--surface-accent); `, }, size: { + l: css` + ${calendarBaseTokens.calendarWidth}: 24.5rem; + ${calendarBaseTokens.calendarHeight}: 25rem; + + ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.75rem; + ${calendarBaseTokens.calendarYearItemWidth}: 7.8125rem; + ${calendarBaseTokens.calendarYearItemHeight}: 5.25rem; + + ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); + ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); + ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); + ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); + ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.75rem; + ${calendarBaseTokens.calendarMonthItemWidth}: 7.8125rem; + ${calendarBaseTokens.calendarMonthItemHeight}: 5.25rem; + + ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); + ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); + ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0; + ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.75rem; + ${calendarBaseTokens.calendarDayItemWidth}: 3.5rem; + ${calendarBaseTokens.calendarDayItemHeight}: 3rem; + + ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); + ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); + ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); + ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); + ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${calendarBaseTokens.calendarHeaderArrowGap}: 0.5rem; + + ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 1rem; + ${calendarBaseTokens.calendarHeaderDateGap}: 0.5rem; + + ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); + ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); + ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); + ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); + ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); + ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + + ${calendarBaseTokens.iconButtonHeight}: 3.5rem; + ${calendarBaseTokens.iconButtonWidth}: 3.5rem; + ${calendarBaseTokens.iconButtonPadding}: 1.5rem; + ${calendarBaseTokens.iconButtonRadius}: 0.875rem; + `, m: css` - ${calendarBaseTokens.calendarHeaderArrowContainerWidth}: 5.5rem; - ${calendarBaseTokens.calendarItemBorderRadius}: 0.5rem; + ${calendarBaseTokens.calendarWidth}: 21rem; + ${calendarBaseTokens.calendarHeight}: 21rem; + + ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.625rem; + ${calendarBaseTokens.calendarYearItemWidth}: 6.688rem; + ${calendarBaseTokens.calendarYearItemHeight}: 4.375rem; + + ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); + ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); + ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); + ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.625rem; + ${calendarBaseTokens.calendarMonthItemWidth}: 6.688rem; + ${calendarBaseTokens.calendarMonthItemHeight}: 4.375rem; + + ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); + ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); + ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0; + ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.625rem; + ${calendarBaseTokens.calendarDayItemWidth}: 3rem; + ${calendarBaseTokens.calendarDayItemHeight}: 2.5rem; + + ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); + ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); + ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); + ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${calendarBaseTokens.calendarHeaderArrowGap}: 0.5rem; + + ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.75rem; + ${calendarBaseTokens.calendarHeaderDateGap}: 0.375rem; + ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); @@ -59,24 +151,133 @@ export const config = { ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + + ${calendarBaseTokens.iconButtonHeight}: 3rem; + ${calendarBaseTokens.iconButtonWidth}: 3rem; + ${calendarBaseTokens.iconButtonPadding}: 1.25rem; + ${calendarBaseTokens.iconButtonRadius}: 0.75rem; + `, + s: css` + ${calendarBaseTokens.calendarWidth}: 17.5rem; + ${calendarBaseTokens.calendarHeight}: 17rem; + + ${calendarBaseTokens.calendarYearsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.5rem; + ${calendarBaseTokens.calendarYearItemWidth}: 5.5rem; + ${calendarBaseTokens.calendarYearItemHeight}: 3.5rem; + ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${calendarBaseTokens.calendarMonthsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.5rem; + ${calendarBaseTokens.calendarMonthItemWidth}: 5.5rem; + ${calendarBaseTokens.calendarMonthItemHeight}: 3.5rem; + ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${calendarBaseTokens.calendarDaysPadding}: 0.5rem 0 0 0; + ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem; + ${calendarBaseTokens.calendarDayItemWidth}: 2.5rem; + ${calendarBaseTokens.calendarDayItemHeight}: 2rem; + ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${calendarBaseTokens.calendarHeaderArrowGap}: 0.5rem; + + ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; + ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; + + ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); + ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); + ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); + ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); + ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); + ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + + ${calendarBaseTokens.iconButtonHeight}: 2.5rem; + ${calendarBaseTokens.iconButtonWidth}: 2.5rem; + ${calendarBaseTokens.iconButtonPadding}: 1rem; + ${calendarBaseTokens.iconButtonRadius}: 0.625rem; + `, + xs: css` + ${calendarBaseTokens.calendarWidth}: 17.5rem; + ${calendarBaseTokens.calendarHeight}: 15.5rem; + + ${calendarBaseTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; + ${calendarBaseTokens.calendarYearItemBorderRadius}: 0.375rem; + ${calendarBaseTokens.calendarYearItemWidth}: 5.625rem; + ${calendarBaseTokens.calendarYearItemHeight}: 3.281rem; + + ${calendarBaseTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); + ${calendarBaseTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); + ${calendarBaseTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); + ${calendarBaseTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${calendarBaseTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${calendarBaseTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; + ${calendarBaseTokens.calendarMonthItemBorderRadius}: 0.375rem; + ${calendarBaseTokens.calendarMonthItemWidth}: 5.625rem; + ${calendarBaseTokens.calendarMonthItemHeight}: 3.281rem; + + ${calendarBaseTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); + ${calendarBaseTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); + ${calendarBaseTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); + ${calendarBaseTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${calendarBaseTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarBaseTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarBaseTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${calendarBaseTokens.calendarDaysPadding}: 0.375rem 0 0 0; + ${calendarBaseTokens.calendarDayItemBorderRadius}: 0.5rem; + ${calendarBaseTokens.calendarDayItemWidth}: 2.5rem; + ${calendarBaseTokens.calendarDayItemHeight}: 1.875rem; + + ${calendarBaseTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); + ${calendarBaseTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); + ${calendarBaseTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); + ${calendarBaseTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${calendarBaseTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarBaseTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarBaseTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${calendarBaseTokens.calendarHeaderArrowGap}: 0; + + ${calendarBaseTokens.calendarHeaderPadding}: 0 0 0 0.5rem; + ${calendarBaseTokens.calendarHeaderDateGap}: 0.25rem; + + ${calendarBaseTokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); + ${calendarBaseTokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); + ${calendarBaseTokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); + ${calendarBaseTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); + ${calendarBaseTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); + ${calendarBaseTokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); + ${calendarBaseTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + + ${calendarBaseTokens.iconButtonHeight}: 2rem; + ${calendarBaseTokens.iconButtonWidth}: 2rem; + ${calendarBaseTokens.iconButtonPadding}: 0.75rem; + ${calendarBaseTokens.iconButtonRadius}: 0.5rem; `, }, }, diff --git a/packages/plasma-web/src/components/Calendar/CalendarDouble.config.ts b/packages/plasma-web/src/components/Calendar/CalendarDouble.config.ts index 636fd2beaf..bd3cd59543 100644 --- a/packages/plasma-web/src/components/Calendar/CalendarDouble.config.ts +++ b/packages/plasma-web/src/components/Calendar/CalendarDouble.config.ts @@ -8,51 +8,144 @@ export const config = { variations: { view: { default: css` + ${calendarDoubleTokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); ${calendarDoubleTokens.calendarBackgroundColor}: transparent; - ${calendarDoubleTokens.calendarSelectedItemBackground}: var(--plasma-colors-primary); - ${calendarDoubleTokens.calendarSelectedItemColor}: var(--plasma-colors-background-primary); - ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: var(--plasma-colors-surface-liquid02); - ${calendarDoubleTokens.calendarCurrentItemBorderColor}: var(--plasma-colors-primary); + ${calendarDoubleTokens.calendarSelectedItemBackground}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarSelectedItemColor}: var(--inverse-text-primary); + ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); + ${calendarDoubleTokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); ${calendarDoubleTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarDoubleTokens.calendarCurrentItemColorHover}: var(--plasma-colors-primary); - ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: var(--plasma-colors-surface-liquid02); - ${calendarDoubleTokens.calendarActiveItemBackground}: var(--plasma-colors-primary); - ${calendarDoubleTokens.calendarActiveItemColor}: var(--plasma-colors-surface-solid03); - ${calendarDoubleTokens.calendarHoveredItemBackground}: var(--plasma-colors-accent); - ${calendarDoubleTokens.calendarHoveredItemColor}: var(--plasma-colors-background-primary); - ${calendarDoubleTokens.calendarSeparatorBackground}: var(--plasma-colors-surface-liquid02); - ${calendarDoubleTokens.calendarRangeBackground}: var(--plasma-colors-surface-liquid02); - ${calendarDoubleTokens.calendarOutlineFocusColor}: var(--plasma-colors-button-focused); - ${calendarDoubleTokens.calendarContentPrimaryColor}: var(--plasma-colors-primary); - ${calendarDoubleTokens.calendarContentSecondaryColor}: var(--plasma-colors-secondary); - `, - /** - * @deprecated - * использовать `default` - */ - primary: css` - ${calendarDoubleTokens.calendarBackgroundColor}: transparent; - ${calendarDoubleTokens.calendarSelectedItemBackground}: var(--plasma-colors-primary); - ${calendarDoubleTokens.calendarSelectedItemColor}: var(--plasma-colors-background-primary); - ${calendarDoubleTokens.calendarSelectableItemBackgroundHover}: var(--plasma-colors-surface-liquid02); - ${calendarDoubleTokens.calendarCurrentItemBorderColor}: var(--plasma-colors-primary); - ${calendarDoubleTokens.calendarCurrentItemBackgroundHover}: transparent; - ${calendarDoubleTokens.calendarCurrentItemColorHover}: var(--plasma-colors-primary); - ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: var(--plasma-colors-surface-liquid02); - ${calendarDoubleTokens.calendarActiveItemBackground}: var(--plasma-colors-primary); - ${calendarDoubleTokens.calendarActiveItemColor}: var(--plasma-colors-surface-solid03); - ${calendarDoubleTokens.calendarHoveredItemBackground}: var(--plasma-colors-accent); - ${calendarDoubleTokens.calendarHoveredItemColor}: var(--plasma-colors-background-primary); - ${calendarDoubleTokens.calendarSeparatorBackground}: var(--plasma-colors-surface-liquid02); - ${calendarDoubleTokens.calendarRangeBackground}: var(--plasma-colors-surface-liquid02); - ${calendarDoubleTokens.calendarOutlineFocusColor}: var(--plasma-colors-button-focused); - ${calendarDoubleTokens.calendarContentPrimaryColor}: var(--plasma-colors-primary); - ${calendarDoubleTokens.calendarContentSecondaryColor}: var(--plasma-colors-secondary); + ${calendarDoubleTokens.calendarCurrentItemColorHover}: var(--text-primary); + ${calendarDoubleTokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); + ${calendarDoubleTokens.calendarActiveItemBackground}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarActiveItemColor}: var(--inverse-text-primary); + ${calendarDoubleTokens.calendarHoveredItemBackground}: var(--surface-accent); + ${calendarDoubleTokens.calendarHoveredItemColor}: var(--text-primary); + ${calendarDoubleTokens.calendarRangeBackground}: var(--surface-transparent-secondary); + ${calendarDoubleTokens.calendarOutlineFocusColor}: var(--surface-accent); + ${calendarDoubleTokens.calendarContentPrimaryColor}: var(--surface-solid-default); + ${calendarDoubleTokens.calendarContentSecondaryColor}: var(--text-secondary); + + ${calendarDoubleTokens.iconButtonColor}: var(--text-primary); + ${calendarDoubleTokens.iconButtonBackgroundColor}: var(--surface-clear); + ${calendarDoubleTokens.iconButtonColorHover}: var(--text-primary-hover); + ${calendarDoubleTokens.iconButtonBackgroundColorHover}: var(--surface-clear); + ${calendarDoubleTokens.iconButtonColorActive}: var(--text-primary-hover); + ${calendarDoubleTokens.iconButtonBackgroundColorActive}: var(--surface-clear); + ${calendarDoubleTokens.iconButtonFocusColor}: var(--surface-accent); `, }, size: { + l: css` + ${calendarDoubleTokens.calendarWidth}: 51.063rem; + ${calendarDoubleTokens.calendarHeight}: 25rem; + + ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.75rem; + ${calendarDoubleTokens.calendarYearItemWidth}: 7.8125rem; + ${calendarDoubleTokens.calendarYearItemHeight}: 5.25rem; + + ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); + ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); + ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.75rem; + ${calendarDoubleTokens.calendarMonthItemWidth}: 7.8125rem; + ${calendarDoubleTokens.calendarMonthItemHeight}: 5.25rem; + + ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); + ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); + ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.75rem; + ${calendarDoubleTokens.calendarDayItemWidth}: 3.5rem; + ${calendarDoubleTokens.calendarDayItemHeight}: 3rem; + + ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); + ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); + ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0.5rem; + + ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; + ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 1rem; + ${calendarDoubleTokens.calendarHeaderDateGap}: 0.5rem; + + ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); + ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); + ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); + ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + + ${calendarDoubleTokens.iconButtonHeight}: 3.5rem; + ${calendarDoubleTokens.iconButtonWidth}: 3.5rem; + ${calendarDoubleTokens.iconButtonPadding}: 1.5rem; + ${calendarDoubleTokens.iconButtonRadius}: 0.875rem; + `, m: css` - ${calendarDoubleTokens.calendarItemBorderRadius}: 0.5rem; + ${calendarDoubleTokens.calendarWidth}: 44.063rem; + ${calendarDoubleTokens.calendarHeight}: 21rem; + + ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.625rem; + ${calendarDoubleTokens.calendarYearItemWidth}: 6.688rem; + ${calendarDoubleTokens.calendarYearItemHeight}: 4.375rem; + + ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); + ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); + ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.625rem; + ${calendarDoubleTokens.calendarMonthItemWidth}: 6.688rem; + ${calendarDoubleTokens.calendarMonthItemHeight}: 4.375rem; + + ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); + ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); + ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; + ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.625rem; + ${calendarDoubleTokens.calendarDayItemWidth}: 3rem; + ${calendarDoubleTokens.calendarDayItemHeight}: 2.5rem; + + ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); + ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); + ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0.5rem; + + ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; + ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.75rem; + ${calendarDoubleTokens.calendarHeaderDateGap}: 0.375rem; + ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); @@ -60,24 +153,133 @@ export const config = { ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + + ${calendarDoubleTokens.iconButtonHeight}: 3rem; + ${calendarDoubleTokens.iconButtonWidth}: 3rem; + ${calendarDoubleTokens.iconButtonPadding}: 1.25rem; + ${calendarDoubleTokens.iconButtonRadius}: 0.75rem; + `, + s: css` + ${calendarDoubleTokens.calendarWidth}: 37.063rem; + ${calendarDoubleTokens.calendarHeight}: 17rem; + + ${calendarDoubleTokens.calendarYearsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.5rem; + ${calendarDoubleTokens.calendarYearItemWidth}: 5.5rem; + ${calendarDoubleTokens.calendarYearItemHeight}: 3.5rem; + ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${calendarDoubleTokens.calendarMonthsPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.5rem; + ${calendarDoubleTokens.calendarMonthItemWidth}: 5.5rem; + ${calendarDoubleTokens.calendarMonthItemHeight}: 3.5rem; + ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.5rem; + ${calendarDoubleTokens.calendarDayItemWidth}: 2.5rem; + ${calendarDoubleTokens.calendarDayItemHeight}: 2rem; + ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0.5rem; + + ${calendarDoubleTokens.calendarDaysPadding}: 0.5rem 0 0 0; + ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; + ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; + + ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); + ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); + ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); + ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + + ${calendarDoubleTokens.iconButtonHeight}: 2.5rem; + ${calendarDoubleTokens.iconButtonWidth}: 2.5rem; + ${calendarDoubleTokens.iconButtonPadding}: 1rem; + ${calendarDoubleTokens.iconButtonRadius}: 0.625rem; + `, + xs: css` + ${calendarDoubleTokens.calendarWidth}: 37.063rem; + ${calendarDoubleTokens.calendarHeight}: 15.5rem; + + ${calendarDoubleTokens.calendarYearsPadding}: 0.375rem 0.25rem 0 0.25rem; + ${calendarDoubleTokens.calendarYearItemBorderRadius}: 0.375rem; + ${calendarDoubleTokens.calendarYearItemWidth}: 5.625rem; + ${calendarDoubleTokens.calendarYearItemHeight}: 3.281rem; + + ${calendarDoubleTokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); + ${calendarDoubleTokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); + ${calendarDoubleTokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); + ${calendarDoubleTokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${calendarDoubleTokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${calendarDoubleTokens.calendarMonthsPadding}: 0.375rem 0.25rem 0 0.25rem; + ${calendarDoubleTokens.calendarMonthItemBorderRadius}: 0.375rem; + ${calendarDoubleTokens.calendarMonthItemWidth}: 5.625rem; + ${calendarDoubleTokens.calendarMonthItemHeight}: 3.281rem; + + ${calendarDoubleTokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); + ${calendarDoubleTokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); + ${calendarDoubleTokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); + ${calendarDoubleTokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${calendarDoubleTokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarDoubleTokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarDoubleTokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${calendarDoubleTokens.calendarDaysPadding}: 0.375rem 0 0 0; + ${calendarDoubleTokens.calendarDayItemBorderRadius}: 0.375rem; + ${calendarDoubleTokens.calendarDayItemWidth}: 2.5rem; + ${calendarDoubleTokens.calendarDayItemHeight}: 1.875rem; + + ${calendarDoubleTokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); + ${calendarDoubleTokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); + ${calendarDoubleTokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); + ${calendarDoubleTokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${calendarDoubleTokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarDoubleTokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarDoubleTokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${calendarDoubleTokens.calendarHeaderArrowGap}: 0; + + ${calendarDoubleTokens.calendarHeaderPadding}: 0 0 0 0.5rem; + ${calendarDoubleTokens.calendarHeaderDateGap}: 0.25rem; + + ${calendarDoubleTokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); + ${calendarDoubleTokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); + ${calendarDoubleTokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); + ${calendarDoubleTokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); + ${calendarDoubleTokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); + ${calendarDoubleTokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); + ${calendarDoubleTokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + + ${calendarDoubleTokens.iconButtonHeight}: 2rem; + ${calendarDoubleTokens.iconButtonWidth}: 2rem; + ${calendarDoubleTokens.iconButtonPadding}: 0.75rem; + ${calendarDoubleTokens.iconButtonRadius}: 0.5rem; `, }, }, diff --git a/packages/plasma-web/src/components/DatePicker/DatePicker.component-test.tsx b/packages/plasma-web/src/components/DatePicker/DatePicker.component-test.tsx new file mode 100644 index 0000000000..2b26891638 --- /dev/null +++ b/packages/plasma-web/src/components/DatePicker/DatePicker.component-test.tsx @@ -0,0 +1,535 @@ +import React, { useState } from 'react'; +import type { ComponentProps, FC, PropsWithChildren } from 'react'; +import { createGlobalStyle } from 'styled-components'; +import { standard as standardTypo } from '@salutejs/plasma-typo'; +import { IconSber } from '@salutejs/plasma-icons'; +import { mount, CypressTestDecorator, getComponent, PadMe } from '@salutejs/plasma-cy-utils'; + +import { DatePicker as DatePickerB2C, DatePickerRange as DatePickerRangeB2C } from '.'; + +type DatePickerProps = ComponentProps & { + enableContentLeft?: boolean; + enableContentRight?: boolean; +}; + +type DatePickerRangeProps = ComponentProps & { + enableContentLeft?: boolean; + enableContentRight?: boolean; + enableFirstTextfieldContentLeft?: boolean; + enableSecondTextfieldContentLeft?: boolean; + enableFirstTextfieldContentRight?: boolean; + enableSecondTextfieldContentRight?: boolean; +}; + +const StandardTypoStyle = createGlobalStyle(standardTypo); + +describe('plasma-web: DatePicker', () => { + const DatePicker = getComponent('DatePicker') as typeof DatePickerB2C; + + const CypressTestDecoratorWithTypo: FC = ({ children }) => ( + + + {children} + + ); + + const Demo = ({ + enableContentLeft, + enableContentRight, + valueError, + valueSuccess, + size = 'xs', + onToggle, + ...rest + }: DatePickerProps) => { + const [isOpen, setIsOpen] = useState(false); + + const iconSize = size === 'xs' ? 'xs' : 's'; + + return ( + : undefined} + contentRight={enableContentRight ? : undefined} + onToggle={(is, e) => { + setIsOpen(is); + onToggle?.(is, e); + }} + onCommitDate={() => setIsOpen(false)} + {...rest} + /> + ); + }; + + it('default', () => { + mount( + + + + + , + ); + + cy.get('#demo input').realClick(); + cy.matchImageSnapshot({ + failureThreshold: 0.02, + failureThresholdType: 'percent', + }); + }); + + it('prop: size l', () => { + mount( + + + , + ); + + cy.get('input').realClick(); + cy.matchImageSnapshot(); + }); + + it('prop: size m', () => { + mount( + + + , + ); + + cy.get('input').realClick(); + cy.matchImageSnapshot(); + }); + + it('prop: size s', () => { + mount( + + + , + ); + + cy.get('input').realClick(); + cy.matchImageSnapshot(); + }); + + it('prop: size xs', () => { + mount( + + + , + ); + + cy.get('input').realClick(); + cy.matchImageSnapshot(); + }); + + it('prop: defaultDate, enableContentLeft, enableContentRight', () => { + mount( + + + , + ); + + cy.get('input').realClick(); + cy.matchImageSnapshot(); + }); + + it('prop: valueError, valueSuccess', () => { + mount( + + + + + , + ); + + cy.matchImageSnapshot(); + }); + + it('prop: label, leftHelper, placeholder', () => { + mount( + + + + + , + ); + + cy.get('#demo input').realClick(); + cy.matchImageSnapshot(); + }); + + it('prop: format', () => { + mount( + + + + + + + , + ); + + cy.matchImageSnapshot(); + }); + + it('prop: disabled, readOnly', () => { + mount( + + + + + , + ); + + cy.matchImageSnapshot(); + }); + + it('prop: placement', () => { + cy.viewport(500, 800); + + mount( + +
+ + + , + ); + + cy.get('input').realClick(); + cy.matchImageSnapshot(); + }); + + it('prop: onToggle, outside click', () => { + mount( + + outer text + { + expect(isOpen).to.be.oneOf([true, false]); + expect(event.type).to.eq('click'); + }} + /> + , + ); + + cy.get('input').click(); + cy.get('#outer').click(); + }); + + it('prop: input date', () => { + mount( + + + , + ); + + cy.get('input').click().type('14.06.2023'); + cy.get('.popover-root').should('be.visible'); + cy.realPress('Enter'); + + cy.matchImageSnapshot(); + }); + + it('prop: input masked date', () => { + mount( + + + , + ); + + cy.get('input').click().type('06'); + cy.get('.popover-root').should('be.visible'); + cy.get('input').should('have.value', '06/'); + cy.get('input').type('14'); + cy.get('input').should('have.value', '06/14/'); + cy.get('input').type('{backspace}'); + cy.get('input').should('have.value', '06/1'); + cy.get('input').type('42023'); + + cy.matchImageSnapshot(); + }); +}); + +describe('plasma-web: DatePickerRange', () => { + const DatePickerRange = getComponent('DatePickerRange') as typeof DatePickerRangeB2C; + const IconButton = getComponent('IconButton'); + + const CypressTestDecoratorWithTypo: FC = ({ children }) => ( + + + {children} + + ); + + const Demo = ({ + enableContentLeft, + enableContentRight, + enableFirstTextfieldContentLeft, + enableSecondTextfieldContentLeft, + enableFirstTextfieldContentRight, + enableSecondTextfieldContentRight, + size = 'xs', + onToggle, + ...rest + }: DatePickerRangeProps) => { + const [isOpen, setIsOpen] = useState(false); + + const iconSize = size === 'xs' ? 'xs' : 's'; + + const ActionButton = () => ( + + + + ); + + return ( + : undefined} + contentRight={enableContentRight ? : undefined} + firstTextfieldContentLeft={enableFirstTextfieldContentLeft ? : undefined} + firstTextfieldContentRight={enableFirstTextfieldContentRight ? : undefined} + secondTextfieldContentLeft={enableSecondTextfieldContentLeft ? : undefined} + secondTextfieldContentRight={ + enableSecondTextfieldContentRight ? : undefined + } + onToggle={(is, e) => { + setIsOpen(is); + onToggle?.(is, e); + }} + onCommitSecondDate={() => setIsOpen(false)} + {...rest} + /> + ); + }; + + it('default', () => { + mount( + + + + + , + ); + + cy.get('#demo input').first().realClick(); + cy.matchImageSnapshot({ + failureThreshold: 0.02, + failureThresholdType: 'percent', + }); + }); + + it('prop: size l', () => { + mount( + + + , + ); + + cy.get('input').first().realClick(); + cy.matchImageSnapshot(); + }); + + it('prop: size m', () => { + mount( + + + , + ); + + cy.get('input').first().realClick(); + cy.matchImageSnapshot(); + }); + + it('prop: size s', () => { + mount( + + + , + ); + + cy.get('input').first().realClick(); + cy.matchImageSnapshot(); + }); + + it('prop: size xs', () => { + mount( + + + , + ); + + cy.get('input').first().realClick(); + cy.matchImageSnapshot(); + }); + + it('prop: defaultDate, enableContent', () => { + mount( + + + , + ); + + cy.get('input').first().realClick(); + cy.matchImageSnapshot(); + }); + + it('prop: valueError, valueSuccess', () => { + mount( + + + + + + + , + ); + + cy.matchImageSnapshot(); + }); + + it('prop: label, leftHelper, placeholder', () => { + mount( + + + + + , + ); + + cy.get('#demo input').first().realClick(); + cy.matchImageSnapshot(); + }); + + it('prop: format', () => { + mount( + + + + + + + , + ); + + cy.matchImageSnapshot(); + }); + + it('prop: disabled, readOnly', () => { + mount( + + + + + , + ); + + cy.matchImageSnapshot(); + }); + + it('prop: placement', () => { + cy.viewport(500, 800); + + mount( + +
+ + + , + ); + + cy.get('input').first().realClick(); + cy.matchImageSnapshot({ + failureThreshold: 0.02, + failureThresholdType: 'percent', + }); + }); + + it('prop: onToggle, outside click', () => { + mount( + + outer text + { + expect(isOpen).to.be.oneOf([true, false]); + expect(event.type).to.eq('click'); + }} + /> + , + ); + + cy.get('input').first().click(); + cy.get('#outer').click(); + }); + + it('prop: input date', () => { + mount( + + + , + ); + + cy.get('input').first().click().type('14.06.2023'); + cy.realPress('Enter'); + cy.focused().type('17.06.2023'); + + cy.matchImageSnapshot(); + }); + + it('prop: input date, double calendar', () => { + cy.viewport(900, 800); + + mount( + + + , + ); + + cy.get('input').first().click().type('14.06.2023'); + cy.realPress('Enter'); + cy.focused().type('17.07.2023'); + + cy.matchImageSnapshot(); + }); +}); diff --git a/packages/plasma-web/src/components/DatePicker/DatePicker.config.ts b/packages/plasma-web/src/components/DatePicker/DatePicker.config.ts new file mode 100644 index 0000000000..eda631db2b --- /dev/null +++ b/packages/plasma-web/src/components/DatePicker/DatePicker.config.ts @@ -0,0 +1,528 @@ +import { datePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; + +export const config = { + defaults: { + view: 'default', + size: 'm', + }, + variations: { + view: { + default: css` + ${tokens.background}: var(--surface-clear); + ${tokens.borderColor}: var(--surface-transparent-tertiary); + ${tokens.borderColorError}: var(--surface-negative); + ${tokens.borderColorSuccess}: var(--surface-positive); + ${tokens.borderColorHover}: var(--plasma-colors-secondary); + ${tokens.borderColorFocus}: var(--surface-accent); + + ${tokens.dividerColor}: var(--text-primary); + ${tokens.labelColor}: var(--text-primary); + ${tokens.leftHelperColor}: var(--text-secondary); + + ${tokens.textFieldColor}: var(--text-primary); + ${tokens.textFieldPlaceholderColor}: var(--text-secondary); + ${tokens.textFieldCaretColor}: var(--text-accent); + + ${tokens.textFieldBorderColorFocus}: var(--surface-accent); + ${tokens.textFieldBorderColorError}: var(--surface-negative); + ${tokens.textFieldBorderColorErrorFocus}: var(--surface-accent); + ${tokens.textFieldBorderColorSuccess}: var(--surface-positive); + ${tokens.textFieldBorderColorSuccessFocus}: var(--surface-accent); + + ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); + ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + + ${tokens.focusColor}: var(--text-accent); + + ${tokens.calendarShadow}: var(--shadow-down-soft-s); + ${tokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); + ${tokens.calendarBackgroundColor}: var(--surface-solid-card); + ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); + ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); + ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemBackgroundHover}: transparent; + ${tokens.calendarCurrentItemColorHover}: var(--text-primary); + ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); + ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); + ${tokens.calendarHoveredItemBackground}: var(--surface-accent); + ${tokens.calendarHoveredItemColor}: var(--text-primary); + ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); + ${tokens.calendarOutlineFocusColor}: var(--surface-accent); + ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); + ${tokens.calendarContentSecondaryColor}: var(--text-secondary); + + ${tokens.iconButtonColor}: var(--text-primary); + ${tokens.iconButtonBackgroundColor}: var(--surface-clear); + ${tokens.iconButtonColorHover}: var(--text-primary-hover); + ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); + ${tokens.iconButtonColorActive}: var(--text-primary-hover); + ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); + ${tokens.iconButtonFocusColor}: var(--surface-accent); + `, + }, + size: { + l: css` + ${tokens.width}: 26.5rem; + ${tokens.borderRadius}: 0.875rem; + ${tokens.borderWidth}: 0.0625rem; + + ${tokens.dividerPadding}: 0 0.375rem; + ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + + ${tokens.leftContentMargin}: 0 0 0 1rem; + ${tokens.rightContentMargin}: 0; + + ${tokens.labelOffset}: 0 0 0.75rem 0; + + ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + + ${tokens.textFieldHeight}: 3.5rem; + ${tokens.textFieldBorderRadius}: 0.875rem; + ${tokens.textFieldBorderWidth}: 0.0625rem; + ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + + ${tokens.leftHelperOffset}: 0.25rem 0 0 0; + ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; + ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; + ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; + ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; + + ${tokens.calendarBorderRadius}: 0.875rem; + ${tokens.calendarPaddingTop}: 0.875rem + ${tokens.calendarWidth}: 26.5rem; + + ${tokens.calendarYearsPadding}: 0.5rem 1rem 1.125rem 1rem; + ${tokens.calendarYearItemBorderRadius}: 0.75rem; + ${tokens.calendarYearItemWidth}: 7.8125rem; + ${tokens.calendarYearItemHeight}: 5.25rem; + + ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${tokens.calendarMonthsPadding}: 0.5rem 1rem 1.125rem 1rem; + ${tokens.calendarMonthItemBorderRadius}: 0.75rem; + ${tokens.calendarMonthItemWidth}: 7.8125rem; + ${tokens.calendarMonthItemHeight}: 5.25rem; + + ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${tokens.calendarDaysPadding}: 0.5rem 1rem 1.125rem 1rem; + ${tokens.calendarDayItemBorderRadius}: 0.75rem; + ${tokens.calendarDayItemWidth}: 3.5rem; + ${tokens.calendarDayItemHeight}: 3rem; + + ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${tokens.calendarHeaderWrapperPadding}: 0.875rem 1rem 0 1rem; + ${tokens.calendarHeaderArrowGap}: 0.5rem; + + ${tokens.calendarHeaderPadding}: 0 0 0 1rem; + ${tokens.calendarHeaderDateGap}: 0.5rem; + + ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); + ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); + ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); + ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); + ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); + ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); + ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + + ${tokens.iconButtonHeight}: 3.5rem; + ${tokens.iconButtonWidth}: 3.5rem; + ${tokens.iconButtonPadding}: 1.5rem; + ${tokens.iconButtonRadius}: 0.875rem; + `, + m: css` + ${tokens.width}: 23rem; + ${tokens.borderRadius}: 0.75rem; + ${tokens.borderWidth}: 0.0625rem; + + ${tokens.dividerPadding}: 0 0.375rem; + ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + + ${tokens.leftContentMargin}: 0 0 0 0.875rem; + ${tokens.rightContentMargin}: 0; + + ${tokens.labelOffset}: 0 0 0.625rem 0; + + ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + + ${tokens.textFieldHeight}: 3rem; + ${tokens.textFieldBorderRadius}: 0.75rem; + ${tokens.textFieldBorderWidth}: 0.0625rem; + ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + + ${tokens.leftHelperOffset}: 0.25rem 0 0 0; + ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; + ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; + ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; + ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; + + ${tokens.calendarWidth}: 23rem; + ${tokens.calendarBorderRadius}: 0.875rem; + + ${tokens.calendarYearsPadding}: 0.5rem 1rem 1.125rem 1rem; + ${tokens.calendarYearItemBorderRadius}: 0.625rem; + ${tokens.calendarYearItemWidth}: 6.688rem; + ${tokens.calendarYearItemHeight}: 4.375rem; + + ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${tokens.calendarMonthsPadding}: 0.5rem 1rem 1.125rem 1rem; + ${tokens.calendarMonthItemBorderRadius}: 0.625rem; + ${tokens.calendarMonthItemWidth}: 6.688rem; + ${tokens.calendarMonthItemHeight}: 4.375rem; + + ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${tokens.calendarDaysPadding}: 0.5rem 1rem 1.125rem 1rem; + ${tokens.calendarDayItemBorderRadius}: 0.625rem; + ${tokens.calendarDayItemWidth}: 3rem; + ${tokens.calendarDayItemHeight}: 2.5rem; + + ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${tokens.calendarHeaderWrapperPadding}: 0.75rem 1rem 0 1rem; + ${tokens.calendarHeaderArrowGap}: 0.5rem; + + ${tokens.calendarHeaderPadding}: 0 0 0 0.875rem; + ${tokens.calendarHeaderDateGap}: 0.375rem; + + ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); + ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); + ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); + ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); + ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); + ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); + ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + + ${tokens.iconButtonHeight}: 3rem; + ${tokens.iconButtonWidth}: 3rem; + ${tokens.iconButtonPadding}: 1.25rem; + ${tokens.iconButtonRadius}: 0.75rem; + `, + s: css` + ${tokens.width}: 19.5rem; + ${tokens.borderRadius}: 0.625rem; + ${tokens.borderWidth}: 0.0625rem; + + ${tokens.dividerPadding}: 0 0.375rem; + ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + + ${tokens.leftContentMargin}: 0 0.375rem 0 0.75rem; + ${tokens.rightContentMargin}: 0; + + ${tokens.labelOffset}: 0 0 0.5rem 0; + + ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + + ${tokens.textFieldHeight}: 2.5rem; + ${tokens.textFieldBorderRadius}: 0.625rem; + ${tokens.textFieldBorderWidth}: 0.0625rem; + ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + + ${tokens.leftHelperOffset}: 0.25rem 0 0 0; + ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; + ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; + ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; + ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; + + ${tokens.calendarWidth}: 19.5rem; + ${tokens.calendarBorderRadius}: 0.875rem; + + ${tokens.calendarYearsPadding}: 0.5rem 1rem 0.875rem 1rem; + ${tokens.calendarYearItemBorderRadius}: 0.5rem; + ${tokens.calendarYearItemWidth}: 5.5rem; + ${tokens.calendarYearItemHeight}: 3.5rem; + + ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${tokens.calendarMonthsPadding}: 0.5rem 1rem 0.875rem 1rem; + ${tokens.calendarMonthItemBorderRadius}: 0.5rem; + ${tokens.calendarMonthItemWidth}: 5.5rem; + ${tokens.calendarMonthItemHeight}: 3.5rem; + + ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${tokens.calendarDaysPadding}: 0.5rem 1rem 0.875rem 1rem; + ${tokens.calendarDayItemBorderRadius}: 0.5rem; + ${tokens.calendarDayItemWidth}: 2.5rem; + ${tokens.calendarDayItemHeight}: 2rem; + + ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${tokens.calendarHeaderWrapperPadding}: 0.75rem 1rem 0 1rem; + ${tokens.calendarHeaderArrowGap}: 0.5rem; + + ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; + ${tokens.calendarHeaderDateGap}: 0.25rem; + + ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); + ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); + ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); + ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); + ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); + ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); + ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + + ${tokens.iconButtonHeight}: 2rem; + ${tokens.iconButtonWidth}: 2rem; + ${tokens.iconButtonPadding}: 0.75rem; + ${tokens.iconButtonRadius}: 0.5rem; + `, + xs: css` + ${tokens.width}: 19rem; + ${tokens.borderRadius}: 0.5rem; + ${tokens.borderWidth}: 0.0625rem; + + ${tokens.dividerPadding}: 0 0.375rem; + ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.leftContentMargin}: 0 0 0 0.5rem; + ${tokens.rightContentMargin}: 0; + + ${tokens.labelOffset}: 0 0 0.375rem 0; + + ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.textFieldHeight}: 2rem; + ${tokens.textFieldBorderRadius}: 0.5rem; + ${tokens.textFieldBorderWidth}: 0.0625rem; + ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.leftHelperOffset}: 0.25rem 0 0 0; + ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; + ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; + ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; + ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; + + ${tokens.calendarWidth}: 19rem; + ${tokens.calendarBorderRadius}: 0.5rem; + ${tokens.calendarPaddingTop}: 0.5rem + + ${tokens.calendarYearsPadding}: 0.5rem 0.75rem 0.625rem 0.75rem; + ${tokens.calendarYearItemBorderRadius}: 0.375rem; + ${tokens.calendarYearItemWidth}: 5.625rem; + ${tokens.calendarYearItemHeight}: 3.281rem; + + ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${tokens.calendarMonthsPadding}: 0.5rem 0.75rem 0.625rem 0.75rem; + ${tokens.calendarMonthItemBorderRadius}: 0.375rem; + ${tokens.calendarMonthItemWidth}: 5.625rem; + ${tokens.calendarMonthItemHeight}: 3.281rem; + + ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${tokens.calendarDaysPadding}: 0.375rem 0.75rem 0.625rem 0.75rem; + ${tokens.calendarDayItemBorderRadius}: 0.375rem; + ${tokens.calendarDayItemWidth}: 2.5rem; + ${tokens.calendarDayItemHeight}: 2rem; + + ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${tokens.calendarHeaderWrapperPadding}: 0.5rem 0.75rem 0 0.75rem; + ${tokens.calendarHeaderArrowGap}: 0; + + ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; + ${tokens.calendarHeaderDateGap}: 0.25rem; + + ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); + ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); + ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); + ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); + ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); + ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); + ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + + ${tokens.iconButtonHeight}: 2rem; + ${tokens.iconButtonWidth}: 2rem; + ${tokens.iconButtonPadding}: 0.75rem; + ${tokens.iconButtonRadius}: 0.5rem; + `, + }, + disabled: { + true: css` + ${tokens.disabledOpacity}: 0.4; + `, + }, + readOnly: { + true: css` + ${tokens.backgroundReadOnly}: var(--surface-clear); + ${tokens.borderColorReadOnly}: var(--surface-transparent-tertiary); + ${tokens.labelColorReadOnly}: var(--text-secondary); + ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: var(--text-secondary); + + ${tokens.textFieldColorReadOnly}: var(--text-secondary); + ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-clear); + ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + `, + }, + }, +}; diff --git a/packages/plasma-web/src/components/DatePicker/DatePicker.stories.tsx b/packages/plasma-web/src/components/DatePicker/DatePicker.stories.tsx new file mode 100644 index 0000000000..a4246bab5c --- /dev/null +++ b/packages/plasma-web/src/components/DatePicker/DatePicker.stories.tsx @@ -0,0 +1,255 @@ +import React, { ComponentProps, useRef, useState } from 'react'; +import type { StoryObj, Meta } from '@storybook/react'; +import { action } from '@storybook/addon-actions'; +import { IconPlaceholder, InSpacingDecorator } from '@salutejs/plasma-sb-utils'; + +import { IconButton } from '../IconButton/IconButton'; + +import { DatePicker, DatePickerRange } from './DatePicker'; + +const onChangeValue = action('onChangeValue'); +const onBlur = action('onBlur'); +const onFocus = action('onFocus'); + +const onChangeFirstValue = action('onChangeFirstValue'); +const onChangeSecondValue = action('onChangeSecondValue'); + +const sizes = ['l', 'm', 's', 'xs']; +const views = ['default']; +const dividers = ['none', 'dash', 'icon']; + +const meta: Meta = { + title: 'Controls/DatePicker', + decorators: [InSpacingDecorator], + argTypes: { + view: { + options: views, + control: { + type: 'inline-radio', + }, + }, + size: { + options: sizes, + control: { + type: 'inline-radio', + }, + }, + min: { + control: { + type: 'date', + }, + }, + max: { + control: { + type: 'date', + }, + }, + }, +}; + +export default meta; + +type StoryPropsDefault = ComponentProps & { + enableContentLeft: boolean; + enableContentRight: boolean; +}; + +const StoryDefault = ({ + enableContentLeft, + enableContentRight, + valueError, + valueSuccess, + size, + ...rest +}: StoryPropsDefault) => { + const [isOpen, setIsOpen] = useState(false); + + const iconSize = size === 'xs' ? 'xs' : 's'; + + return ( + : undefined} + contentRight={enableContentRight ? : undefined} + onBlur={onBlur} + onFocus={onFocus} + onToggle={(is) => setIsOpen(is)} + onChangeValue={(e, currentValue) => { + onChangeValue(e, currentValue); + }} + onCommitDate={() => setIsOpen(false)} + {...rest} + /> + ); +}; + +export const Default: StoryObj = { + argTypes: { + defaultDate: { + control: { + type: 'date', + }, + }, + }, + args: { + label: 'Лейбл', + leftHelper: 'Подсказка к полю', + placeholder: '30.05.2024', + size: 'l', + view: 'default', + defaultDate: new Date(2024, 5, 14), + min: new Date(2024, 1, 1), + max: new Date(2024, 12, 29), + maskWithFormat: false, + disabled: false, + readOnly: false, + textBefore: '', + enableContentLeft: true, + enableContentRight: true, + valueError: false, + valueSuccess: false, + }, + render: (args) => , +}; + +type StoryPropsRange = ComponentProps & { + enableContentLeft: boolean; + enableContentRight: boolean; + enableFirstTextfieldContentLeft: boolean; + enableSecondTextfieldContentLeft: boolean; + enableFirstTextfieldContentRight: boolean; + enableSecondTextfieldContentRight: boolean; +}; + +const ActionButton = ({ size }) => { + const iconSize = size === 'xs' ? 'xs' : 's'; + return ( + + + + ); +}; + +const StoryRange = ({ + dividerVariant, + enableContentLeft, + enableContentRight, + firstTextfieldTextBefore, + secondTextfieldTextBefore, + enableFirstTextfieldContentLeft, + enableSecondTextfieldContentLeft, + enableFirstTextfieldContentRight, + enableSecondTextfieldContentRight, + firstValueError, + firstValueSuccess, + secondValueError, + secondValueSuccess, + size, + ...rest +}: StoryPropsRange) => { + const rangeRef = useRef(null); + + const [isOpen, setIsOpen] = useState(false); + const [firstDate, setFirstDate] = useState(''); + + const iconSize = size === 'xs' ? 'xs' : 's'; + const showDividerIcon = dividerVariant === 'icon'; + const showDefaultTextBefore = dividerVariant === 'none'; + + const dividerIconProps = { + dividerIcon: showDividerIcon ? : null, + dividerVariant, + }; + + return ( + : undefined} + contentRight={enableContentRight ? : undefined} + firstTextfieldContentLeft={ + enableFirstTextfieldContentLeft ? : undefined + } + firstTextfieldContentRight={ + enableFirstTextfieldContentRight ? : undefined + } + secondTextfieldContentLeft={ + enableSecondTextfieldContentLeft ? : undefined + } + secondTextfieldContentRight={ + enableSecondTextfieldContentRight ? : undefined + } + firstTextfieldTextBefore={ + showDefaultTextBefore ? firstTextfieldTextBefore || 'С' : firstTextfieldTextBefore + } + secondTextfieldTextBefore={ + showDefaultTextBefore ? secondTextfieldTextBefore || 'ПО' : secondTextfieldTextBefore + } + onToggle={(is) => setIsOpen(is)} + onChangeFirstValue={(e, currentValue) => { + onChangeFirstValue(e, currentValue); + }} + onChangeSecondValue={(e, currentValue) => { + onChangeSecondValue(e, currentValue); + }} + onCommitFirstDate={(currentValue) => { + setFirstDate(currentValue); + }} + onCommitSecondDate={(currentValue) => { + firstDate && currentValue && setIsOpen(false); + }} + {...dividerIconProps} + {...rest} + /> + ); +}; + +export const Range: StoryObj = { + argTypes: { + dividerVariant: { + options: dividers, + control: { + type: 'inline-radio', + }, + }, + }, + args: { + label: 'Лейбл', + leftHelper: 'Подсказка к полю', + firstPlaceholder: '30.05.2024', + secondPlaceholder: '04.06.2024', + firstTextfieldTextBefore: '', + secondTextfieldTextBefore: '', + firstTextfieldTextAfter: '', + secondTextfieldTextAfter: '', + size: 'l', + view: 'default', + isDoubleCalendar: false, + dividerVariant: 'dash', + min: new Date(2024, 1, 1), + max: new Date(2024, 12, 29), + maskWithFormat: false, + disabled: false, + readOnly: false, + enableContentLeft: true, + enableContentRight: true, + enableFirstTextfieldContentLeft: false, + enableFirstTextfieldContentRight: false, + enableSecondTextfieldContentLeft: false, + enableSecondTextfieldContentRight: false, + + firstValueError: false, + firstValueSuccess: false, + secondValueError: false, + secondValueSuccess: false, + }, + render: (args) => , +}; diff --git a/packages/plasma-web/src/components/DatePicker/DatePicker.ts b/packages/plasma-web/src/components/DatePicker/DatePicker.ts new file mode 100644 index 0000000000..2c664ca314 --- /dev/null +++ b/packages/plasma-web/src/components/DatePicker/DatePicker.ts @@ -0,0 +1,14 @@ +import { + datePickerConfig, + datePickerRangeConfig, + component, + mergeConfig, +} from '@salutejs/plasma-new-hope/styled-components'; + +import { config } from './DatePicker.config'; + +const mergedConfig = mergeConfig(datePickerConfig, config); +export const DatePicker = component(mergedConfig); + +const mergedRangeConfig = mergeConfig(datePickerRangeConfig, config); +export const DatePickerRange = component(mergedRangeConfig); diff --git a/packages/plasma-web/src/components/DatePicker/index.ts b/packages/plasma-web/src/components/DatePicker/index.ts new file mode 100644 index 0000000000..0675665ef9 --- /dev/null +++ b/packages/plasma-web/src/components/DatePicker/index.ts @@ -0,0 +1,10 @@ +export type { + DatePickerProps, + DatePickerPlacementBasic, + DatePickerPlacement, + DatePickerRangeProps, + DatePickerRangePlacement, +} from '@salutejs/plasma-new-hope/styled-components'; + +export { DatePicker, DatePickerRange } from './DatePicker'; +export { datePickerClasses, datePickerTokens } from '@salutejs/plasma-new-hope/styled-components'; diff --git a/packages/plasma-web/src/components/Range/Range.config.ts b/packages/plasma-web/src/components/Range/Range.config.ts index 006ec54dc0..2e51bec301 100644 --- a/packages/plasma-web/src/components/Range/Range.config.ts +++ b/packages/plasma-web/src/components/Range/Range.config.ts @@ -46,7 +46,7 @@ export const config = { ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); - ${tokens.leftContentMargin}: 0 0.375rem 0 1rem; + ${tokens.leftContentMargin}: 0 0 0 1rem; ${tokens.rightContentMargin}: 0; ${tokens.labelOffset}: 0 0 0.75rem 0; @@ -94,7 +94,7 @@ export const config = { ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); - ${tokens.leftContentMargin}: 0 0.375rem 0 0.875rem; + ${tokens.leftContentMargin}: 0 0 0 0.875rem; ${tokens.rightContentMargin}: 0; ${tokens.labelOffset}: 0 0 0.625rem 0; @@ -142,7 +142,7 @@ export const config = { ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); - ${tokens.leftContentMargin}: 0 0.375rem 0 0.75rem; + ${tokens.leftContentMargin}: 0 0 0 0.75rem; ${tokens.rightContentMargin}: 0; ${tokens.labelOffset}: 0 0 0.5rem 0; @@ -190,7 +190,7 @@ export const config = { ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); - ${tokens.leftContentMargin}: 0 0.25rem 0 0.5rem; + ${tokens.leftContentMargin}: 0 0 0 0.5rem; ${tokens.rightContentMargin}: 0; ${tokens.labelOffset}: 0 0 0.375rem 0; diff --git a/packages/plasma-web/src/index.ts b/packages/plasma-web/src/index.ts index 9c5c89266d..9bd0dccf36 100644 --- a/packages/plasma-web/src/index.ts +++ b/packages/plasma-web/src/index.ts @@ -62,3 +62,4 @@ export * from './components/AvatarGroup'; export * from './components/Indicator'; export * from './components/ButtonBase'; export * from './components/Toolbar'; +export * from './components/DatePicker'; diff --git a/packages/sdds-serv/api/sdds-serv.api.md b/packages/sdds-serv/api/sdds-serv.api.md index c641911976..ef010c419e 100644 --- a/packages/sdds-serv/api/sdds-serv.api.md +++ b/packages/sdds-serv/api/sdds-serv.api.md @@ -50,6 +50,18 @@ import { CounterProps } from '@salutejs/plasma-new-hope/styled-components'; import { counterTokens } from '@salutejs/plasma-new-hope/styled-components'; import { CustomPopoverProps } from '@salutejs/plasma-new-hope/types/components/Popover/Popover.types'; import { CustomToastProps } from '@salutejs/plasma-new-hope/types/components/Toast/Toast.types'; +import { DatePickerCalendarProps } from '@salutejs/plasma-new-hope/types/components/DatePicker/SingleDate/SingleDate.types'; +import { DatePickerCalendarProps as DatePickerCalendarProps_2 } from '@salutejs/plasma-new-hope/types/components/DatePicker/RangeDate/RangeDate.types'; +import { datePickerClasses } from '@salutejs/plasma-new-hope/styled-components'; +import { DatePickerdVariationProps } from '@salutejs/plasma-new-hope/types/components/DatePicker/DatePickerBase.types'; +import { DatePickerPlacement } from '@salutejs/plasma-new-hope/styled-components'; +import { DatePickerPlacementBasic } from '@salutejs/plasma-new-hope/styled-components'; +import { DatePickerPopoverProps } from '@salutejs/plasma-new-hope/types/components/DatePicker/SingleDate/SingleDate.types'; +import { DatePickerProps } from '@salutejs/plasma-new-hope/styled-components'; +import { DatePickerRangePlacement } from '@salutejs/plasma-new-hope/styled-components'; +import { DatePickerRangeProps } from '@salutejs/plasma-new-hope/styled-components'; +import { DatePickerTextFieldProps } from '@salutejs/plasma-new-hope/types/components/DatePicker/SingleDate/SingleDate.types'; +import { datePickerTokens } from '@salutejs/plasma-new-hope/styled-components'; import { DividerProps } from '@salutejs/plasma-new-hope/styled-components'; import { dividerTokens } from '@salutejs/plasma-new-hope/styled-components'; import { DoubleSliderProps } from '@salutejs/plasma-new-hope/styled-components'; @@ -106,6 +118,7 @@ import { PopupProvider } from '@salutejs/plasma-new-hope/styled-components'; import { ProgressProps } from '@salutejs/plasma-new-hope/styled-components'; import { PropsType } from '@salutejs/plasma-new-hope/types/engines/types'; import { RadioGroup } from '@salutejs/plasma-new-hope/styled-components'; +import { RangeInputRefs } from '@salutejs/plasma-new-hope/styled-components'; import { RangeProps } from '@salutejs/plasma-new-hope/styled-components'; import { rangeTokens } from '@salutejs/plasma-new-hope/styled-components'; import { Ratio } from '@salutejs/plasma-new-hope/styled-components'; @@ -636,6 +649,97 @@ export { CounterProps } export { counterTokens } +// @public (undocumented) +export const DatePicker: FunctionComponent & DatePickerdVariationProps & DatePickerTextFieldProps & DatePickerCalendarProps & DatePickerPopoverProps & Omit, "defaultValue"> & RefAttributes>; + +export { datePickerClasses } + +export { DatePickerPlacement } + +export { DatePickerPlacementBasic } + +export { DatePickerProps } + +// @public (undocumented) +export const DatePickerRange: FunctionComponent & DatePickerdVariationProps & { +defaultFirstDate?: Date | undefined; +defaultSecondDate?: Date | undefined; +onCommitFirstDate?: ((value: string | Date, error?: boolean | undefined, success?: boolean | undefined) => void) | undefined; +onCommitSecondDate?: ((value: string | Date, error?: boolean | undefined, success?: boolean | undefined) => void) | undefined; +} & { +label?: string | undefined; +view?: string | undefined; +disabled?: boolean | undefined; +readOnly?: boolean | undefined; +size?: string | undefined; +contentLeft?: ReactNode; +contentRight?: ReactNode; +leftHelper?: string | undefined; +dividerVariant?: "none" | "dash" | "icon" | undefined; +dividerIcon?: ReactNode; +firstValueError?: boolean | undefined; +secondValueError?: boolean | undefined; +firstValueSuccess?: boolean | undefined; +secondValueSuccess?: boolean | undefined; +firstPlaceholder?: string | undefined; +secondPlaceholder?: string | undefined; +firstTextfieldContentLeft?: ReactElement> | undefined; +firstTextfieldContentRight?: ReactElement> | undefined; +secondTextfieldContentLeft?: ReactElement> | undefined; +secondTextfieldContentRight?: ReactElement> | undefined; +firstTextfieldTextBefore?: string | undefined; +secondTextfieldTextBefore?: string | undefined; +firstTextfieldTextAfter?: string | undefined; +secondTextfieldTextAfter?: string | undefined; +onChangeFirstValue?: BaseCallbackChangeInstance | undefined; +onChangeSecondValue?: BaseCallbackChangeInstance | undefined; +onFocusFirstTextfield?: ((event: ChangeEvent) => void) | undefined; +onFocusSecondTextfield?: ((event: ChangeEvent) => void) | undefined; +onBlurFirstTextfield?: ((event: ChangeEvent) => void) | undefined; +onBlurSecondTextfield?: ((event: ChangeEvent) => void) | undefined; +} & DatePickerCalendarProps_2 & Omit & { +placement?: DatePickerRangePlacement | DatePickerRangePlacement[] | undefined; +isDoubleCalendar?: boolean | undefined; +} & HTMLAttributes & RefAttributes>; + +export { DatePickerRangePlacement } + +export { DatePickerRangeProps } + +export { datePickerTokens } + // @public export const Divider: FunctionComponent & RefAttributes) | ({ +} & HTMLAttributes & RefAttributes) | ({ label?: string | undefined; leftHelper?: string | undefined; contentLeft?: ReactNode; @@ -1174,7 +1278,7 @@ dividerVariant?: "dash" | undefined; dividerIcon?: undefined; firstTextfieldTextBefore?: string | undefined; secondTextfieldTextBefore?: string | undefined; -} & HTMLAttributes & RefAttributes) | ({ +} & HTMLAttributes & RefAttributes) | ({ label?: string | undefined; leftHelper?: string | undefined; contentLeft?: ReactNode; @@ -1210,7 +1314,7 @@ dividerIcon?: ReactNode; dividerVariant?: "icon" | undefined; firstTextfieldTextBefore?: string | undefined; secondTextfieldTextBefore?: string | undefined; -} & HTMLAttributes & RefAttributes))>; +} & HTMLAttributes & RefAttributes))>; export { Range_2 as Range } export { RangeProps } diff --git a/packages/sdds-serv/src/components/DatePicker/DatePicker.config.ts b/packages/sdds-serv/src/components/DatePicker/DatePicker.config.ts new file mode 100644 index 0000000000..eb38c9637a --- /dev/null +++ b/packages/sdds-serv/src/components/DatePicker/DatePicker.config.ts @@ -0,0 +1,515 @@ +import { datePickerTokens as tokens, css } from '@salutejs/plasma-new-hope/styled-components'; + +export const config = { + defaults: { + view: 'default', + size: 'm', + }, + variations: { + view: { + default: css` + ${tokens.background}: var(--surface-transparent-primary); + ${tokens.backgroundError}: var(--surface-transparent-negative); + ${tokens.backgroundSuccess}: var(--surface-transparent-positive); + + ${tokens.dividerColor}: var(--text-primary); + ${tokens.labelColor}: var(--text-primary); + ${tokens.leftHelperColor}: var(--text-secondary); + + ${tokens.textFieldColor}: var(--text-primary); + ${tokens.textFieldPlaceholderColor}: var(--text-secondary); + ${tokens.textFieldCaretColor}: var(--text-accent); + + ${tokens.textFieldBackgroundColor}: var(--surface-transparent-secondary); + ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${tokens.textFieldBackgroundErrorColor}: var(--surface-transparent-negative); + ${tokens.textFieldBackgroundErrorColorFocus}: var(--surface-transparent-negative-active); + ${tokens.textFieldBackgroundSuccessColor}: var(--surface-transparent-positive); + ${tokens.textFieldBackgroundSuccessColorFocus}: var(--surface-transparent-positive-active); + + ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); + ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + + ${tokens.focusColor}: var(--text-accent); + + ${tokens.calendarShadow}: var(--shadow-down-soft-s); + ${tokens.calendarSeparatorBackground}: var(--surface-transparent-secondary); + ${tokens.calendarBackgroundColor}: var(--surface-solid-card); + ${tokens.calendarSelectedItemBackground}: var(--surface-solid-default); + ${tokens.calendarSelectedItemColor}: var(--inverse-text-primary); + ${tokens.calendarSelectableItemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.calendarCurrentItemBorderColor}: var(--surface-solid-default); + ${tokens.calendarCurrentItemBackgroundHover}: transparent; + ${tokens.calendarCurrentItemColorHover}: var(--text-primary); + ${tokens.calendarCurrentItemChildBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.calendarActiveItemBackground}: var(--surface-solid-default); + ${tokens.calendarActiveItemColor}: var(--inverse-text-primary); + ${tokens.calendarHoveredItemBackground}: var(--surface-accent); + ${tokens.calendarHoveredItemColor}: var(--text-primary); + ${tokens.calendarRangeBackground}: var(--surface-transparent-secondary); + ${tokens.calendarOutlineFocusColor}: var(--surface-accent); + ${tokens.calendarContentPrimaryColor}: var(--surface-solid-default); + ${tokens.calendarContentSecondaryColor}: var(--text-secondary); + + ${tokens.iconButtonColor}: var(--text-primary); + ${tokens.iconButtonBackgroundColor}: var(--surface-clear); + ${tokens.iconButtonColorHover}: var(--text-primary-hover); + ${tokens.iconButtonBackgroundColorHover}: var(--surface-clear); + ${tokens.iconButtonColorActive}: var(--text-primary-hover); + ${tokens.iconButtonBackgroundColorActive}: var(--surface-clear); + ${tokens.iconButtonFocusColor}: var(--surface-accent); + `, + }, + size: { + l: css` + ${tokens.width}: 26.5rem; + ${tokens.borderRadius}: 0.875rem; + + ${tokens.dividerPadding}: 0 0.375rem; + ${tokens.dividerFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.dividerFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.dividerFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.dividerFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.dividerLineHeight}: var(--plasma-typo-body-l-line-height); + + ${tokens.leftContentMargin}: 0 0 0 1rem; + ${tokens.rightContentMargin}: 0; + + ${tokens.labelOffset}: 0 0 0.75rem 0; + + ${tokens.labelFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.labelFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.labelFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-l-line-height); + + ${tokens.textFieldHeight}: 3.5rem; + ${tokens.textFieldBorderRadius}: 0.875rem; + ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height); + + ${tokens.leftHelperOffset}: 0.25rem 0 0 0; + ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.5rem -0.0625rem -0.125rem; + ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; + ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; + ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; + + ${tokens.calendarBorderRadius}: 0.875rem; + ${tokens.calendarWidth}: 26.5rem; + + ${tokens.calendarYearsPadding}: 0.5rem 1rem 1.125rem 1rem; + ${tokens.calendarYearItemBorderRadius}: 0.75rem; + ${tokens.calendarYearItemWidth}: 7.8125rem; + ${tokens.calendarYearItemHeight}: 5.25rem; + + ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.calendarYearFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${tokens.calendarMonthsPadding}: 0.5rem 1rem 1.125rem 1rem; + ${tokens.calendarMonthItemBorderRadius}: 0.75rem; + ${tokens.calendarMonthItemWidth}: 7.8125rem; + ${tokens.calendarMonthItemHeight}: 5.25rem; + + ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${tokens.calendarDaysPadding}: 0.5rem 1rem 1.125rem 1rem; + ${tokens.calendarDayItemBorderRadius}: 0.75rem; + ${tokens.calendarDayItemWidth}: 3.5rem; + ${tokens.calendarDayItemHeight}: 3rem; + + ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.calendarDayFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + + ${tokens.calendarHeaderWrapperPadding}: 0.875rem 1rem 0 1rem; + ${tokens.calendarHeaderArrowGap}: 0.5rem; + + ${tokens.calendarHeaderPadding}: 0 0 0 1rem; + ${tokens.calendarHeaderDateGap}: 0.5rem; + + ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h3-font-family); + ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h3-font-size); + ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h3-font-style); + ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h3-letter-spacing); + ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h3-line-height); + ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h3-font-weight); + ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h3-bold-font-weight); + + ${tokens.iconButtonHeight}: 3.5rem; + ${tokens.iconButtonWidth}: 3.5rem; + ${tokens.iconButtonPadding}: 1.5rem; + ${tokens.iconButtonRadius}: 0.875rem; + `, + m: css` + ${tokens.width}: 23rem; + ${tokens.borderRadius}: 0.75rem; + + ${tokens.dividerPadding}: 0 0.375rem; + ${tokens.dividerFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.dividerFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.dividerFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.dividerFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.dividerLineHeight}: var(--plasma-typo-body-m-line-height); + + ${tokens.leftContentMargin}: 0 0 0 0.875rem; + ${tokens.rightContentMargin}: 0; + + ${tokens.labelOffset}: 0 0 0.625rem 0; + + ${tokens.labelFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.labelFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.labelFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-m-line-height); + + ${tokens.textFieldHeight}: 3rem; + ${tokens.textFieldBorderRadius}: 0.75rem; + ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height); + + ${tokens.leftHelperOffset}: 0.25rem 0 0 0; + ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.textFieldLeftContentMargin}: -0.125rem 0.375rem -0.125rem -0.125rem; + ${tokens.textFieldRightContentMargin}: -0.125rem -0.125rem -0.125rem 0.75rem; + ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; + ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; + + ${tokens.calendarWidth}: 23rem; + ${tokens.calendarBorderRadius}: 0.875rem; + + ${tokens.calendarYearsPadding}: 0.5rem 1rem 1.125rem 1rem; + ${tokens.calendarYearItemBorderRadius}: 0.625rem; + ${tokens.calendarYearItemWidth}: 6.688rem; + ${tokens.calendarYearItemHeight}: 4.375rem; + + ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.calendarYearFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${tokens.calendarMonthsPadding}: 0.5rem 1rem 1.125rem 1rem; + ${tokens.calendarMonthItemBorderRadius}: 0.625rem; + ${tokens.calendarMonthItemWidth}: 6.688rem; + ${tokens.calendarMonthItemHeight}: 4.375rem; + + ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${tokens.calendarDaysPadding}: 0.5rem 1rem 1.125rem 1rem; + ${tokens.calendarDayItemBorderRadius}: 0.625rem; + ${tokens.calendarDayItemWidth}: 3rem; + ${tokens.calendarDayItemHeight}: 2.5rem; + + ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.calendarDayFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + + ${tokens.calendarHeaderWrapperPadding}: 0.75rem 1rem 0 1rem; + ${tokens.calendarHeaderArrowGap}: 0.5rem; + + ${tokens.calendarHeaderPadding}: 0 0 0 0.875rem; + ${tokens.calendarHeaderDateGap}: 0.375rem; + + ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); + ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); + ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); + ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); + ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); + ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); + ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + + ${tokens.iconButtonHeight}: 3rem; + ${tokens.iconButtonWidth}: 3rem; + ${tokens.iconButtonPadding}: 1.25rem; + ${tokens.iconButtonRadius}: 0.75rem; + `, + s: css` + ${tokens.width}: 19.5rem; + ${tokens.borderRadius}: 0.625rem; + + ${tokens.dividerPadding}: 0 0.375rem; + ${tokens.dividerFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.dividerFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.dividerFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.dividerFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.dividerLineHeight}: var(--plasma-typo-body-s-line-height); + + ${tokens.leftContentMargin}: 0 0 0 0.75rem; + ${tokens.rightContentMargin}: 0; + + ${tokens.labelOffset}: 0 0 0.5rem 0; + + ${tokens.labelFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.labelFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.labelFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-s-line-height); + + ${tokens.textFieldHeight}: 2.5rem; + ${tokens.textFieldBorderRadius}: 0.625rem; + ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height); + + ${tokens.leftHelperOffset}: 0.25rem 0 0 0; + ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.textFieldLeftContentMargin}: -0.1875rem 0.25rem -0.1875rem -0.125rem; + ${tokens.textFieldRightContentMargin}: -0.1875rem -0.125rem -0.1875rem 0.75rem; + ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; + ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; + + ${tokens.calendarWidth}: 19.5rem; + ${tokens.calendarBorderRadius}: 0.875rem; + + ${tokens.calendarYearsPadding}: 0.5rem 1rem 0.875rem 1rem; + ${tokens.calendarYearItemBorderRadius}: 0.5rem; + ${tokens.calendarYearItemWidth}: 5.5rem; + ${tokens.calendarYearItemHeight}: 3.5rem; + + ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.calendarYearFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${tokens.calendarMonthsPadding}: 0.5rem 1rem 0.875rem 1rem; + ${tokens.calendarMonthItemBorderRadius}: 0.5rem; + ${tokens.calendarMonthItemWidth}: 5.5rem; + ${tokens.calendarMonthItemHeight}: 3.5rem; + + ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${tokens.calendarDaysPadding}: 0.5rem 1rem 0.875rem 1rem; + ${tokens.calendarDayItemBorderRadius}: 0.5rem; + ${tokens.calendarDayItemWidth}: 2.5rem; + ${tokens.calendarDayItemHeight}: 2rem; + + ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.calendarDayFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + + ${tokens.calendarHeaderWrapperPadding}: 0.75rem 1rem 0 1rem; + ${tokens.calendarHeaderArrowGap}: 0.5rem; + + ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; + ${tokens.calendarHeaderDateGap}: 0.25rem; + + ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h4-font-family); + ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h4-font-size); + ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h4-font-style); + ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h4-letter-spacing); + ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h4-line-height); + ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h4-font-weight); + ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h4-bold-font-weight); + + ${tokens.iconButtonHeight}: 2rem; + ${tokens.iconButtonWidth}: 2rem; + ${tokens.iconButtonPadding}: 0.75rem; + ${tokens.iconButtonRadius}: 0.5rem; + `, + xs: css` + ${tokens.width}: 19rem; + ${tokens.borderRadius}: 0.5rem; + + ${tokens.dividerPadding}: 0 0.375rem; + ${tokens.dividerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.dividerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.dividerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.dividerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.dividerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.dividerLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.leftContentMargin}: 0 0 0 0.5rem; + ${tokens.rightContentMargin}: 0; + + ${tokens.labelOffset}: 0 0 0.375rem 0; + + ${tokens.labelFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.labelFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.labelFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.labelFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.labelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.labelLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.textFieldHeight}: 2rem; + ${tokens.textFieldBorderRadius}: 0.5rem; + ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; + ${tokens.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.textFieldFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.textFieldLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.textFieldLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.leftHelperOffset}: 0.25rem 0 0 0; + ${tokens.leftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.leftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.leftHelperFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.leftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.leftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.leftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.textFieldLeftContentMargin}: -0.0625rem 0.25rem -0.0625rem -0.125rem; + ${tokens.textFieldRightContentMargin}: -0.0625rem -0.125rem -0.0625rem 0.75rem; + ${tokens.textFieldTextBeforeMargin}: 0 0.25rem 0 0; + ${tokens.textFieldTextAfterMargin}: 0 0 0 0.25rem; + + ${tokens.calendarWidth}: 19rem; + ${tokens.calendarBorderRadius}: 0.5rem; + + ${tokens.calendarYearsPadding}: 0.5rem 0.75rem 0.625rem 0.75rem; + ${tokens.calendarYearItemBorderRadius}: 0.375rem; + ${tokens.calendarYearItemWidth}: 5.625rem; + ${tokens.calendarYearItemHeight}: 3.281rem; + + ${tokens.calendarYearFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.calendarYearFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.calendarYearFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.calendarYearFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.calendarYearFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${tokens.calendarMonthsPadding}: 0.5rem 0.75rem 0.625rem 0.75rem; + ${tokens.calendarMonthItemBorderRadius}: 0.375rem; + ${tokens.calendarMonthItemWidth}: 5.625rem; + ${tokens.calendarMonthItemHeight}: 3.281rem; + + ${tokens.calendarMonthFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.calendarMonthFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.calendarMonthFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.calendarMonthFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.calendarMonthFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${tokens.calendarDaysPadding}: 0.375rem 0.75rem 0.625rem 0.75rem; + ${tokens.calendarDayItemBorderRadius}: 0.375rem; + ${tokens.calendarDayItemWidth}: 2.5rem; + ${tokens.calendarDayItemHeight}: 2rem; + + ${tokens.calendarDayFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.calendarDayFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.calendarDayFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.calendarDayFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.calendarDayFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.calendarDayFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.calendarDaySelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + + ${tokens.calendarHeaderWrapperPadding}: 0.5rem 0.75rem 0 0.75rem; + ${tokens.calendarHeaderArrowGap}: 0; + + ${tokens.calendarHeaderPadding}: 0 0 0 0.5rem; + ${tokens.calendarHeaderDateGap}: 0.25rem; + + ${tokens.calendarHeaderFontFamily}: var(--plasma-typo-h5-font-family); + ${tokens.calendarHeaderFontSize}: var(--plasma-typo-h5-font-size); + ${tokens.calendarHeaderFontStyle}: var(--plasma-typo-h5-font-style); + ${tokens.calendarHeaderFontLetterSpacing}: var(--plasma-typo-h5-letter-spacing); + ${tokens.calendarHeaderFontLineHeight}: var(--plasma-typo-h5-line-height); + ${tokens.calendarHeaderFontWeight}: var(--plasma-typo-h5-font-weight); + ${tokens.calendarHeaderFontWeightBold}: var(--plasma-typo-h5-bold-font-weight); + + ${tokens.iconButtonHeight}: 2rem; + ${tokens.iconButtonWidth}: 2rem; + ${tokens.iconButtonPadding}: 0.75rem; + ${tokens.iconButtonRadius}: 0.5rem; + `, + }, + disabled: { + true: css` + ${tokens.disabledOpacity}: 0.4; + `, + }, + readOnly: { + true: css` + ${tokens.backgroundReadOnly}: var(--surface-transparent-primary); + ${tokens.labelColorReadOnly}: var(--text-secondary); + ${tokens.leftHelperColorReadOnly}: var(--text-secondary); + ${tokens.dividerColorReadOnly}: var(--text-secondary); + + ${tokens.textFieldColorReadOnly}: var(--text-secondary); + ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); + ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + `, + }, + }, +}; diff --git a/packages/sdds-serv/src/components/DatePicker/DatePicker.stories.tsx b/packages/sdds-serv/src/components/DatePicker/DatePicker.stories.tsx new file mode 100644 index 0000000000..a4246bab5c --- /dev/null +++ b/packages/sdds-serv/src/components/DatePicker/DatePicker.stories.tsx @@ -0,0 +1,255 @@ +import React, { ComponentProps, useRef, useState } from 'react'; +import type { StoryObj, Meta } from '@storybook/react'; +import { action } from '@storybook/addon-actions'; +import { IconPlaceholder, InSpacingDecorator } from '@salutejs/plasma-sb-utils'; + +import { IconButton } from '../IconButton/IconButton'; + +import { DatePicker, DatePickerRange } from './DatePicker'; + +const onChangeValue = action('onChangeValue'); +const onBlur = action('onBlur'); +const onFocus = action('onFocus'); + +const onChangeFirstValue = action('onChangeFirstValue'); +const onChangeSecondValue = action('onChangeSecondValue'); + +const sizes = ['l', 'm', 's', 'xs']; +const views = ['default']; +const dividers = ['none', 'dash', 'icon']; + +const meta: Meta = { + title: 'Controls/DatePicker', + decorators: [InSpacingDecorator], + argTypes: { + view: { + options: views, + control: { + type: 'inline-radio', + }, + }, + size: { + options: sizes, + control: { + type: 'inline-radio', + }, + }, + min: { + control: { + type: 'date', + }, + }, + max: { + control: { + type: 'date', + }, + }, + }, +}; + +export default meta; + +type StoryPropsDefault = ComponentProps & { + enableContentLeft: boolean; + enableContentRight: boolean; +}; + +const StoryDefault = ({ + enableContentLeft, + enableContentRight, + valueError, + valueSuccess, + size, + ...rest +}: StoryPropsDefault) => { + const [isOpen, setIsOpen] = useState(false); + + const iconSize = size === 'xs' ? 'xs' : 's'; + + return ( + : undefined} + contentRight={enableContentRight ? : undefined} + onBlur={onBlur} + onFocus={onFocus} + onToggle={(is) => setIsOpen(is)} + onChangeValue={(e, currentValue) => { + onChangeValue(e, currentValue); + }} + onCommitDate={() => setIsOpen(false)} + {...rest} + /> + ); +}; + +export const Default: StoryObj = { + argTypes: { + defaultDate: { + control: { + type: 'date', + }, + }, + }, + args: { + label: 'Лейбл', + leftHelper: 'Подсказка к полю', + placeholder: '30.05.2024', + size: 'l', + view: 'default', + defaultDate: new Date(2024, 5, 14), + min: new Date(2024, 1, 1), + max: new Date(2024, 12, 29), + maskWithFormat: false, + disabled: false, + readOnly: false, + textBefore: '', + enableContentLeft: true, + enableContentRight: true, + valueError: false, + valueSuccess: false, + }, + render: (args) => , +}; + +type StoryPropsRange = ComponentProps & { + enableContentLeft: boolean; + enableContentRight: boolean; + enableFirstTextfieldContentLeft: boolean; + enableSecondTextfieldContentLeft: boolean; + enableFirstTextfieldContentRight: boolean; + enableSecondTextfieldContentRight: boolean; +}; + +const ActionButton = ({ size }) => { + const iconSize = size === 'xs' ? 'xs' : 's'; + return ( + + + + ); +}; + +const StoryRange = ({ + dividerVariant, + enableContentLeft, + enableContentRight, + firstTextfieldTextBefore, + secondTextfieldTextBefore, + enableFirstTextfieldContentLeft, + enableSecondTextfieldContentLeft, + enableFirstTextfieldContentRight, + enableSecondTextfieldContentRight, + firstValueError, + firstValueSuccess, + secondValueError, + secondValueSuccess, + size, + ...rest +}: StoryPropsRange) => { + const rangeRef = useRef(null); + + const [isOpen, setIsOpen] = useState(false); + const [firstDate, setFirstDate] = useState(''); + + const iconSize = size === 'xs' ? 'xs' : 's'; + const showDividerIcon = dividerVariant === 'icon'; + const showDefaultTextBefore = dividerVariant === 'none'; + + const dividerIconProps = { + dividerIcon: showDividerIcon ? : null, + dividerVariant, + }; + + return ( + : undefined} + contentRight={enableContentRight ? : undefined} + firstTextfieldContentLeft={ + enableFirstTextfieldContentLeft ? : undefined + } + firstTextfieldContentRight={ + enableFirstTextfieldContentRight ? : undefined + } + secondTextfieldContentLeft={ + enableSecondTextfieldContentLeft ? : undefined + } + secondTextfieldContentRight={ + enableSecondTextfieldContentRight ? : undefined + } + firstTextfieldTextBefore={ + showDefaultTextBefore ? firstTextfieldTextBefore || 'С' : firstTextfieldTextBefore + } + secondTextfieldTextBefore={ + showDefaultTextBefore ? secondTextfieldTextBefore || 'ПО' : secondTextfieldTextBefore + } + onToggle={(is) => setIsOpen(is)} + onChangeFirstValue={(e, currentValue) => { + onChangeFirstValue(e, currentValue); + }} + onChangeSecondValue={(e, currentValue) => { + onChangeSecondValue(e, currentValue); + }} + onCommitFirstDate={(currentValue) => { + setFirstDate(currentValue); + }} + onCommitSecondDate={(currentValue) => { + firstDate && currentValue && setIsOpen(false); + }} + {...dividerIconProps} + {...rest} + /> + ); +}; + +export const Range: StoryObj = { + argTypes: { + dividerVariant: { + options: dividers, + control: { + type: 'inline-radio', + }, + }, + }, + args: { + label: 'Лейбл', + leftHelper: 'Подсказка к полю', + firstPlaceholder: '30.05.2024', + secondPlaceholder: '04.06.2024', + firstTextfieldTextBefore: '', + secondTextfieldTextBefore: '', + firstTextfieldTextAfter: '', + secondTextfieldTextAfter: '', + size: 'l', + view: 'default', + isDoubleCalendar: false, + dividerVariant: 'dash', + min: new Date(2024, 1, 1), + max: new Date(2024, 12, 29), + maskWithFormat: false, + disabled: false, + readOnly: false, + enableContentLeft: true, + enableContentRight: true, + enableFirstTextfieldContentLeft: false, + enableFirstTextfieldContentRight: false, + enableSecondTextfieldContentLeft: false, + enableSecondTextfieldContentRight: false, + + firstValueError: false, + firstValueSuccess: false, + secondValueError: false, + secondValueSuccess: false, + }, + render: (args) => , +}; diff --git a/packages/sdds-serv/src/components/DatePicker/DatePicker.ts b/packages/sdds-serv/src/components/DatePicker/DatePicker.ts new file mode 100644 index 0000000000..2c664ca314 --- /dev/null +++ b/packages/sdds-serv/src/components/DatePicker/DatePicker.ts @@ -0,0 +1,14 @@ +import { + datePickerConfig, + datePickerRangeConfig, + component, + mergeConfig, +} from '@salutejs/plasma-new-hope/styled-components'; + +import { config } from './DatePicker.config'; + +const mergedConfig = mergeConfig(datePickerConfig, config); +export const DatePicker = component(mergedConfig); + +const mergedRangeConfig = mergeConfig(datePickerRangeConfig, config); +export const DatePickerRange = component(mergedRangeConfig); diff --git a/packages/sdds-serv/src/components/DatePicker/index.ts b/packages/sdds-serv/src/components/DatePicker/index.ts new file mode 100644 index 0000000000..0675665ef9 --- /dev/null +++ b/packages/sdds-serv/src/components/DatePicker/index.ts @@ -0,0 +1,10 @@ +export type { + DatePickerProps, + DatePickerPlacementBasic, + DatePickerPlacement, + DatePickerRangeProps, + DatePickerRangePlacement, +} from '@salutejs/plasma-new-hope/styled-components'; + +export { DatePicker, DatePickerRange } from './DatePicker'; +export { datePickerClasses, datePickerTokens } from '@salutejs/plasma-new-hope/styled-components'; diff --git a/packages/sdds-serv/src/index.ts b/packages/sdds-serv/src/index.ts index 8702d71fe5..99deeb106b 100644 --- a/packages/sdds-serv/src/index.ts +++ b/packages/sdds-serv/src/index.ts @@ -11,6 +11,7 @@ export * from './components/Chip'; export * from './components/Cell'; export * from './components/Combobox'; export * from './components/Counter'; +export * from './components/DatePicker'; export * from './components/Dropdown'; export * from './components/IconButton'; export * from './components/Image'; diff --git a/website/plasma-web-docs/docs/components/DatePicker.mdx b/website/plasma-web-docs/docs/components/DatePicker.mdx new file mode 100644 index 0000000000..d49ad10f87 --- /dev/null +++ b/website/plasma-web-docs/docs/components/DatePicker.mdx @@ -0,0 +1,151 @@ +--- +id: datepicker +title: DatePicker +--- + +import { PropsTable, Description, StorybookLink } from '@site/src/components'; + +# DatePicker + + + + +## Использование +Компонент `DatePicker` представляет собой поле ввода даты с выпадающим календарем. + +Размер `DatePicker` задаётся с помощью свойства `size`. +Возможные значения свойтсва: `"l"`, `"m"`, `"s"`, `"xs"`. + +```tsx live +import React, {useState} from 'react'; +import { DatePicker, IconButton } from '@salutejs/plasma-web'; +import { IconDone } from '@salutejs/plasma-icons'; + +export function App() { + return ( +
+ } + size="l" + /> +
+ ); +} +``` + +### Формат даты +Формат даты задается с помощью свойства `format`. +При выборе даты в календаре или вводе даты через поле ввода, дата будет приводиться к заданному формату. +Свойство `maskWithFormat` позволяет маскировать ввод: + +```tsx live +import React, {useState} from 'react'; +import { DatePicker, IconButton } from '@salutejs/plasma-web'; +import { IconDone } from '@salutejs/plasma-icons'; + +export function App() { + return ( +
+ } + /> +
+ ); +} +``` + +### Валидация и индикация успешного ввода даты. +За индикацию ошибки или успешного ввода отвечают `valueError`, `valueSuccess`. +В данном примере валидация происходит при нажатии клавиши `Enter` после ввода значений: + +```tsx live +import React, {useState} from 'react'; +import { DatePicker, IconButton } from '@salutejs/plasma-web'; +import { IconDone } from '@salutejs/plasma-icons'; + +export function App() { + const [isOpen, setIsOpen] = useState(false); + const [error, setError] = useState(false); + const [success, setSuccess] = useState(false); + + const handleCommitDate = (newDate: Date | string, dateError?: boolean, dateSuccess?: boolean) => { + if (dateError) { + setError(true); + return; + } + + if (dateSuccess) { + setSuccess(true); + } + + setIsOpen(false); + }; + + return ( +
+ } + onChangeValue={() => { + setError(false); + setSuccess(false); + }} + onCommitDate={handleCommitDate} + /> +
+ ); +} +``` + +## DatePickerRange + + + +## Использование +Компонент `DatePickerRange` представляет собой `Range` с выпадающим календарем. +Календарь может быть одиночным или двойным. За это отвечает свойство `isDoubleCalendar`. + +```tsx live +import React, {useState} from 'react'; +import { DatePickerRange, IconButton } from '@salutejs/plasma-web'; +import { IconDone } from '@salutejs/plasma-icons'; + +export function App() { + const ActionButton = () => { + return ( + + + + ); + }; + + return ( +
+ } + isDoubleCalendar + /> +
+ ); +} +``` \ No newline at end of file diff --git a/website/sdds-serv-docs/docs/components/DatePicker.mdx b/website/sdds-serv-docs/docs/components/DatePicker.mdx new file mode 100644 index 0000000000..661cd0313e --- /dev/null +++ b/website/sdds-serv-docs/docs/components/DatePicker.mdx @@ -0,0 +1,150 @@ +--- +id: datepicker +title: DatePicker +--- + +import { PropsTable, Description } from '@site/src/components'; + +# DatePicker + + + +## Использование +Компонент `DatePicker` представляет собой поле ввода даты с выпадающим календарем. + +Размер `DatePicker` задаётся с помощью свойства `size`. +Возможные значения свойтсва: `"l"`, `"m"`, `"s"`, `"xs"`. + +```tsx live +import React, {useState} from 'react'; +import { DatePicker, IconButton } from '@salutejs/sdds-serv'; +import { IconDone } from '@salutejs/plasma-icons'; + +export function App() { + return ( +
+ } + size="l" + /> +
+ ); +} +``` + +### Формат даты +Формат даты задается с помощью свойства `format`. +При выборе даты в календаре или вводе даты через поле ввода, дата будет приводиться к заданному формату. +Свойство `maskWithFormat` позволяет маскировать ввод: + +```tsx live +import React, {useState} from 'react'; +import { DatePicker, IconButton } from '@salutejs/sdds-serv'; +import { IconDone } from '@salutejs/plasma-icons'; + +export function App() { + return ( +
+ } + /> +
+ ); +} +``` + +### Валидация и индикация успешного ввода даты. +За индикацию ошибки или успешного ввода отвечают `valueError`, `valueSuccess`. +В данном примере валидация происходит при нажатии клавиши `Enter` после ввода значений: + +```tsx live +import React, {useState} from 'react'; +import { DatePicker, IconButton } from '@salutejs/sdds-serv'; +import { IconDone } from '@salutejs/plasma-icons'; + +export function App() { + const [isOpen, setIsOpen] = useState(false); + const [error, setError] = useState(false); + const [success, setSuccess] = useState(false); + + const handleCommitDate = (newDate: Date | string, dateError?: boolean, dateSuccess?: boolean) => { + if (dateError) { + setError(true); + return; + } + + if (dateSuccess) { + setSuccess(true); + } + + setIsOpen(false); + }; + + return ( +
+ } + onChangeValue={() => { + setError(false); + setSuccess(false); + }} + onCommitDate={handleCommitDate} + /> +
+ ); +} +``` + +## DatePickerRange + + + +## Использование +Компонент `DatePickerRange` представляет собой `Range` с выпадающим календарем. +Календарь может быть одиночным или двойным. За это отвечает свойство `isDoubleCalendar`. + +```tsx live +import React, {useState} from 'react'; +import { DatePickerRange, IconButton } from '@salutejs/sdds-serv'; +import { IconDone } from '@salutejs/plasma-icons'; + +export function App() { + const ActionButton = () => { + return ( + + + + ); + }; + + return ( +
+ } + isDoubleCalendar + /> +
+ ); +} +``` \ No newline at end of file