diff --git a/.github/workflows/create-release-pr.yml b/.github/workflows/create-release-pr.yml index 40840f39ec..8cab70bd9a 100644 --- a/.github/workflows/create-release-pr.yml +++ b/.github/workflows/create-release-pr.yml @@ -3,7 +3,11 @@ name: Create release PR and generate changelog on: workflow_dispatch: - + inputs: + from-tag: + description: '' + required: false + jobs: release-pr: name: Create release PR with changelog @@ -32,7 +36,7 @@ jobs: id: github_release uses: mikepenz/release-changelog-builder-action@v4.1.0 with: - fromTag: ${{ env.FROM_TAG }} + fromTag: ${{ github.event.inputs.from-tag || env.FROM_TAG }} configuration: "./.github/changelog-builder-config.json" - name: List pull request diff --git a/cypress/snapshots/b2c/components/Accordion/Accordion.component-test.tsx/plasma-web Accordion -- _size.snap.png b/cypress/snapshots/b2c/components/Accordion/Accordion.component-test.tsx/plasma-web Accordion -- _size.snap.png index 2ace0c8cbe..4abf9338f0 100644 Binary files a/cypress/snapshots/b2c/components/Accordion/Accordion.component-test.tsx/plasma-web Accordion -- _size.snap.png and b/cypress/snapshots/b2c/components/Accordion/Accordion.component-test.tsx/plasma-web Accordion -- _size.snap.png differ diff --git a/cypress/snapshots/b2c/components/Accordion/Accordion.component-test.tsx/plasma-web Accordion -- _type.snap.png b/cypress/snapshots/b2c/components/Accordion/Accordion.component-test.tsx/plasma-web Accordion -- _type.snap.png index 8b299c1c7d..f9254b8ebf 100644 Binary files a/cypress/snapshots/b2c/components/Accordion/Accordion.component-test.tsx/plasma-web Accordion -- _type.snap.png and b/cypress/snapshots/b2c/components/Accordion/Accordion.component-test.tsx/plasma-web Accordion -- _type.snap.png differ diff --git a/cypress/snapshots/b2c/components/Autocomplete/Autocomplete.component-test.tsx/plasma-b2c Autocomplete -- default.snap.png b/cypress/snapshots/b2c/components/Autocomplete/Autocomplete.component-test.tsx/plasma-b2c Autocomplete -- default.snap.png new file mode 100644 index 0000000000..c2ca4cef7c Binary files /dev/null and b/cypress/snapshots/b2c/components/Autocomplete/Autocomplete.component-test.tsx/plasma-b2c Autocomplete -- default.snap.png differ diff --git a/cypress/snapshots/b2c/components/Autocomplete/Autocomplete.component-test.tsx/plasma-b2c Autocomplete -- prop disabled.snap.png b/cypress/snapshots/b2c/components/Autocomplete/Autocomplete.component-test.tsx/plasma-b2c Autocomplete -- prop disabled.snap.png new file mode 100644 index 0000000000..06739023e5 Binary files /dev/null and b/cypress/snapshots/b2c/components/Autocomplete/Autocomplete.component-test.tsx/plasma-b2c Autocomplete -- prop disabled.snap.png differ diff --git a/cypress/snapshots/b2c/components/Autocomplete/Autocomplete.component-test.tsx/plasma-b2c Autocomplete -- prop listMaxHeight.snap.png b/cypress/snapshots/b2c/components/Autocomplete/Autocomplete.component-test.tsx/plasma-b2c Autocomplete -- prop listMaxHeight.snap.png new file mode 100644 index 0000000000..88e381d26e Binary files /dev/null and b/cypress/snapshots/b2c/components/Autocomplete/Autocomplete.component-test.tsx/plasma-b2c Autocomplete -- prop listMaxHeight.snap.png differ diff --git a/cypress/snapshots/b2c/components/Autocomplete/Autocomplete.component-test.tsx/plasma-b2c Autocomplete -- prop listWidth.snap.png b/cypress/snapshots/b2c/components/Autocomplete/Autocomplete.component-test.tsx/plasma-b2c Autocomplete -- prop listWidth.snap.png new file mode 100644 index 0000000000..a330ed5c65 Binary files /dev/null and b/cypress/snapshots/b2c/components/Autocomplete/Autocomplete.component-test.tsx/plasma-b2c Autocomplete -- prop listWidth.snap.png differ diff --git a/cypress/snapshots/b2c/components/Autocomplete/Autocomplete.component-test.tsx/plasma-b2c Autocomplete -- prop readOnly.snap.png b/cypress/snapshots/b2c/components/Autocomplete/Autocomplete.component-test.tsx/plasma-b2c Autocomplete -- prop readOnly.snap.png new file mode 100644 index 0000000000..c689213945 Binary files /dev/null and b/cypress/snapshots/b2c/components/Autocomplete/Autocomplete.component-test.tsx/plasma-b2c Autocomplete -- prop readOnly.snap.png differ diff --git a/cypress/snapshots/b2c/components/Autocomplete/Autocomplete.component-test.tsx/plasma-b2c Autocomplete -- prop size.snap.png b/cypress/snapshots/b2c/components/Autocomplete/Autocomplete.component-test.tsx/plasma-b2c Autocomplete -- prop size.snap.png new file mode 100644 index 0000000000..8403e13581 Binary files /dev/null and b/cypress/snapshots/b2c/components/Autocomplete/Autocomplete.component-test.tsx/plasma-b2c Autocomplete -- prop size.snap.png differ diff --git a/cypress/snapshots/b2c/components/Autocomplete/Autocomplete.component-test.tsx/plasma-b2c Autocomplete -- prop view.snap.png b/cypress/snapshots/b2c/components/Autocomplete/Autocomplete.component-test.tsx/plasma-b2c Autocomplete -- prop view.snap.png new file mode 100644 index 0000000000..61db11c7fa Binary files /dev/null and b/cypress/snapshots/b2c/components/Autocomplete/Autocomplete.component-test.tsx/plasma-b2c Autocomplete -- prop view.snap.png differ diff --git a/cypress/snapshots/b2c/components/Calendar/Calendar.component-test.tsx/plasma-b2c Calendar -- days next month.snap.png b/cypress/snapshots/b2c/components/Calendar/Calendar.component-test.tsx/plasma-b2c Calendar -- days next month.snap.png new file mode 100644 index 0000000000..35dc23b8b0 Binary files /dev/null and b/cypress/snapshots/b2c/components/Calendar/Calendar.component-test.tsx/plasma-b2c Calendar -- days next month.snap.png differ diff --git a/cypress/snapshots/b2c/components/Calendar/Calendar.component-test.tsx/plasma-b2c Calendar -- days prev month.snap.png b/cypress/snapshots/b2c/components/Calendar/Calendar.component-test.tsx/plasma-b2c Calendar -- days prev month.snap.png new file mode 100644 index 0000000000..de259344e7 Binary files /dev/null and b/cypress/snapshots/b2c/components/Calendar/Calendar.component-test.tsx/plasma-b2c Calendar -- days prev month.snap.png differ diff --git a/cypress/snapshots/b2c/components/Calendar/Calendar.component-test.tsx/plasma-b2c Calendar -- default double calendar.snap.png b/cypress/snapshots/b2c/components/Calendar/Calendar.component-test.tsx/plasma-b2c Calendar -- default double calendar.snap.png new file mode 100644 index 0000000000..2978558cab Binary files /dev/null and b/cypress/snapshots/b2c/components/Calendar/Calendar.component-test.tsx/plasma-b2c Calendar -- default double calendar.snap.png differ diff --git a/cypress/snapshots/b2c/components/Calendar/Calendar.component-test.tsx/plasma-b2c Calendar -- default.snap.png b/cypress/snapshots/b2c/components/Calendar/Calendar.component-test.tsx/plasma-b2c Calendar -- default.snap.png new file mode 100644 index 0000000000..658d93a782 Binary files /dev/null and b/cypress/snapshots/b2c/components/Calendar/Calendar.component-test.tsx/plasma-b2c Calendar -- default.snap.png differ diff --git a/cypress/snapshots/b2c/components/Calendar/Calendar.component-test.tsx/plasma-b2c Calendar -- min and max double.snap.png b/cypress/snapshots/b2c/components/Calendar/Calendar.component-test.tsx/plasma-b2c Calendar -- min and max double.snap.png new file mode 100644 index 0000000000..7fa94a6d4f Binary files /dev/null and b/cypress/snapshots/b2c/components/Calendar/Calendar.component-test.tsx/plasma-b2c Calendar -- min and max double.snap.png differ diff --git a/cypress/snapshots/b2c/components/Calendar/Calendar.component-test.tsx/plasma-b2c Calendar -- min and max.snap.png b/cypress/snapshots/b2c/components/Calendar/Calendar.component-test.tsx/plasma-b2c Calendar -- min and max.snap.png new file mode 100644 index 0000000000..264949cdf2 Binary files /dev/null and b/cypress/snapshots/b2c/components/Calendar/Calendar.component-test.tsx/plasma-b2c Calendar -- min and max.snap.png differ diff --git a/cypress/snapshots/b2c/components/Calendar/Calendar.component-test.tsx/plasma-b2c Calendar -- months next year.snap.png b/cypress/snapshots/b2c/components/Calendar/Calendar.component-test.tsx/plasma-b2c Calendar -- months next year.snap.png new file mode 100644 index 0000000000..6b027e53ff Binary files /dev/null and b/cypress/snapshots/b2c/components/Calendar/Calendar.component-test.tsx/plasma-b2c Calendar -- months next year.snap.png differ diff --git a/cypress/snapshots/b2c/components/Calendar/Calendar.component-test.tsx/plasma-b2c Calendar -- months prev year.snap.png b/cypress/snapshots/b2c/components/Calendar/Calendar.component-test.tsx/plasma-b2c Calendar -- months prev year.snap.png new file mode 100644 index 0000000000..530e051481 Binary files /dev/null and b/cypress/snapshots/b2c/components/Calendar/Calendar.component-test.tsx/plasma-b2c Calendar -- months prev year.snap.png differ diff --git a/cypress/snapshots/b2c/components/Calendar/Calendar.component-test.tsx/plasma-b2c Calendar -- quartes next year.snap.png b/cypress/snapshots/b2c/components/Calendar/Calendar.component-test.tsx/plasma-b2c Calendar -- quartes next year.snap.png new file mode 100644 index 0000000000..d6f452a2eb Binary files /dev/null and b/cypress/snapshots/b2c/components/Calendar/Calendar.component-test.tsx/plasma-b2c Calendar -- quartes next year.snap.png differ diff --git a/cypress/snapshots/b2c/components/Calendar/Calendar.component-test.tsx/plasma-b2c Calendar -- quartes prev year.snap.png b/cypress/snapshots/b2c/components/Calendar/Calendar.component-test.tsx/plasma-b2c Calendar -- quartes prev year.snap.png new file mode 100644 index 0000000000..1b5d4a70dd Binary files /dev/null and b/cypress/snapshots/b2c/components/Calendar/Calendar.component-test.tsx/plasma-b2c Calendar -- quartes prev year.snap.png differ diff --git a/cypress/snapshots/b2c/components/Calendar/Calendar.component-test.tsx/plasma-b2c Calendar -- size.snap.png b/cypress/snapshots/b2c/components/Calendar/Calendar.component-test.tsx/plasma-b2c Calendar -- size.snap.png new file mode 100644 index 0000000000..ab97ab0805 Binary files /dev/null and b/cypress/snapshots/b2c/components/Calendar/Calendar.component-test.tsx/plasma-b2c Calendar -- size.snap.png differ diff --git a/cypress/snapshots/b2c/components/Calendar/Calendar.component-test.tsx/plasma-b2c Calendar keyboard navigation -- navigate with `Down`, `Left`, `Up`, `Right` arrows.snap.png b/cypress/snapshots/b2c/components/Calendar/Calendar.component-test.tsx/plasma-b2c Calendar keyboard navigation -- navigate with `Down`, `Left`, `Up`, `Right` arrows.snap.png new file mode 100644 index 0000000000..81db31c34d Binary files /dev/null and b/cypress/snapshots/b2c/components/Calendar/Calendar.component-test.tsx/plasma-b2c Calendar keyboard navigation -- navigate with `Down`, `Left`, `Up`, `Right` arrows.snap.png differ diff --git a/cypress/snapshots/b2c/components/Calendar/Calendar.component-test.tsx/plasma-b2c Calendar keyboard navigation -- set value with `Enter` and `Space`.snap.png b/cypress/snapshots/b2c/components/Calendar/Calendar.component-test.tsx/plasma-b2c Calendar keyboard navigation -- set value with `Enter` and `Space`.snap.png new file mode 100644 index 0000000000..6ea48317ba Binary files /dev/null and b/cypress/snapshots/b2c/components/Calendar/Calendar.component-test.tsx/plasma-b2c 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 Calendar -- default.snap.png b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- default.snap.png deleted file mode 100644 index fd817f73d1..0000000000 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- default.snap.png and /dev/null 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 deleted file mode 100644 index 65fc4dc08f..0000000000 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- disabled days.snap.png and /dev/null 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 deleted file mode 100644 index e9595f280a..0000000000 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- event list.snap.png and /dev/null 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 deleted file mode 100644 index 489f88c2e6..0000000000 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- min and max.snap.png and /dev/null 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 deleted file mode 100644 index 9193de4f15..0000000000 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- next month.snap.png and /dev/null differ diff --git a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- next range years.snap.png b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- next range years.snap.png deleted file mode 100644 index 2ffab9a5e8..0000000000 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- next range years.snap.png and /dev/null 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 deleted file mode 100644 index 5d2dd52f58..0000000000 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- next year.snap.png and /dev/null 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 deleted file mode 100644 index 73e94b749a..0000000000 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- prev month.snap.png and /dev/null differ diff --git a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- prev range years.snap.png b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- prev range years.snap.png deleted file mode 100644 index 798707712a..0000000000 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- prev range years.snap.png and /dev/null 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 deleted file mode 100644 index 96cc2636af..0000000000 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- prev year.snap.png and /dev/null 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 deleted file mode 100644 index 2132473f83..0000000000 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- range in progress with disabled.snap.png and /dev/null 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 deleted file mode 100644 index 7b2b0162d4..0000000000 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- range in progress.snap.png and /dev/null 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 deleted file mode 100644 index b48d2edda0..0000000000 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- range.snap.png and /dev/null 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 deleted file mode 100644 index 79e17d027e..0000000000 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- set value.snap.png and /dev/null 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 deleted file mode 100644 index 4f0be6af86..0000000000 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 /dev/null 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 deleted file mode 100644 index 308da7c5b8..0000000000 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 /dev/null 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 deleted file mode 100644 index f5afdf65e0..0000000000 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- default.snap.png and /dev/null 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 deleted file mode 100644 index 1ae3e8398e..0000000000 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- disabled days.snap.png and /dev/null 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 deleted file mode 100644 index cdf8320268..0000000000 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- event list.snap.png and /dev/null 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 deleted file mode 100644 index 7dc2855b40..0000000000 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- min and max.snap.png and /dev/null 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 deleted file mode 100644 index 25fc08c5ce..0000000000 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- next month.snap.png and /dev/null 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 deleted file mode 100644 index f8e5f65cb8..0000000000 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- prev month.snap.png and /dev/null 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 deleted file mode 100644 index f70e204c69..0000000000 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- range in progress with disabled.snap.png and /dev/null 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 deleted file mode 100644 index c801275196..0000000000 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- range in progress.snap.png and /dev/null 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 deleted file mode 100644 index c801275196..0000000000 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- range.snap.png and /dev/null 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 deleted file mode 100644 index 25d849a978..0000000000 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- set value.snap.png and /dev/null 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 deleted file mode 100644 index 38467b5129..0000000000 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 /dev/null 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 deleted file mode 100644 index 06f27cbd9a..0000000000 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 /dev/null differ diff --git a/cypress/snapshots/b2c/components/Calendar/CalendarRange.component-test.tsx/plasma-b2c CalendarRange -- default double calendar.snap.png b/cypress/snapshots/b2c/components/Calendar/CalendarRange.component-test.tsx/plasma-b2c CalendarRange -- default double calendar.snap.png new file mode 100644 index 0000000000..e691c3f6b8 Binary files /dev/null and b/cypress/snapshots/b2c/components/Calendar/CalendarRange.component-test.tsx/plasma-b2c CalendarRange -- default double calendar.snap.png differ diff --git a/cypress/snapshots/b2c/components/Calendar/CalendarRange.component-test.tsx/plasma-b2c CalendarRange -- default.snap.png b/cypress/snapshots/b2c/components/Calendar/CalendarRange.component-test.tsx/plasma-b2c CalendarRange -- default.snap.png new file mode 100644 index 0000000000..dd087d2048 Binary files /dev/null and b/cypress/snapshots/b2c/components/Calendar/CalendarRange.component-test.tsx/plasma-b2c CalendarRange -- default.snap.png differ diff --git a/cypress/snapshots/b2c/components/Calendar/CalendarRange.component-test.tsx/plasma-b2c CalendarRange -- range in progress with disabled.snap.png b/cypress/snapshots/b2c/components/Calendar/CalendarRange.component-test.tsx/plasma-b2c CalendarRange -- range in progress with disabled.snap.png new file mode 100644 index 0000000000..1b2c981050 Binary files /dev/null and b/cypress/snapshots/b2c/components/Calendar/CalendarRange.component-test.tsx/plasma-b2c CalendarRange -- range in progress with disabled.snap.png differ diff --git a/cypress/snapshots/b2c/components/Calendar/CalendarRange.component-test.tsx/plasma-b2c CalendarRange -- range in progress.snap.png b/cypress/snapshots/b2c/components/Calendar/CalendarRange.component-test.tsx/plasma-b2c CalendarRange -- range in progress.snap.png new file mode 100644 index 0000000000..5e2887c519 Binary files /dev/null and b/cypress/snapshots/b2c/components/Calendar/CalendarRange.component-test.tsx/plasma-b2c CalendarRange -- range in progress.snap.png differ diff --git a/cypress/snapshots/b2c/components/Chip/Chip.component-test.tsx/plasma-web Chip -- _size.snap.png b/cypress/snapshots/b2c/components/Chip/Chip.component-test.tsx/plasma-b2c Chip -- _size.snap.png similarity index 100% rename from cypress/snapshots/b2c/components/Chip/Chip.component-test.tsx/plasma-web Chip -- _size.snap.png rename to cypress/snapshots/b2c/components/Chip/Chip.component-test.tsx/plasma-b2c Chip -- _size.snap.png diff --git a/cypress/snapshots/b2c/components/Chip/Chip.component-test.tsx/plasma-web Chip -- _view.snap.png b/cypress/snapshots/b2c/components/Chip/Chip.component-test.tsx/plasma-b2c Chip -- _view.snap.png similarity index 100% rename from cypress/snapshots/b2c/components/Chip/Chip.component-test.tsx/plasma-web Chip -- _view.snap.png rename to cypress/snapshots/b2c/components/Chip/Chip.component-test.tsx/plasma-b2c Chip -- _view.snap.png diff --git a/cypress/snapshots/b2c/components/Chip/Chip.component-test.tsx/plasma-web Chip -- fixed width.snap.png b/cypress/snapshots/b2c/components/Chip/Chip.component-test.tsx/plasma-b2c Chip -- fixed width.snap.png similarity index 100% rename from cypress/snapshots/b2c/components/Chip/Chip.component-test.tsx/plasma-web Chip -- fixed width.snap.png rename to cypress/snapshots/b2c/components/Chip/Chip.component-test.tsx/plasma-b2c Chip -- fixed width.snap.png diff --git a/cypress/snapshots/b2c/components/Chip/Chip.component-test.tsx/plasma-web Chip -- simple.snap.png b/cypress/snapshots/b2c/components/Chip/Chip.component-test.tsx/plasma-b2c Chip -- simple.snap.png similarity index 100% rename from cypress/snapshots/b2c/components/Chip/Chip.component-test.tsx/plasma-web Chip -- simple.snap.png rename to cypress/snapshots/b2c/components/Chip/Chip.component-test.tsx/plasma-b2c Chip -- simple.snap.png diff --git a/cypress/snapshots/b2c/components/Chip/Chip.component-test.tsx/plasma-web Chip -- with Icon.snap.png b/cypress/snapshots/b2c/components/Chip/Chip.component-test.tsx/plasma-b2c Chip -- with Icon.snap.png similarity index 100% rename from cypress/snapshots/b2c/components/Chip/Chip.component-test.tsx/plasma-web Chip -- with Icon.snap.png rename to cypress/snapshots/b2c/components/Chip/Chip.component-test.tsx/plasma-b2c Chip -- with Icon.snap.png diff --git a/cypress/snapshots/b2c/components/Chip/Chip.component-test.tsx/plasma-b2c Chip -- without Clear.snap.png b/cypress/snapshots/b2c/components/Chip/Chip.component-test.tsx/plasma-b2c Chip -- without Clear.snap.png new file mode 100644 index 0000000000..6cc69ee110 Binary files /dev/null and b/cypress/snapshots/b2c/components/Chip/Chip.component-test.tsx/plasma-b2c Chip -- without Clear.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 index 9308adc3d8..ffb378655f 100644 Binary files a/cypress/snapshots/b2c/components/DatePicker/DatePicker.component-test.tsx/plasma-b2c DatePickerRange -- prop input date, double calendar.snap.png 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/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 d27a02c83e..8f104afd16 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 hasArrow.snap.png b/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-b2c Dropdown -- prop hasArrow.snap.png index 5b44691451..6d500fa661 100644 Binary files a/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-b2c Dropdown -- prop hasArrow.snap.png and b/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-b2c Dropdown -- prop hasArrow.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 74cc67eb5d..4e7550bff4 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 e0027e8198..4336b4c65b 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 cd679f973c..5b79b90bec 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 trigger.snap.png b/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-b2c Dropdown -- prop trigger.snap.png index ce0f718bd0..a681760619 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/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Content -- clickOnContent.snap.png b/cypress/snapshots/b2c/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Content -- clickOnContent.snap.png index 6031adb4c1..a3b18bec04 100644 Binary files a/cypress/snapshots/b2c/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Content -- clickOnContent.snap.png and b/cypress/snapshots/b2c/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Content -- clickOnContent.snap.png differ diff --git a/cypress/snapshots/b2c/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Content -- setInput.snap.png b/cypress/snapshots/b2c/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Content -- setInput.snap.png index 53e4be62e8..dd8e615dbd 100644 Binary files a/cypress/snapshots/b2c/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Content -- setInput.snap.png and b/cypress/snapshots/b2c/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Content -- setInput.snap.png differ diff --git a/cypress/snapshots/b2c/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Content -- setSelect.snap.png b/cypress/snapshots/b2c/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Content -- setSelect.snap.png index b3bcdd150c..bfd9f167fc 100644 Binary files a/cypress/snapshots/b2c/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Content -- setSelect.snap.png and b/cypress/snapshots/b2c/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Content -- setSelect.snap.png differ diff --git a/cypress/snapshots/b2c/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Slots -- avrSlots.snap.png b/cypress/snapshots/b2c/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Slots -- avrSlots.snap.png index e5f41ba3e3..8ffb098c37 100644 Binary files a/cypress/snapshots/b2c/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Slots -- avrSlots.snap.png and b/cypress/snapshots/b2c/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Slots -- avrSlots.snap.png differ diff --git a/cypress/snapshots/b2c/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Slots -- maxSlots.snap.png b/cypress/snapshots/b2c/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Slots -- maxSlots.snap.png index 0812a8bf45..78566e14c0 100644 Binary files a/cypress/snapshots/b2c/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Slots -- maxSlots.snap.png and b/cypress/snapshots/b2c/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Slots -- maxSlots.snap.png differ diff --git a/cypress/snapshots/b2c/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Slots -- minSlots.snap.png b/cypress/snapshots/b2c/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Slots -- minSlots.snap.png index c0781a06a8..94fd965db5 100644 Binary files a/cypress/snapshots/b2c/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Slots -- minSlots.snap.png and b/cypress/snapshots/b2c/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Slots -- minSlots.snap.png differ diff --git a/cypress/snapshots/b2c/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Styled -- _size.snap.png b/cypress/snapshots/b2c/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Styled -- _size.snap.png index 25769ebfb1..de43dc2c88 100644 Binary files a/cypress/snapshots/b2c/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Styled -- _size.snap.png and b/cypress/snapshots/b2c/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Styled -- _size.snap.png differ diff --git a/cypress/snapshots/b2c/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Styled -- _view.snap.png b/cypress/snapshots/b2c/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Styled -- _view.snap.png index 88224701a3..bb4a2115b7 100644 Binary files a/cypress/snapshots/b2c/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Styled -- _view.snap.png and b/cypress/snapshots/b2c/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Styled -- _view.snap.png differ diff --git a/cypress/snapshots/b2c/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Styled -- _viewCurrentPage.snap.png b/cypress/snapshots/b2c/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Styled -- _viewCurrentPage.snap.png index 2ca865eab3..17b8081124 100644 Binary files a/cypress/snapshots/b2c/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Styled -- _viewCurrentPage.snap.png and b/cypress/snapshots/b2c/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Styled -- _viewCurrentPage.snap.png differ diff --git a/cypress/snapshots/b2c/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Styled -- default.snap.png b/cypress/snapshots/b2c/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Styled -- default.snap.png index ed82650d24..17f3f86f45 100644 Binary files a/cypress/snapshots/b2c/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Styled -- default.snap.png and b/cypress/snapshots/b2c/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Styled -- default.snap.png differ diff --git a/cypress/snapshots/b2c/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Styled -- type.snap.png b/cypress/snapshots/b2c/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Styled -- type.snap.png index b4f69cca46..37d331f95b 100644 Binary files a/cypress/snapshots/b2c/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Styled -- type.snap.png and b/cypress/snapshots/b2c/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Styled -- type.snap.png differ diff --git a/cypress/snapshots/b2c/components/Price/Price.component-test.tsx/plasma-b2c Price -- _currency.snap.png b/cypress/snapshots/b2c/components/Price/Price.component-test.tsx/plasma-b2c Price -- _currency.snap.png new file mode 100644 index 0000000000..5b2a98f9ad Binary files /dev/null and b/cypress/snapshots/b2c/components/Price/Price.component-test.tsx/plasma-b2c Price -- _currency.snap.png differ diff --git a/cypress/snapshots/b2c/components/Price/Price.component-test.tsx/plasma-b2c Price -- _locale.snap.png b/cypress/snapshots/b2c/components/Price/Price.component-test.tsx/plasma-b2c Price -- _locale.snap.png new file mode 100644 index 0000000000..5ee7de80d0 Binary files /dev/null and b/cypress/snapshots/b2c/components/Price/Price.component-test.tsx/plasma-b2c Price -- _locale.snap.png differ diff --git a/cypress/snapshots/b2c/components/Price/Price.component-test.tsx/plasma-b2c Price -- _minFraction.snap.png b/cypress/snapshots/b2c/components/Price/Price.component-test.tsx/plasma-b2c Price -- _minFraction.snap.png new file mode 100644 index 0000000000..cbdb8cb022 Binary files /dev/null and b/cypress/snapshots/b2c/components/Price/Price.component-test.tsx/plasma-b2c Price -- _minFraction.snap.png differ diff --git a/cypress/snapshots/b2c/components/Price/Price.component-test.tsx/plasma-b2c Price -- _stroked.snap.png b/cypress/snapshots/b2c/components/Price/Price.component-test.tsx/plasma-b2c Price -- _stroked.snap.png new file mode 100644 index 0000000000..901e3acb0b Binary files /dev/null and b/cypress/snapshots/b2c/components/Price/Price.component-test.tsx/plasma-b2c Price -- _stroked.snap.png differ diff --git a/cypress/snapshots/b2c/components/Price/Price.component-test.tsx/plasma-b2c Price -- handle two prices in a row.snap.png b/cypress/snapshots/b2c/components/Price/Price.component-test.tsx/plasma-b2c Price -- handle two prices in a row.snap.png new file mode 100644 index 0000000000..c1a720ef85 Binary files /dev/null and b/cypress/snapshots/b2c/components/Price/Price.component-test.tsx/plasma-b2c Price -- handle two prices in a row.snap.png differ diff --git a/cypress/snapshots/b2c/components/Price/Price.component-test.tsx/plasma-b2c Price -- processing periodicity.snap.png b/cypress/snapshots/b2c/components/Price/Price.component-test.tsx/plasma-b2c Price -- processing periodicity.snap.png new file mode 100644 index 0000000000..13bd83396e Binary files /dev/null and b/cypress/snapshots/b2c/components/Price/Price.component-test.tsx/plasma-b2c Price -- processing periodicity.snap.png differ diff --git a/cypress/snapshots/b2c/components/Price/Price.component-test.tsx/plasma-b2c Price -- simple.snap.png b/cypress/snapshots/b2c/components/Price/Price.component-test.tsx/plasma-b2c Price -- simple.snap.png new file mode 100644 index 0000000000..126f01cd4b Binary files /dev/null and b/cypress/snapshots/b2c/components/Price/Price.component-test.tsx/plasma-b2c Price -- simple.snap.png differ diff --git a/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-hope Select -- default.snap.png b/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-hope Select -- default.snap.png index 954fe914ab..f715eaba5e 100644 Binary files a/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-hope Select -- default.snap.png and b/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-hope Select -- default.snap.png differ diff --git a/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-hope Select -- disabled.snap.png b/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-hope Select -- disabled.snap.png index 196661d762..d28277c019 100644 Binary files a/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-hope Select -- disabled.snap.png and b/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-hope Select -- disabled.snap.png differ diff --git a/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-hope Select -- handling dropdown menu height.snap.png b/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-hope Select -- handling dropdown menu height.snap.png index 8b0fb6d7a0..10fe4946c7 100644 Binary files a/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-hope Select -- handling dropdown menu height.snap.png and b/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-hope Select -- handling dropdown menu height.snap.png differ diff --git a/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-hope Select -- item click.snap.png b/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-hope Select -- item click.snap.png index e196fbd5ad..f5075b5c23 100644 Binary files a/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-hope Select -- item click.snap.png and b/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-hope Select -- item click.snap.png differ diff --git a/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-hope Select -- multiselect.snap.png b/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-hope Select -- multiselect.snap.png index 07c0a2efee..558047bd24 100644 Binary files a/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-hope Select -- multiselect.snap.png and b/cypress/snapshots/b2c/components/Select/Select.component-test.tsx/plasma-hope Select -- multiselect.snap.png differ diff --git a/cypress/snapshots/b2c/components/SelectNew/Select.component-test.tsx/plasma-b2c SelectNew -- basic logic.snap.png b/cypress/snapshots/b2c/components/SelectNew/Select.component-test.tsx/plasma-b2c SelectNew -- basic logic.snap.png new file mode 100644 index 0000000000..9260547983 Binary files /dev/null and b/cypress/snapshots/b2c/components/SelectNew/Select.component-test.tsx/plasma-b2c SelectNew -- basic logic.snap.png differ diff --git a/cypress/snapshots/b2c/components/SelectNew/Select.component-test.tsx/plasma-b2c SelectNew -- default.snap.png b/cypress/snapshots/b2c/components/SelectNew/Select.component-test.tsx/plasma-b2c SelectNew -- default.snap.png new file mode 100644 index 0000000000..57126174f2 Binary files /dev/null and b/cypress/snapshots/b2c/components/SelectNew/Select.component-test.tsx/plasma-b2c SelectNew -- default.snap.png differ diff --git a/cypress/snapshots/b2c/components/SelectNew/Select.component-test.tsx/plasma-b2c SelectNew -- prop chipView accent.snap.png b/cypress/snapshots/b2c/components/SelectNew/Select.component-test.tsx/plasma-b2c SelectNew -- prop chipView accent.snap.png new file mode 100644 index 0000000000..595c3bbbef Binary files /dev/null and b/cypress/snapshots/b2c/components/SelectNew/Select.component-test.tsx/plasma-b2c SelectNew -- prop chipView accent.snap.png differ diff --git a/cypress/snapshots/b2c/components/SelectNew/Select.component-test.tsx/plasma-b2c SelectNew -- prop chipView secondary.snap.png b/cypress/snapshots/b2c/components/SelectNew/Select.component-test.tsx/plasma-b2c SelectNew -- prop chipView secondary.snap.png new file mode 100644 index 0000000000..c8f1a4112d Binary files /dev/null and b/cypress/snapshots/b2c/components/SelectNew/Select.component-test.tsx/plasma-b2c SelectNew -- prop chipView secondary.snap.png differ diff --git a/cypress/snapshots/b2c/components/SelectNew/Select.component-test.tsx/plasma-b2c SelectNew -- prop contentLeft.snap.png b/cypress/snapshots/b2c/components/SelectNew/Select.component-test.tsx/plasma-b2c SelectNew -- prop contentLeft.snap.png new file mode 100644 index 0000000000..3e886f2e5e Binary files /dev/null and b/cypress/snapshots/b2c/components/SelectNew/Select.component-test.tsx/plasma-b2c SelectNew -- prop contentLeft.snap.png differ diff --git a/cypress/snapshots/b2c/components/SelectNew/Select.component-test.tsx/plasma-b2c SelectNew -- prop isTargetAmount.snap.png b/cypress/snapshots/b2c/components/SelectNew/Select.component-test.tsx/plasma-b2c SelectNew -- prop isTargetAmount.snap.png new file mode 100644 index 0000000000..d1d85f49b1 Binary files /dev/null and b/cypress/snapshots/b2c/components/SelectNew/Select.component-test.tsx/plasma-b2c SelectNew -- prop isTargetAmount.snap.png differ diff --git a/cypress/snapshots/b2c/components/SelectNew/Select.component-test.tsx/plasma-b2c SelectNew -- prop labelPlacement.snap.png b/cypress/snapshots/b2c/components/SelectNew/Select.component-test.tsx/plasma-b2c SelectNew -- prop labelPlacement.snap.png new file mode 100644 index 0000000000..c3978dc383 Binary files /dev/null and b/cypress/snapshots/b2c/components/SelectNew/Select.component-test.tsx/plasma-b2c SelectNew -- prop labelPlacement.snap.png differ diff --git a/cypress/snapshots/b2c/components/SelectNew/Select.component-test.tsx/plasma-b2c SelectNew -- prop size l.snap.png b/cypress/snapshots/b2c/components/SelectNew/Select.component-test.tsx/plasma-b2c SelectNew -- prop size l.snap.png new file mode 100644 index 0000000000..5ae1f3e893 Binary files /dev/null and b/cypress/snapshots/b2c/components/SelectNew/Select.component-test.tsx/plasma-b2c SelectNew -- prop size l.snap.png differ diff --git a/cypress/snapshots/b2c/components/SelectNew/Select.component-test.tsx/plasma-b2c SelectNew -- prop size m.snap.png b/cypress/snapshots/b2c/components/SelectNew/Select.component-test.tsx/plasma-b2c SelectNew -- prop size m.snap.png new file mode 100644 index 0000000000..57126174f2 Binary files /dev/null and b/cypress/snapshots/b2c/components/SelectNew/Select.component-test.tsx/plasma-b2c SelectNew -- prop size m.snap.png differ diff --git a/cypress/snapshots/b2c/components/SelectNew/Select.component-test.tsx/plasma-b2c SelectNew -- prop size s.snap.png b/cypress/snapshots/b2c/components/SelectNew/Select.component-test.tsx/plasma-b2c SelectNew -- prop size s.snap.png new file mode 100644 index 0000000000..d54ba812c0 Binary files /dev/null and b/cypress/snapshots/b2c/components/SelectNew/Select.component-test.tsx/plasma-b2c SelectNew -- prop size s.snap.png differ diff --git a/cypress/snapshots/b2c/components/SelectNew/Select.component-test.tsx/plasma-b2c SelectNew -- prop size xs.snap.png b/cypress/snapshots/b2c/components/SelectNew/Select.component-test.tsx/plasma-b2c SelectNew -- prop size xs.snap.png new file mode 100644 index 0000000000..e0e9976d4e Binary files /dev/null and b/cypress/snapshots/b2c/components/SelectNew/Select.component-test.tsx/plasma-b2c SelectNew -- prop size xs.snap.png differ diff --git a/cypress/snapshots/web/components/Accordion/Accordion.component-test.tsx/plasma-web Accordion -- _size.snap.png b/cypress/snapshots/web/components/Accordion/Accordion.component-test.tsx/plasma-web Accordion -- _size.snap.png index 15dd871e30..5acf6a1939 100644 Binary files a/cypress/snapshots/web/components/Accordion/Accordion.component-test.tsx/plasma-web Accordion -- _size.snap.png and b/cypress/snapshots/web/components/Accordion/Accordion.component-test.tsx/plasma-web Accordion -- _size.snap.png differ diff --git a/cypress/snapshots/web/components/Autocomplete/Autocomplete.component-test.tsx/plasma-web Autocomplete -- default.snap.png b/cypress/snapshots/web/components/Autocomplete/Autocomplete.component-test.tsx/plasma-web Autocomplete -- default.snap.png new file mode 100644 index 0000000000..c5f71982c5 Binary files /dev/null and b/cypress/snapshots/web/components/Autocomplete/Autocomplete.component-test.tsx/plasma-web Autocomplete -- default.snap.png differ diff --git a/cypress/snapshots/web/components/Autocomplete/Autocomplete.component-test.tsx/plasma-web Autocomplete -- prop disabled.snap.png b/cypress/snapshots/web/components/Autocomplete/Autocomplete.component-test.tsx/plasma-web Autocomplete -- prop disabled.snap.png new file mode 100644 index 0000000000..8313c7e828 Binary files /dev/null and b/cypress/snapshots/web/components/Autocomplete/Autocomplete.component-test.tsx/plasma-web Autocomplete -- prop disabled.snap.png differ diff --git a/cypress/snapshots/web/components/Autocomplete/Autocomplete.component-test.tsx/plasma-web Autocomplete -- prop listMaxHeight.snap.png b/cypress/snapshots/web/components/Autocomplete/Autocomplete.component-test.tsx/plasma-web Autocomplete -- prop listMaxHeight.snap.png new file mode 100644 index 0000000000..7eb58ab89a Binary files /dev/null and b/cypress/snapshots/web/components/Autocomplete/Autocomplete.component-test.tsx/plasma-web Autocomplete -- prop listMaxHeight.snap.png differ diff --git a/cypress/snapshots/web/components/Autocomplete/Autocomplete.component-test.tsx/plasma-web Autocomplete -- prop listWidth.snap.png b/cypress/snapshots/web/components/Autocomplete/Autocomplete.component-test.tsx/plasma-web Autocomplete -- prop listWidth.snap.png new file mode 100644 index 0000000000..0b35532153 Binary files /dev/null and b/cypress/snapshots/web/components/Autocomplete/Autocomplete.component-test.tsx/plasma-web Autocomplete -- prop listWidth.snap.png differ diff --git a/cypress/snapshots/web/components/Autocomplete/Autocomplete.component-test.tsx/plasma-web Autocomplete -- prop readOnly.snap.png b/cypress/snapshots/web/components/Autocomplete/Autocomplete.component-test.tsx/plasma-web Autocomplete -- prop readOnly.snap.png new file mode 100644 index 0000000000..2435a12062 Binary files /dev/null and b/cypress/snapshots/web/components/Autocomplete/Autocomplete.component-test.tsx/plasma-web Autocomplete -- prop readOnly.snap.png differ diff --git a/cypress/snapshots/web/components/Autocomplete/Autocomplete.component-test.tsx/plasma-web Autocomplete -- prop size.snap.png b/cypress/snapshots/web/components/Autocomplete/Autocomplete.component-test.tsx/plasma-web Autocomplete -- prop size.snap.png new file mode 100644 index 0000000000..b7dbd37996 Binary files /dev/null and b/cypress/snapshots/web/components/Autocomplete/Autocomplete.component-test.tsx/plasma-web Autocomplete -- prop size.snap.png differ diff --git a/cypress/snapshots/web/components/Autocomplete/Autocomplete.component-test.tsx/plasma-web Autocomplete -- prop view.snap.png b/cypress/snapshots/web/components/Autocomplete/Autocomplete.component-test.tsx/plasma-web Autocomplete -- prop view.snap.png new file mode 100644 index 0000000000..4488de5761 Binary files /dev/null and b/cypress/snapshots/web/components/Autocomplete/Autocomplete.component-test.tsx/plasma-web Autocomplete -- prop view.snap.png differ diff --git a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- days next month.snap.png b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- days next month.snap.png new file mode 100644 index 0000000000..8b04ce3db5 Binary files /dev/null and b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- days next month.snap.png differ diff --git a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- days prev month.snap.png b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- days prev month.snap.png new file mode 100644 index 0000000000..6c10ee04fc Binary files /dev/null and b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- days prev month.snap.png differ diff --git a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- default double calendar.snap.png b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- default double calendar.snap.png new file mode 100644 index 0000000000..744e3e745e Binary files /dev/null and b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- default double calendar.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 c9b01b3549..ef1da0cc88 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 deleted file mode 100644 index 8d5ed81177..0000000000 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- disabled days.snap.png and /dev/null 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 deleted file mode 100644 index 14f1fff71a..0000000000 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- event list.snap.png and /dev/null differ diff --git a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- min and max double.snap.png b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- min and max double.snap.png new file mode 100644 index 0000000000..d713ab7e7d Binary files /dev/null and b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- min and max double.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 9f4678208e..ecbca4d5eb 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 -- months next year.snap.png b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- months next year.snap.png new file mode 100644 index 0000000000..6bfed80eea Binary files /dev/null and b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- months next year.snap.png differ diff --git a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- months prev year.snap.png b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- months prev year.snap.png new file mode 100644 index 0000000000..b40894e52b Binary files /dev/null and b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- months prev year.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 deleted file mode 100644 index 62b8adab2d..0000000000 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- next month.snap.png and /dev/null differ diff --git a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- next range years.snap.png b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- next range years.snap.png deleted file mode 100644 index ab01b7ba3e..0000000000 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- next range years.snap.png and /dev/null 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 deleted file mode 100644 index 14ea48f537..0000000000 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- next year.snap.png and /dev/null 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 deleted file mode 100644 index 1b770b1574..0000000000 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- prev month.snap.png and /dev/null differ diff --git a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- prev range years.snap.png b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- prev range years.snap.png deleted file mode 100644 index c741d3dd38..0000000000 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- prev range years.snap.png and /dev/null 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 deleted file mode 100644 index 62649ed2a8..0000000000 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- prev year.snap.png and /dev/null differ diff --git a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- quartes next year.snap.png b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- quartes next year.snap.png new file mode 100644 index 0000000000..7c3b413bdf Binary files /dev/null and b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- quartes next year.snap.png differ diff --git a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- quartes prev year.snap.png b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- quartes prev year.snap.png new file mode 100644 index 0000000000..cedcfa428b Binary files /dev/null and b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- quartes 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 deleted file mode 100644 index 55de8a907f..0000000000 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- range in progress with disabled.snap.png and /dev/null 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 deleted file mode 100644 index 63ddef2bad..0000000000 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- range in progress.snap.png and /dev/null 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 deleted file mode 100644 index f3331966af..0000000000 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- range.snap.png and /dev/null 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 deleted file mode 100644 index ce801e9572..0000000000 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- set value.snap.png and /dev/null differ diff --git a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- size.snap.png b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- size.snap.png new file mode 100644 index 0000000000..a49eab23c6 Binary files /dev/null and b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- size.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 a80c5283f8..f00664f69f 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 0cb556671c..f79b6fda2b 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 deleted file mode 100644 index 890d8be55d..0000000000 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- default.snap.png and /dev/null 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 deleted file mode 100644 index 308ed8f668..0000000000 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- disabled days.snap.png and /dev/null 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 deleted file mode 100644 index 6d37593815..0000000000 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- event list.snap.png and /dev/null 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 deleted file mode 100644 index 1ed57dd5e8..0000000000 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- min and max.snap.png and /dev/null 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 deleted file mode 100644 index c6e10906a7..0000000000 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- next month.snap.png and /dev/null 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 deleted file mode 100644 index 04f23e6ad0..0000000000 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- prev month.snap.png and /dev/null 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 deleted file mode 100644 index dd8515ac84..0000000000 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- range in progress with disabled.snap.png and /dev/null 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 deleted file mode 100644 index 13b79d1831..0000000000 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- range in progress.snap.png and /dev/null 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 deleted file mode 100644 index 13b79d1831..0000000000 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- range.snap.png and /dev/null 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 deleted file mode 100644 index 61fa40203e..0000000000 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- set value.snap.png and /dev/null 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 deleted file mode 100644 index cacd0353b2..0000000000 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 /dev/null 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 deleted file mode 100644 index 24b5a01ced..0000000000 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 /dev/null differ diff --git a/cypress/snapshots/web/components/Calendar/CalendarRange.component-test.tsx/plasma-web CalendarRange -- default double calendar.snap.png b/cypress/snapshots/web/components/Calendar/CalendarRange.component-test.tsx/plasma-web CalendarRange -- default double calendar.snap.png new file mode 100644 index 0000000000..42b6a2c94e Binary files /dev/null and b/cypress/snapshots/web/components/Calendar/CalendarRange.component-test.tsx/plasma-web CalendarRange -- default double calendar.snap.png differ diff --git a/cypress/snapshots/web/components/Calendar/CalendarRange.component-test.tsx/plasma-web CalendarRange -- default.snap.png b/cypress/snapshots/web/components/Calendar/CalendarRange.component-test.tsx/plasma-web CalendarRange -- default.snap.png new file mode 100644 index 0000000000..98e1bfe71b Binary files /dev/null and b/cypress/snapshots/web/components/Calendar/CalendarRange.component-test.tsx/plasma-web CalendarRange -- default.snap.png differ diff --git a/cypress/snapshots/web/components/Calendar/CalendarRange.component-test.tsx/plasma-web CalendarRange -- range in progress with disabled.snap.png b/cypress/snapshots/web/components/Calendar/CalendarRange.component-test.tsx/plasma-web CalendarRange -- range in progress with disabled.snap.png new file mode 100644 index 0000000000..b70b326fbb Binary files /dev/null and b/cypress/snapshots/web/components/Calendar/CalendarRange.component-test.tsx/plasma-web CalendarRange -- range in progress with disabled.snap.png differ diff --git a/cypress/snapshots/web/components/Calendar/CalendarRange.component-test.tsx/plasma-web CalendarRange -- range in progress.snap.png b/cypress/snapshots/web/components/Calendar/CalendarRange.component-test.tsx/plasma-web CalendarRange -- range in progress.snap.png new file mode 100644 index 0000000000..c880dcecc1 Binary files /dev/null and b/cypress/snapshots/web/components/Calendar/CalendarRange.component-test.tsx/plasma-web CalendarRange -- range in progress.snap.png differ diff --git a/cypress/snapshots/web/components/Chip/Chip.component-test.tsx/plasma-web Chip -- without Clear.snap.png b/cypress/snapshots/web/components/Chip/Chip.component-test.tsx/plasma-web Chip -- without Clear.snap.png new file mode 100644 index 0000000000..88f7d943c1 Binary files /dev/null and b/cypress/snapshots/web/components/Chip/Chip.component-test.tsx/plasma-web Chip -- without Clear.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 index e8b5a16fbc..7072c3dded 100644 Binary files a/cypress/snapshots/web/components/DatePicker/DatePicker.component-test.tsx/plasma-web DatePickerRange -- prop input date, double calendar.snap.png 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/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 e38ae39fd5..e561055486 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 hasArrow.snap.png b/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-web Dropdown -- prop hasArrow.snap.png index 81915cc5ad..87131e9d91 100644 Binary files a/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-web Dropdown -- prop hasArrow.snap.png and b/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-web Dropdown -- prop hasArrow.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 77cd76e3f5..76a14792b6 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 25a0b99fe5..8ca5476b55 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 91aebacf8c..fc27acf5e8 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 1490a54ea8..c94db601c3 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 6e2231620c..fe30822cb8 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 227d52b9f3..6acde98795 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 66ac370c2d..61067d57e9 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/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Content -- clickOnContent.snap.png b/cypress/snapshots/web/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Content -- clickOnContent.snap.png index d961aa5c3c..069e58d2ba 100644 Binary files a/cypress/snapshots/web/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Content -- clickOnContent.snap.png and b/cypress/snapshots/web/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Content -- clickOnContent.snap.png differ diff --git a/cypress/snapshots/web/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Content -- setInput.snap.png b/cypress/snapshots/web/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Content -- setInput.snap.png index 45fad20148..a230637c12 100644 Binary files a/cypress/snapshots/web/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Content -- setInput.snap.png and b/cypress/snapshots/web/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Content -- setInput.snap.png differ diff --git a/cypress/snapshots/web/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Content -- setSelect.snap.png b/cypress/snapshots/web/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Content -- setSelect.snap.png index a0ffa6eb96..1de691eefc 100644 Binary files a/cypress/snapshots/web/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Content -- setSelect.snap.png and b/cypress/snapshots/web/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Content -- setSelect.snap.png differ diff --git a/cypress/snapshots/web/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Slots -- avrSlots.snap.png b/cypress/snapshots/web/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Slots -- avrSlots.snap.png index bf8d5b15e5..5296284c44 100644 Binary files a/cypress/snapshots/web/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Slots -- avrSlots.snap.png and b/cypress/snapshots/web/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Slots -- avrSlots.snap.png differ diff --git a/cypress/snapshots/web/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Slots -- maxSlots.snap.png b/cypress/snapshots/web/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Slots -- maxSlots.snap.png index 7546a5c960..de473694de 100644 Binary files a/cypress/snapshots/web/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Slots -- maxSlots.snap.png and b/cypress/snapshots/web/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Slots -- maxSlots.snap.png differ diff --git a/cypress/snapshots/web/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Slots -- minSlots.snap.png b/cypress/snapshots/web/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Slots -- minSlots.snap.png index 0ee0ee6215..b893c046c6 100644 Binary files a/cypress/snapshots/web/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Slots -- minSlots.snap.png and b/cypress/snapshots/web/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Slots -- minSlots.snap.png differ diff --git a/cypress/snapshots/web/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Styled -- _size.snap.png b/cypress/snapshots/web/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Styled -- _size.snap.png index 122aa6146b..82007ee3e5 100644 Binary files a/cypress/snapshots/web/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Styled -- _size.snap.png and b/cypress/snapshots/web/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Styled -- _size.snap.png differ diff --git a/cypress/snapshots/web/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Styled -- _view.snap.png b/cypress/snapshots/web/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Styled -- _view.snap.png index 1837695afd..f667a785ad 100644 Binary files a/cypress/snapshots/web/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Styled -- _view.snap.png and b/cypress/snapshots/web/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Styled -- _view.snap.png differ diff --git a/cypress/snapshots/web/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Styled -- _viewCurrentPage.snap.png b/cypress/snapshots/web/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Styled -- _viewCurrentPage.snap.png index 741a18904d..c1b08b1f3b 100644 Binary files a/cypress/snapshots/web/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Styled -- _viewCurrentPage.snap.png and b/cypress/snapshots/web/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Styled -- _viewCurrentPage.snap.png differ diff --git a/cypress/snapshots/web/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Styled -- default.snap.png b/cypress/snapshots/web/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Styled -- default.snap.png index 396a93fa4f..66bf51618d 100644 Binary files a/cypress/snapshots/web/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Styled -- default.snap.png and b/cypress/snapshots/web/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Styled -- default.snap.png differ diff --git a/cypress/snapshots/web/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Styled -- type.snap.png b/cypress/snapshots/web/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Styled -- type.snap.png index 0f769beb2d..9e0f18e02b 100644 Binary files a/cypress/snapshots/web/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Styled -- type.snap.png and b/cypress/snapshots/web/components/Pagination/Pagination.component-test.tsx/plasma-new-hope Pagination Styled -- type.snap.png differ diff --git a/cypress/snapshots/web/components/Price/Price.component-test.tsx/plasma-web Price -- _currency.snap.png b/cypress/snapshots/web/components/Price/Price.component-test.tsx/plasma-web Price -- _currency.snap.png new file mode 100644 index 0000000000..fd6cf96f3f Binary files /dev/null and b/cypress/snapshots/web/components/Price/Price.component-test.tsx/plasma-web Price -- _currency.snap.png differ diff --git a/cypress/snapshots/web/components/Price/Price.component-test.tsx/plasma-web Price -- _locale.snap.png b/cypress/snapshots/web/components/Price/Price.component-test.tsx/plasma-web Price -- _locale.snap.png new file mode 100644 index 0000000000..2847fa2507 Binary files /dev/null and b/cypress/snapshots/web/components/Price/Price.component-test.tsx/plasma-web Price -- _locale.snap.png differ diff --git a/cypress/snapshots/web/components/Price/Price.component-test.tsx/plasma-web Price -- _minFraction.snap.png b/cypress/snapshots/web/components/Price/Price.component-test.tsx/plasma-web Price -- _minFraction.snap.png new file mode 100644 index 0000000000..81ba28d268 Binary files /dev/null and b/cypress/snapshots/web/components/Price/Price.component-test.tsx/plasma-web Price -- _minFraction.snap.png differ diff --git a/cypress/snapshots/web/components/Price/Price.component-test.tsx/plasma-web Price -- _stroked.snap.png b/cypress/snapshots/web/components/Price/Price.component-test.tsx/plasma-web Price -- _stroked.snap.png new file mode 100644 index 0000000000..717125778b Binary files /dev/null and b/cypress/snapshots/web/components/Price/Price.component-test.tsx/plasma-web Price -- _stroked.snap.png differ diff --git a/cypress/snapshots/web/components/Price/Price.component-test.tsx/plasma-web Price -- handle two prices in a row.snap.png b/cypress/snapshots/web/components/Price/Price.component-test.tsx/plasma-web Price -- handle two prices in a row.snap.png new file mode 100644 index 0000000000..ae99fa576e Binary files /dev/null and b/cypress/snapshots/web/components/Price/Price.component-test.tsx/plasma-web Price -- handle two prices in a row.snap.png differ diff --git a/cypress/snapshots/web/components/Price/Price.component-test.tsx/plasma-web Price -- processing periodicity.snap.png b/cypress/snapshots/web/components/Price/Price.component-test.tsx/plasma-web Price -- processing periodicity.snap.png new file mode 100644 index 0000000000..3c525efcef Binary files /dev/null and b/cypress/snapshots/web/components/Price/Price.component-test.tsx/plasma-web Price -- processing periodicity.snap.png differ diff --git a/cypress/snapshots/web/components/Price/Price.component-test.tsx/plasma-web Price -- simple.snap.png b/cypress/snapshots/web/components/Price/Price.component-test.tsx/plasma-web Price -- simple.snap.png new file mode 100644 index 0000000000..03fb2c9371 Binary files /dev/null and b/cypress/snapshots/web/components/Price/Price.component-test.tsx/plasma-web Price -- simple.snap.png differ diff --git a/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-hope Select -- default.snap.png b/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-hope Select -- default.snap.png index cb0eb3b95c..b9afc27f3f 100644 Binary files a/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-hope Select -- default.snap.png and b/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-hope Select -- default.snap.png differ diff --git a/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-hope Select -- disabled.snap.png b/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-hope Select -- disabled.snap.png index 78fafedad1..02c4d8b333 100644 Binary files a/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-hope Select -- disabled.snap.png and b/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-hope Select -- disabled.snap.png differ diff --git a/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-hope Select -- handling dropdown menu height.snap.png b/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-hope Select -- handling dropdown menu height.snap.png index 22b0fb81e6..f7f448f00d 100644 Binary files a/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-hope Select -- handling dropdown menu height.snap.png and b/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-hope Select -- handling dropdown menu height.snap.png differ diff --git a/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-hope Select -- item click.snap.png b/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-hope Select -- item click.snap.png index baff5deb81..39429cf4d8 100644 Binary files a/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-hope Select -- item click.snap.png and b/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-hope Select -- item click.snap.png differ diff --git a/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-hope Select -- multiselect.snap.png b/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-hope Select -- multiselect.snap.png index 84e6ba3c7f..a904fca383 100644 Binary files a/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-hope Select -- multiselect.snap.png and b/cypress/snapshots/web/components/Select/Select.component-test.tsx/plasma-hope Select -- multiselect.snap.png differ diff --git a/cypress/snapshots/web/components/SelectNew/Select.component-test.tsx/plasma-web SelectNew -- basic logic.snap.png b/cypress/snapshots/web/components/SelectNew/Select.component-test.tsx/plasma-web SelectNew -- basic logic.snap.png new file mode 100644 index 0000000000..581974f16d Binary files /dev/null and b/cypress/snapshots/web/components/SelectNew/Select.component-test.tsx/plasma-web SelectNew -- basic logic.snap.png differ diff --git a/cypress/snapshots/web/components/SelectNew/Select.component-test.tsx/plasma-web SelectNew -- default.snap.png b/cypress/snapshots/web/components/SelectNew/Select.component-test.tsx/plasma-web SelectNew -- default.snap.png new file mode 100644 index 0000000000..5374bf3c34 Binary files /dev/null and b/cypress/snapshots/web/components/SelectNew/Select.component-test.tsx/plasma-web SelectNew -- default.snap.png differ diff --git a/cypress/snapshots/web/components/SelectNew/Select.component-test.tsx/plasma-web SelectNew -- prop chipView accent.snap.png b/cypress/snapshots/web/components/SelectNew/Select.component-test.tsx/plasma-web SelectNew -- prop chipView accent.snap.png new file mode 100644 index 0000000000..56be607f03 Binary files /dev/null and b/cypress/snapshots/web/components/SelectNew/Select.component-test.tsx/plasma-web SelectNew -- prop chipView accent.snap.png differ diff --git a/cypress/snapshots/web/components/SelectNew/Select.component-test.tsx/plasma-web SelectNew -- prop chipView secondary.snap.png b/cypress/snapshots/web/components/SelectNew/Select.component-test.tsx/plasma-web SelectNew -- prop chipView secondary.snap.png new file mode 100644 index 0000000000..5b2ef1e94e Binary files /dev/null and b/cypress/snapshots/web/components/SelectNew/Select.component-test.tsx/plasma-web SelectNew -- prop chipView secondary.snap.png differ diff --git a/cypress/snapshots/web/components/SelectNew/Select.component-test.tsx/plasma-web SelectNew -- prop contentLeft.snap.png b/cypress/snapshots/web/components/SelectNew/Select.component-test.tsx/plasma-web SelectNew -- prop contentLeft.snap.png new file mode 100644 index 0000000000..f134ae9eea Binary files /dev/null and b/cypress/snapshots/web/components/SelectNew/Select.component-test.tsx/plasma-web SelectNew -- prop contentLeft.snap.png differ diff --git a/cypress/snapshots/web/components/SelectNew/Select.component-test.tsx/plasma-web SelectNew -- prop isTargetAmount.snap.png b/cypress/snapshots/web/components/SelectNew/Select.component-test.tsx/plasma-web SelectNew -- prop isTargetAmount.snap.png new file mode 100644 index 0000000000..e97c926118 Binary files /dev/null and b/cypress/snapshots/web/components/SelectNew/Select.component-test.tsx/plasma-web SelectNew -- prop isTargetAmount.snap.png differ diff --git a/cypress/snapshots/web/components/SelectNew/Select.component-test.tsx/plasma-web SelectNew -- prop labelPlacement.snap.png b/cypress/snapshots/web/components/SelectNew/Select.component-test.tsx/plasma-web SelectNew -- prop labelPlacement.snap.png new file mode 100644 index 0000000000..525a26e7ec Binary files /dev/null and b/cypress/snapshots/web/components/SelectNew/Select.component-test.tsx/plasma-web SelectNew -- prop labelPlacement.snap.png differ diff --git a/cypress/snapshots/web/components/SelectNew/Select.component-test.tsx/plasma-web SelectNew -- prop size l.snap.png b/cypress/snapshots/web/components/SelectNew/Select.component-test.tsx/plasma-web SelectNew -- prop size l.snap.png new file mode 100644 index 0000000000..e1b182de40 Binary files /dev/null and b/cypress/snapshots/web/components/SelectNew/Select.component-test.tsx/plasma-web SelectNew -- prop size l.snap.png differ diff --git a/cypress/snapshots/web/components/SelectNew/Select.component-test.tsx/plasma-web SelectNew -- prop size m.snap.png b/cypress/snapshots/web/components/SelectNew/Select.component-test.tsx/plasma-web SelectNew -- prop size m.snap.png new file mode 100644 index 0000000000..5374bf3c34 Binary files /dev/null and b/cypress/snapshots/web/components/SelectNew/Select.component-test.tsx/plasma-web SelectNew -- prop size m.snap.png differ diff --git a/cypress/snapshots/web/components/SelectNew/Select.component-test.tsx/plasma-web SelectNew -- prop size s.snap.png b/cypress/snapshots/web/components/SelectNew/Select.component-test.tsx/plasma-web SelectNew -- prop size s.snap.png new file mode 100644 index 0000000000..a14797c055 Binary files /dev/null and b/cypress/snapshots/web/components/SelectNew/Select.component-test.tsx/plasma-web SelectNew -- prop size s.snap.png differ diff --git a/cypress/snapshots/web/components/SelectNew/Select.component-test.tsx/plasma-web SelectNew -- prop size xs.snap.png b/cypress/snapshots/web/components/SelectNew/Select.component-test.tsx/plasma-web SelectNew -- prop size xs.snap.png new file mode 100644 index 0000000000..f9898005ea Binary files /dev/null and b/cypress/snapshots/web/components/SelectNew/Select.component-test.tsx/plasma-web SelectNew -- prop size xs.snap.png differ diff --git a/cypress/snapshots/web/components/Typography/Typography.component-test.tsx/plasma-web Typography -- with color.snap.png b/cypress/snapshots/web/components/Typography/Typography.component-test.tsx/plasma-web Typography -- with color.snap.png new file mode 100644 index 0000000000..d9e5b57afa Binary files /dev/null and b/cypress/snapshots/web/components/Typography/Typography.component-test.tsx/plasma-web Typography -- with color.snap.png differ diff --git a/cypress/snapshots/web/components/Typography/TypographyBase.component-test.tsx/plasma-core Typography -- Typography with color.snap.png b/cypress/snapshots/web/components/Typography/TypographyBase.component-test.tsx/plasma-core Typography -- Typography with color.snap.png new file mode 100644 index 0000000000..658bb18d5c Binary files /dev/null and b/cypress/snapshots/web/components/Typography/TypographyBase.component-test.tsx/plasma-core Typography -- Typography with color.snap.png differ diff --git a/packages/caldera-online/api/caldera-online.api.md b/packages/caldera-online/api/caldera-online.api.md index bf664749c9..d87bf01d02 100644 --- a/packages/caldera-online/api/caldera-online.api.md +++ b/packages/caldera-online/api/caldera-online.api.md @@ -58,6 +58,7 @@ import { PopupInfo } from '@salutejs/plasma-new-hope/styled-components'; import { PopupPlacement } from '@salutejs/plasma-new-hope/styled-components'; import { PopupProps } from '@salutejs/plasma-new-hope/styled-components'; import { PopupProvider } from '@salutejs/plasma-new-hope/styled-components'; +import { Portal } from '@salutejs/plasma-new-hope/styled-components'; import { PortalProps } 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'; @@ -88,7 +89,6 @@ import { ToastRole } from '@salutejs/plasma-new-hope/styled-components'; import { usePopupContext } from '@salutejs/plasma-new-hope/styled-components'; import { useSegment } from '@salutejs/plasma-new-hope/styled-components'; import { useToast } from '@salutejs/plasma-new-hope/styled-components'; -import { Variants } from '@salutejs/plasma-new-hope/types/engines/types'; export { addFocus } @@ -99,6 +99,7 @@ l: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps & BoldProps & HTMLAttributes & RefAttributes>; export { bodyL } @@ -112,6 +113,7 @@ m: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps & BoldProps & HTMLAttributes & RefAttributes>; export { bodyM } @@ -125,6 +127,7 @@ s: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps & BoldProps & HTMLAttributes & RefAttributes>; export { bodyS } @@ -138,6 +141,7 @@ xs: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps & BoldProps & HTMLAttributes & RefAttributes>; export { bodyXS } @@ -151,6 +155,7 @@ xxs: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps & BoldProps & HTMLAttributes & RefAttributes>; export { bodyXXS } @@ -295,6 +300,7 @@ l: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps & BoldProps & HTMLAttributes & RefAttributes>; export { dsplL } @@ -308,6 +314,7 @@ m: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps & BoldProps & HTMLAttributes & RefAttributes>; export { dsplM } @@ -321,6 +328,7 @@ s: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps & BoldProps & HTMLAttributes & RefAttributes>; export { dsplS } @@ -334,6 +342,7 @@ h1: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps & BoldProps & HTMLAttributes & RefAttributes>; export { h1 } @@ -347,6 +356,7 @@ h2: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps & BoldProps & HTMLAttributes & RefAttributes>; export { h2 } @@ -360,6 +370,7 @@ h3: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps & BoldProps & HTMLAttributes & RefAttributes>; export { h3 } @@ -373,6 +384,7 @@ h4: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps & BoldProps & HTMLAttributes & RefAttributes>; export { h4 } @@ -386,6 +398,7 @@ h5: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps & BoldProps & HTMLAttributes & RefAttributes>; export { h5 } @@ -441,8 +454,7 @@ export { PopupProps } export { PopupProvider } -// @public (undocumented) -export const Portal: FunctionComponent & PortalProps & RefAttributes>; +export { Portal } export { PortalProps } @@ -636,6 +648,7 @@ l: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps & BoldProps & HTMLAttributes & RefAttributes>; export { textL } @@ -649,6 +662,7 @@ m: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps & BoldProps & HTMLAttributes & RefAttributes>; export { textM } @@ -662,6 +676,7 @@ s: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps & BoldProps & HTMLAttributes & RefAttributes>; export { textS } @@ -675,6 +690,7 @@ xs: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps & BoldProps & HTMLAttributes & RefAttributes>; export { textXS } diff --git a/packages/caldera-online/package-lock.json b/packages/caldera-online/package-lock.json index 39bb9906f8..457ad31bdd 100644 --- a/packages/caldera-online/package-lock.json +++ b/packages/caldera-online/package-lock.json @@ -1,16 +1,16 @@ { "name": "@salutejs/caldera-online", - "version": "0.65.0", + "version": "0.71.0-dev.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@salutejs/caldera-online", - "version": "0.65.0", + "version": "0.71.0-dev.0", "license": "MIT", "dependencies": { "@salutejs/caldera-online-themes": "0.13.0", - "@salutejs/plasma-new-hope": "0.105.0" + "@salutejs/plasma-new-hope": "0.111.0-dev.0" }, "devDependencies": { "@babel/cli": "7.24.1", @@ -22,9 +22,9 @@ "@babel/preset-typescript": "7.24.1", "@microsoft/api-extractor": "7.38.3", "@salutejs/plasma-colors": "0.13.0", - "@salutejs/plasma-core": "1.162.0", - "@salutejs/plasma-cy-utils": "0.94.0", - "@salutejs/plasma-sb-utils": "0.160.0", + "@salutejs/plasma-core": "1.163.1-dev.0", + "@salutejs/plasma-cy-utils": "0.95.1-dev.0", + "@salutejs/plasma-sb-utils": "0.161.1-dev.0", "@storybook/addon-docs": "7.6.17", "@storybook/addon-essentials": "7.6.17", "@storybook/addons": "7.6.17", @@ -5205,9 +5205,9 @@ "dev": true }, "node_modules/@salutejs/plasma-core": { - "version": "1.162.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-core/-/plasma-core-1.162.0.tgz", - "integrity": "sha512-+RmyuJb58tuGgbjvbcby5jjFG5VpZLyD2xTD7JrQaKyI355wYXS6vCXWhMH5JgevOBSNMWfEkRvDuL+YfW/r9w==", + "version": "1.163.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-core/-/plasma-core-1.163.1-dev.0.tgz", + "integrity": "sha512-KHf3PJW6X+aBnOEW6UqKGiyOueEDsFy+3tNT1KAkkPC1ZL3n/On3hmVaDrpzc7sSD+slGdpqQLAvYjR28ZgG0g==", "dependencies": { "@popperjs/core": "2.9.2", "@salutejs/plasma-typo": "0.40.0", @@ -5237,9 +5237,9 @@ } }, "node_modules/@salutejs/plasma-cy-utils": { - "version": "0.94.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-cy-utils/-/plasma-cy-utils-0.94.0.tgz", - "integrity": "sha512-VmyuJHXoV2BmWDrfRpJC7RE7A4FaWoKO5YZmrphQm7bTECvhdvS19V8h/POzG/qT6d2soOX+Bs20MmnPazPy9g==", + "version": "0.95.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-cy-utils/-/plasma-cy-utils-0.95.1-dev.0.tgz", + "integrity": "sha512-wD+TF1KODuJYB/GOKC3QTf42qt6jzNL+zhUMJJTuNU7a7JnPmRxXXJa+wGqbwSTtZvpLwO6qRs3Qf47vqZl2jg==", "dev": true, "peerDependencies": { "react": ">=16.13.1", @@ -5248,14 +5248,14 @@ } }, "node_modules/@salutejs/plasma-new-hope": { - "version": "0.105.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-new-hope/-/plasma-new-hope-0.105.0.tgz", - "integrity": "sha512-Y1BmxjgqSqoXwLBJYFapDGeNSl1nXXiN2B1Pxo+gqAPr8DpBHbGV+6Y2GgrXRrJJXGQL9mpuJubVXF0Hs/OUfA==", + "version": "0.111.0-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-new-hope/-/plasma-new-hope-0.111.0-dev.0.tgz", + "integrity": "sha512-S1wUVrDZfnz+DbOG0lxZfUkRtAfAkaAZiDfHWNE/+pPGqEZIEVzmvJoGA6hHD2fIX5m+v1Uh7O5bVX7BAcE8iQ==", "dependencies": { "@linaria/core": "5.0.2", "@linaria/react": "5.0.3", "@popperjs/core": "2.11.8", - "@salutejs/plasma-core": "1.162.0", + "@salutejs/plasma-core": "1.163.1-dev.0", "dayjs": "1.11.11", "focus-visible": "5.2.0", "lodash.throttle": "4.1.1", @@ -5292,13 +5292,13 @@ } }, "node_modules/@salutejs/plasma-sb-utils": { - "version": "0.160.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-sb-utils/-/plasma-sb-utils-0.160.0.tgz", - "integrity": "sha512-+9HfFOprKcd072koF0+FNyYFXATCxjDgNtZfonBhn04o8T80ts58PWYylMhzCr1uZvenszqYDEffIaCM+r5LTQ==", + "version": "0.161.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-sb-utils/-/plasma-sb-utils-0.161.1-dev.0.tgz", + "integrity": "sha512-ft4Owu34dlhr384S2EeSIfpCTW78RwvBsjf/VjiEcnESYnF7wuPwD8UK5euCHJW7IXGaxAAPLTY/6cObiL26VQ==", "dev": true, "dependencies": { "@salutejs/plasma-colors": "0.13.0", - "@salutejs/plasma-core": "1.162.0", + "@salutejs/plasma-core": "1.163.1-dev.0", "param-case": "^3.0.4" }, "peerDependencies": { @@ -20828,9 +20828,9 @@ "dev": true }, "@salutejs/plasma-core": { - "version": "1.162.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-core/-/plasma-core-1.162.0.tgz", - "integrity": "sha512-+RmyuJb58tuGgbjvbcby5jjFG5VpZLyD2xTD7JrQaKyI355wYXS6vCXWhMH5JgevOBSNMWfEkRvDuL+YfW/r9w==", + "version": "1.163.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-core/-/plasma-core-1.163.1-dev.0.tgz", + "integrity": "sha512-KHf3PJW6X+aBnOEW6UqKGiyOueEDsFy+3tNT1KAkkPC1ZL3n/On3hmVaDrpzc7sSD+slGdpqQLAvYjR28ZgG0g==", "requires": { "@popperjs/core": "2.9.2", "@salutejs/plasma-typo": "0.40.0", @@ -20852,20 +20852,20 @@ } }, "@salutejs/plasma-cy-utils": { - "version": "0.94.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-cy-utils/-/plasma-cy-utils-0.94.0.tgz", - "integrity": "sha512-VmyuJHXoV2BmWDrfRpJC7RE7A4FaWoKO5YZmrphQm7bTECvhdvS19V8h/POzG/qT6d2soOX+Bs20MmnPazPy9g==", + "version": "0.95.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-cy-utils/-/plasma-cy-utils-0.95.1-dev.0.tgz", + "integrity": "sha512-wD+TF1KODuJYB/GOKC3QTf42qt6jzNL+zhUMJJTuNU7a7JnPmRxXXJa+wGqbwSTtZvpLwO6qRs3Qf47vqZl2jg==", "dev": true }, "@salutejs/plasma-new-hope": { - "version": "0.105.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-new-hope/-/plasma-new-hope-0.105.0.tgz", - "integrity": "sha512-Y1BmxjgqSqoXwLBJYFapDGeNSl1nXXiN2B1Pxo+gqAPr8DpBHbGV+6Y2GgrXRrJJXGQL9mpuJubVXF0Hs/OUfA==", + "version": "0.111.0-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-new-hope/-/plasma-new-hope-0.111.0-dev.0.tgz", + "integrity": "sha512-S1wUVrDZfnz+DbOG0lxZfUkRtAfAkaAZiDfHWNE/+pPGqEZIEVzmvJoGA6hHD2fIX5m+v1Uh7O5bVX7BAcE8iQ==", "requires": { "@linaria/core": "5.0.2", "@linaria/react": "5.0.3", "@popperjs/core": "2.11.8", - "@salutejs/plasma-core": "1.162.0", + "@salutejs/plasma-core": "1.163.1-dev.0", "dayjs": "1.11.11", "focus-visible": "5.2.0", "lodash.throttle": "4.1.1", @@ -20891,13 +20891,13 @@ } }, "@salutejs/plasma-sb-utils": { - "version": "0.160.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-sb-utils/-/plasma-sb-utils-0.160.0.tgz", - "integrity": "sha512-+9HfFOprKcd072koF0+FNyYFXATCxjDgNtZfonBhn04o8T80ts58PWYylMhzCr1uZvenszqYDEffIaCM+r5LTQ==", + "version": "0.161.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-sb-utils/-/plasma-sb-utils-0.161.1-dev.0.tgz", + "integrity": "sha512-ft4Owu34dlhr384S2EeSIfpCTW78RwvBsjf/VjiEcnESYnF7wuPwD8UK5euCHJW7IXGaxAAPLTY/6cObiL26VQ==", "dev": true, "requires": { "@salutejs/plasma-colors": "0.13.0", - "@salutejs/plasma-core": "1.162.0", + "@salutejs/plasma-core": "1.163.1-dev.0", "param-case": "^3.0.4" } }, diff --git a/packages/caldera-online/package.json b/packages/caldera-online/package.json index 80f6bd78a2..2aa67a667c 100644 --- a/packages/caldera-online/package.json +++ b/packages/caldera-online/package.json @@ -1,6 +1,6 @@ { "name": "@salutejs/caldera-online", - "version": "0.65.0", + "version": "0.71.0-dev.0", "description": "Salute Design System / React UI kit for Caldera-online web applications", "author": "Salute Frontend Team ", "license": "MIT", @@ -20,7 +20,7 @@ }, "dependencies": { "@salutejs/caldera-online-themes": "0.13.0", - "@salutejs/plasma-new-hope": "0.105.0" + "@salutejs/plasma-new-hope": "0.111.0-dev.0" }, "peerDependencies": { "react": ">=16.13.1", @@ -37,9 +37,9 @@ "@babel/preset-typescript": "7.24.1", "@microsoft/api-extractor": "7.38.3", "@salutejs/plasma-colors": "0.13.0", - "@salutejs/plasma-core": "1.162.0", - "@salutejs/plasma-cy-utils": "0.94.0", - "@salutejs/plasma-sb-utils": "0.160.0", + "@salutejs/plasma-core": "1.163.1-dev.0", + "@salutejs/plasma-cy-utils": "0.95.1-dev.0", + "@salutejs/plasma-sb-utils": "0.161.1-dev.0", "@storybook/addon-docs": "7.6.17", "@storybook/addon-essentials": "7.6.17", "@storybook/addons": "7.6.17", @@ -95,4 +95,4 @@ "Fanil Zubairov" ], "sideEffects": false -} +} \ No newline at end of file diff --git a/packages/caldera-online/src/components/Dropdown/Dropdown.config.ts b/packages/caldera-online/src/components/Dropdown/Dropdown.config.ts index ae9e0f998a..fddc8a8387 100644 --- a/packages/caldera-online/src/components/Dropdown/Dropdown.config.ts +++ b/packages/caldera-online/src/components/Dropdown/Dropdown.config.ts @@ -93,7 +93,7 @@ export const config = { ${dropdownTokens.disabledOpacity}: 0.4; ${dropdownTokens.focusColor}: var(--surface-accent); ${dropdownTokens.background}: var(--surface-solid-card); - ${dropdownTokens.boxShadow}: var(--shadow-down-soft-s); + ${dropdownTokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${dropdownTokens.disclosureIconColor}: var(--text-secondary); ${dropdownTokens.itemBackground}: var(--plasma-colors-transparent); ${dropdownTokens.itemBackgroundHover}: var(--surface-transparent-secondary); diff --git a/packages/caldera-online/src/components/Portal/Portal.stories.tsx b/packages/caldera-online/src/components/Portal/Portal.stories.tsx index 73b9db5f28..b2ae0c884c 100644 --- a/packages/caldera-online/src/components/Portal/Portal.stories.tsx +++ b/packages/caldera-online/src/components/Portal/Portal.stories.tsx @@ -7,7 +7,7 @@ import styled from 'styled-components'; import { Button } from '../Button/Button'; import { BodyM } from '../Typography'; -import { Portal } from './Portal'; +import { Portal } from '.'; const meta: Meta = { title: 'Controls/Portal', diff --git a/packages/caldera-online/src/components/Portal/Portal.tsx b/packages/caldera-online/src/components/Portal/Portal.tsx deleted file mode 100644 index 60ea33d97a..0000000000 --- a/packages/caldera-online/src/components/Portal/Portal.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { portalConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components'; - -const mergedConfig = mergeConfig(portalConfig); -const PortalComponent = component(mergedConfig); - -/* - * Вспомогательный компонент. Используется в Popup, Popover. - * Представляет собой ReactDOM.createPortal() в форме компонента. - */ -export const Portal = PortalComponent; diff --git a/packages/caldera-online/src/components/Portal/index.ts b/packages/caldera-online/src/components/Portal/index.ts index 922be8e235..2818aae9fc 100644 --- a/packages/caldera-online/src/components/Portal/index.ts +++ b/packages/caldera-online/src/components/Portal/index.ts @@ -1,3 +1,3 @@ -export { Portal } from './Portal'; +export { Portal } from '@salutejs/plasma-new-hope/styled-components'; export type { PortalProps } from '@salutejs/plasma-new-hope/styled-components'; diff --git a/packages/caldera-online/src/components/Typography/Typography.stories.tsx b/packages/caldera-online/src/components/Typography/Typography.stories.tsx index 6c94a27163..e50708df84 100644 --- a/packages/caldera-online/src/components/Typography/Typography.stories.tsx +++ b/packages/caldera-online/src/components/Typography/Typography.stories.tsx @@ -27,6 +27,11 @@ const meta: Meta = { component: DsplL, argTypes: { ...disableProps(['size']), + color: { + control: { + type: 'color', + }, + }, }, decorators: [InSpacingDecorator], }; diff --git a/packages/plasma-asdk/api/plasma-asdk.api.md b/packages/plasma-asdk/api/plasma-asdk.api.md index 4bf2f1c4d9..f5403a5c8c 100644 --- a/packages/plasma-asdk/api/plasma-asdk.api.md +++ b/packages/plasma-asdk/api/plasma-asdk.api.md @@ -37,6 +37,7 @@ body1: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -46,6 +47,7 @@ body2: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -55,6 +57,7 @@ l: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -64,6 +67,7 @@ m: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -73,6 +77,7 @@ s: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -82,6 +87,7 @@ xs: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -91,6 +97,7 @@ xxs: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps & BoldProps & HTMLAttributes & RefAttributes>; // @public @@ -229,6 +236,7 @@ l: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -238,6 +246,7 @@ m: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -247,6 +256,7 @@ s: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -270,6 +280,7 @@ h1: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -279,6 +290,7 @@ h2: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -288,6 +300,7 @@ h3: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -297,6 +310,7 @@ h4: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -306,6 +320,7 @@ h5: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -468,6 +483,7 @@ l: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -477,6 +493,7 @@ m: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -486,6 +503,7 @@ s: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -495,6 +513,7 @@ xs: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) diff --git a/packages/plasma-asdk/package-lock.json b/packages/plasma-asdk/package-lock.json index 10e0af1896..7ad5b36e2a 100644 --- a/packages/plasma-asdk/package-lock.json +++ b/packages/plasma-asdk/package-lock.json @@ -1,16 +1,16 @@ { "name": "@salutejs/plasma-asdk", - "version": "0.108.0", + "version": "0.114.0-dev.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@salutejs/plasma-asdk", - "version": "0.108.0", + "version": "0.114.0-dev.0", "license": "MIT", "dependencies": { - "@salutejs/plasma-new-hope": "0.105.0", - "@salutejs/plasma-tokens": "1.83.0", + "@salutejs/plasma-new-hope": "0.111.0-dev.0", + "@salutejs/plasma-tokens": "1.84.0-dev.0", "@salutejs/plasma-tokens-b2b": "1.41.0", "@salutejs/plasma-typo": "0.40.0" }, @@ -24,10 +24,10 @@ "@babel/preset-typescript": "7.24.1", "@microsoft/api-extractor": "7.38.3", "@salutejs/plasma-colors": "0.13.0", - "@salutejs/plasma-core": "1.162.0", - "@salutejs/plasma-cy-utils": "0.94.0", + "@salutejs/plasma-core": "1.163.1-dev.0", + "@salutejs/plasma-cy-utils": "0.95.1-dev.0", "@salutejs/plasma-icons": "1.199.0", - "@salutejs/plasma-sb-utils": "0.160.0", + "@salutejs/plasma-sb-utils": "0.161.1-dev.0", "@storybook/addon-docs": "7.6.17", "@storybook/addon-essentials": "7.6.17", "@storybook/addons": "7.6.17", @@ -4352,9 +4352,9 @@ "dev": true }, "node_modules/@salutejs/plasma-core": { - "version": "1.162.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-core/-/plasma-core-1.162.0.tgz", - "integrity": "sha512-+RmyuJb58tuGgbjvbcby5jjFG5VpZLyD2xTD7JrQaKyI355wYXS6vCXWhMH5JgevOBSNMWfEkRvDuL+YfW/r9w==", + "version": "1.163.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-core/-/plasma-core-1.163.1-dev.0.tgz", + "integrity": "sha512-KHf3PJW6X+aBnOEW6UqKGiyOueEDsFy+3tNT1KAkkPC1ZL3n/On3hmVaDrpzc7sSD+slGdpqQLAvYjR28ZgG0g==", "dependencies": { "@popperjs/core": "2.9.2", "@salutejs/plasma-typo": "0.40.0", @@ -4379,9 +4379,9 @@ } }, "node_modules/@salutejs/plasma-cy-utils": { - "version": "0.94.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-cy-utils/-/plasma-cy-utils-0.94.0.tgz", - "integrity": "sha512-VmyuJHXoV2BmWDrfRpJC7RE7A4FaWoKO5YZmrphQm7bTECvhdvS19V8h/POzG/qT6d2soOX+Bs20MmnPazPy9g==", + "version": "0.95.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-cy-utils/-/plasma-cy-utils-0.95.1-dev.0.tgz", + "integrity": "sha512-wD+TF1KODuJYB/GOKC3QTf42qt6jzNL+zhUMJJTuNU7a7JnPmRxXXJa+wGqbwSTtZvpLwO6qRs3Qf47vqZl2jg==", "dev": true, "peerDependencies": { "react": ">=16.13.1", @@ -4401,14 +4401,14 @@ } }, "node_modules/@salutejs/plasma-new-hope": { - "version": "0.105.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-new-hope/-/plasma-new-hope-0.105.0.tgz", - "integrity": "sha512-Y1BmxjgqSqoXwLBJYFapDGeNSl1nXXiN2B1Pxo+gqAPr8DpBHbGV+6Y2GgrXRrJJXGQL9mpuJubVXF0Hs/OUfA==", + "version": "0.111.0-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-new-hope/-/plasma-new-hope-0.111.0-dev.0.tgz", + "integrity": "sha512-S1wUVrDZfnz+DbOG0lxZfUkRtAfAkaAZiDfHWNE/+pPGqEZIEVzmvJoGA6hHD2fIX5m+v1Uh7O5bVX7BAcE8iQ==", "dependencies": { "@linaria/core": "5.0.2", "@linaria/react": "5.0.3", "@popperjs/core": "2.11.8", - "@salutejs/plasma-core": "1.162.0", + "@salutejs/plasma-core": "1.163.1-dev.0", "dayjs": "1.11.11", "focus-visible": "5.2.0", "lodash.throttle": "4.1.1", @@ -4422,13 +4422,13 @@ } }, "node_modules/@salutejs/plasma-sb-utils": { - "version": "0.160.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-sb-utils/-/plasma-sb-utils-0.160.0.tgz", - "integrity": "sha512-+9HfFOprKcd072koF0+FNyYFXATCxjDgNtZfonBhn04o8T80ts58PWYylMhzCr1uZvenszqYDEffIaCM+r5LTQ==", + "version": "0.161.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-sb-utils/-/plasma-sb-utils-0.161.1-dev.0.tgz", + "integrity": "sha512-ft4Owu34dlhr384S2EeSIfpCTW78RwvBsjf/VjiEcnESYnF7wuPwD8UK5euCHJW7IXGaxAAPLTY/6cObiL26VQ==", "dev": true, "dependencies": { "@salutejs/plasma-colors": "0.13.0", - "@salutejs/plasma-core": "1.162.0", + "@salutejs/plasma-core": "1.163.1-dev.0", "param-case": "^3.0.4" }, "peerDependencies": { @@ -4438,9 +4438,9 @@ } }, "node_modules/@salutejs/plasma-tokens": { - "version": "1.83.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-tokens/-/plasma-tokens-1.83.0.tgz", - "integrity": "sha512-k8AgoXKvigigcrqkEmvy3ztDleCt4zeEqzhIPuCyl2CuSSAnhF8Fs3oT1fV7COSoR9BUQpdfjTZEKQ9/b3tZCA==", + "version": "1.84.0-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-tokens/-/plasma-tokens-1.84.0-dev.0.tgz", + "integrity": "sha512-1r66tfwU24rdIEumO+a5CMxpWjp9LGX0MIaVCxITk/3FfY854BXlPywVKGxoAlFwcTku5VliKpQrbBxndLldMQ==", "peerDependencies": { "styled-components": "^5.1.1" } @@ -17024,9 +17024,9 @@ "dev": true }, "@salutejs/plasma-core": { - "version": "1.162.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-core/-/plasma-core-1.162.0.tgz", - "integrity": "sha512-+RmyuJb58tuGgbjvbcby5jjFG5VpZLyD2xTD7JrQaKyI355wYXS6vCXWhMH5JgevOBSNMWfEkRvDuL+YfW/r9w==", + "version": "1.163.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-core/-/plasma-core-1.163.1-dev.0.tgz", + "integrity": "sha512-KHf3PJW6X+aBnOEW6UqKGiyOueEDsFy+3tNT1KAkkPC1ZL3n/On3hmVaDrpzc7sSD+slGdpqQLAvYjR28ZgG0g==", "requires": { "@popperjs/core": "2.9.2", "@salutejs/plasma-typo": "0.40.0", @@ -17044,9 +17044,9 @@ } }, "@salutejs/plasma-cy-utils": { - "version": "0.94.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-cy-utils/-/plasma-cy-utils-0.94.0.tgz", - "integrity": "sha512-VmyuJHXoV2BmWDrfRpJC7RE7A4FaWoKO5YZmrphQm7bTECvhdvS19V8h/POzG/qT6d2soOX+Bs20MmnPazPy9g==", + "version": "0.95.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-cy-utils/-/plasma-cy-utils-0.95.1-dev.0.tgz", + "integrity": "sha512-wD+TF1KODuJYB/GOKC3QTf42qt6jzNL+zhUMJJTuNU7a7JnPmRxXXJa+wGqbwSTtZvpLwO6qRs3Qf47vqZl2jg==", "dev": true }, "@salutejs/plasma-icons": { @@ -17056,14 +17056,14 @@ "dev": true }, "@salutejs/plasma-new-hope": { - "version": "0.105.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-new-hope/-/plasma-new-hope-0.105.0.tgz", - "integrity": "sha512-Y1BmxjgqSqoXwLBJYFapDGeNSl1nXXiN2B1Pxo+gqAPr8DpBHbGV+6Y2GgrXRrJJXGQL9mpuJubVXF0Hs/OUfA==", + "version": "0.111.0-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-new-hope/-/plasma-new-hope-0.111.0-dev.0.tgz", + "integrity": "sha512-S1wUVrDZfnz+DbOG0lxZfUkRtAfAkaAZiDfHWNE/+pPGqEZIEVzmvJoGA6hHD2fIX5m+v1Uh7O5bVX7BAcE8iQ==", "requires": { "@linaria/core": "5.0.2", "@linaria/react": "5.0.3", "@popperjs/core": "2.11.8", - "@salutejs/plasma-core": "1.162.0", + "@salutejs/plasma-core": "1.163.1-dev.0", "dayjs": "1.11.11", "focus-visible": "5.2.0", "lodash.throttle": "4.1.1", @@ -17073,20 +17073,20 @@ } }, "@salutejs/plasma-sb-utils": { - "version": "0.160.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-sb-utils/-/plasma-sb-utils-0.160.0.tgz", - "integrity": "sha512-+9HfFOprKcd072koF0+FNyYFXATCxjDgNtZfonBhn04o8T80ts58PWYylMhzCr1uZvenszqYDEffIaCM+r5LTQ==", + "version": "0.161.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-sb-utils/-/plasma-sb-utils-0.161.1-dev.0.tgz", + "integrity": "sha512-ft4Owu34dlhr384S2EeSIfpCTW78RwvBsjf/VjiEcnESYnF7wuPwD8UK5euCHJW7IXGaxAAPLTY/6cObiL26VQ==", "dev": true, "requires": { "@salutejs/plasma-colors": "0.13.0", - "@salutejs/plasma-core": "1.162.0", + "@salutejs/plasma-core": "1.163.1-dev.0", "param-case": "^3.0.4" } }, "@salutejs/plasma-tokens": { - "version": "1.83.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-tokens/-/plasma-tokens-1.83.0.tgz", - "integrity": "sha512-k8AgoXKvigigcrqkEmvy3ztDleCt4zeEqzhIPuCyl2CuSSAnhF8Fs3oT1fV7COSoR9BUQpdfjTZEKQ9/b3tZCA==" + "version": "1.84.0-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-tokens/-/plasma-tokens-1.84.0-dev.0.tgz", + "integrity": "sha512-1r66tfwU24rdIEumO+a5CMxpWjp9LGX0MIaVCxITk/3FfY854BXlPywVKGxoAlFwcTku5VliKpQrbBxndLldMQ==" }, "@salutejs/plasma-tokens-b2b": { "version": "1.41.0", diff --git a/packages/plasma-asdk/package.json b/packages/plasma-asdk/package.json index e3134f4694..6361a4cfc6 100644 --- a/packages/plasma-asdk/package.json +++ b/packages/plasma-asdk/package.json @@ -1,6 +1,6 @@ { "name": "@salutejs/plasma-asdk", - "version": "0.108.0", + "version": "0.114.0-dev.0", "description": "Salute Design System / React UI kit for Assistant web applications", "author": "Salute Frontend Team ", "license": "MIT", @@ -19,8 +19,8 @@ "directory": "packages/plasma-asdk" }, "dependencies": { - "@salutejs/plasma-new-hope": "0.105.0", - "@salutejs/plasma-tokens": "1.83.0", + "@salutejs/plasma-new-hope": "0.111.0-dev.0", + "@salutejs/plasma-tokens": "1.84.0-dev.0", "@salutejs/plasma-tokens-b2b": "1.41.0", "@salutejs/plasma-typo": "0.40.0" }, @@ -39,10 +39,10 @@ "@babel/preset-typescript": "7.24.1", "@microsoft/api-extractor": "7.38.3", "@salutejs/plasma-colors": "0.13.0", - "@salutejs/plasma-core": "1.162.0", - "@salutejs/plasma-cy-utils": "0.94.0", + "@salutejs/plasma-core": "1.163.1-dev.0", + "@salutejs/plasma-cy-utils": "0.95.1-dev.0", "@salutejs/plasma-icons": "1.199.0", - "@salutejs/plasma-sb-utils": "0.160.0", + "@salutejs/plasma-sb-utils": "0.161.1-dev.0", "@storybook/addon-docs": "7.6.17", "@storybook/addon-essentials": "7.6.17", "@storybook/addons": "7.6.17", @@ -98,4 +98,4 @@ "Fanil Zubairov" ], "sideEffects": false -} +} \ No newline at end of file diff --git a/packages/plasma-asdk/src/components/Typography/Typography.stories.tsx b/packages/plasma-asdk/src/components/Typography/Typography.stories.tsx index 17531289c9..5a1764dff5 100644 --- a/packages/plasma-asdk/src/components/Typography/Typography.stories.tsx +++ b/packages/plasma-asdk/src/components/Typography/Typography.stories.tsx @@ -43,6 +43,11 @@ const meta: Meta = { component: DsplL, argTypes: { ...disableProps(['size']), + color: { + control: { + type: 'color', + }, + }, }, args: { breakWord: false, diff --git a/packages/plasma-b2c/api/plasma-b2c.api.md b/packages/plasma-b2c/api/plasma-b2c.api.md index 1ac077d4b7..64577f5184 100644 --- a/packages/plasma-b2c/api/plasma-b2c.api.md +++ b/packages/plasma-b2c/api/plasma-b2c.api.md @@ -38,6 +38,8 @@ import { BadgeProps } from '@salutejs/plasma-new-hope/styled-components'; import { BaseboxProps } from '@salutejs/plasma-new-hope/styled-components'; import { BaseCallbackChangeInstance } from '@salutejs/plasma-new-hope/types/components/Range/Range.types'; import { BaseCallbackKeyboardInstance } from '@salutejs/plasma-new-hope/types/components/Range/Range.types'; +import { BaseProps } from '@salutejs/plasma-new-hope/types/components/Autocomplete/Autocomplete.types'; +import { BasicProps } from '@salutejs/plasma-new-hope/types/components/Select/Select.types'; import { BlurProps } from '@salutejs/plasma-core'; import { blurs } from '@salutejs/plasma-core'; import { BoldProps } from '@salutejs/plasma-new-hope/types/components/Typography/Typography.types'; @@ -49,6 +51,7 @@ import { ButtonHTMLAttributes } from 'react'; import { ButtonProps } from '@salutejs/plasma-new-hope/styled-components'; import { Calendar as Calendar_2 } from '@salutejs/plasma-new-hope/types/components/Calendar/Calendar.types'; import { CalendarBaseProps } from '@salutejs/plasma-new-hope/styled-components'; +import { CalendarConfigProps } from '@salutejs/plasma-new-hope/types/components/Calendar/Calendar.types'; import { CalendarDoubleProps } from '@salutejs/plasma-new-hope/styled-components'; import { CalendarProps } from '@salutejs/plasma-new-hope/styled-components'; import { CalendarRange } from '@salutejs/plasma-new-hope/types/components/Calendar/Calendar.types'; @@ -95,8 +98,8 @@ 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 { DateInfo } from '@salutejs/plasma-new-hope/types/components/Calendar/Calendar.types'; +import { DatePickerCalendarProps } from '@salutejs/plasma-new-hope/types/components/DatePicker/DatePickerBase.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'; @@ -143,6 +146,7 @@ import { ImgHTMLAttributes } from 'react'; import { IndicatorProps } from '@salutejs/plasma-new-hope/styled-components'; import { InputHTMLAttributes } from '@salutejs/plasma-core'; import { InputHTMLAttributes as InputHTMLAttributes_2 } from '@salutejs/plasma-new-hope/types/types'; +import { InputHTMLAttributes as InputHTMLAttributes_3 } from 'react'; import { JSXElementConstructor } from 'react'; import { LineSkeletonProps } from '@salutejs/plasma-new-hope/styled-components'; import { LinkCustomProps } from '@salutejs/plasma-new-hope/types/components/Link/Link'; @@ -185,13 +189,15 @@ import { PopupProps as PopupBaseProps } from '@salutejs/plasma-new-hope/styled-c import { PopupProvider as PopupBaseProvider } from '@salutejs/plasma-new-hope/styled-components'; import { PopupInfo } from '@salutejs/plasma-new-hope/styled-components'; import { PopupProps } from '@salutejs/plasma-hope'; +import { Portal } from '@salutejs/plasma-new-hope/styled-components'; import { PortalProps } from '@salutejs/plasma-new-hope/styled-components'; import { PreviewGallery } from '@salutejs/plasma-hope'; import { PreviewGalleryItemProps } from '@salutejs/plasma-hope'; import { PreviewGalleryProps } from '@salutejs/plasma-hope'; -import { Price } from '@salutejs/plasma-hope'; -import { PriceProps } from '@salutejs/plasma-hope'; +import { priceClasses } from '@salutejs/plasma-new-hope/styled-components'; +import { PriceProps } from '@salutejs/plasma-new-hope/types/components/Price/Price.types'; import { ProgressProps } from '@salutejs/plasma-new-hope/styled-components'; +import { Props } from '@salutejs/plasma-new-hope/types/components/EmptyState/EmptyState.types'; 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'; @@ -261,6 +267,7 @@ import { TextareaResize } from '@salutejs/plasma-core'; import { TextFieldPrimitiveValue } from '@salutejs/plasma-new-hope/types/components/TextField/TextField.types'; import { TextfieldPrimitiveValue } from '@salutejs/plasma-new-hope/types/components/Range/Range.types'; import type { TextFieldProps as TextFieldProps_2 } from '@salutejs/plasma-hope'; +import { TextFieldPropsBase } from '@salutejs/plasma-new-hope/types/components/TextField/TextField.types'; import { TextFieldView } from '@salutejs/plasma-hope'; import { TextSkeletonBaseProps } from '@salutejs/plasma-new-hope/types/components/Skeleton/TextSkeleton/TextSkeleton.types'; import { TextSkeletonProps } from '@salutejs/plasma-new-hope/styled-components'; @@ -304,6 +311,8 @@ import { WithSkeletonProps } from '@salutejs/plasma-new-hope/styled-components'; export const Accordion: FunctionComponent & BaseProps & Omit & Omit, "size"> & RefAttributes>; + // @public (undocumented) export const Avatar: FunctionComponent & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps_2 & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -465,6 +501,7 @@ body2: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps_2 & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -474,6 +511,7 @@ l: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps_2 & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -483,6 +521,7 @@ m: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps_2 & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -492,6 +531,7 @@ s: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps_2 & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -501,6 +541,7 @@ xs: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps_2 & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -510,6 +551,7 @@ xxs: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps_2 & BoldProps & HTMLAttributes & RefAttributes>; export { Breakpoint } @@ -676,16 +718,12 @@ m: PolymorphicClassName; s: PolymorphicClassName; xs: PolymorphicClassName; }; -}> & Calendar_2 & { -type?: "Days" | "Months" | "Years" | undefined; -size?: string | undefined; -view?: string | undefined; -} & RefAttributes>; +}> & Calendar_2 & CalendarConfigProps & RefAttributes>; export { CalendarBaseProps } // @public (undocumented) -export const CalendarBaseRange: ({ value, disabledList, eventList, min, max, onChangeValue, onChangeStartOfRange, ...rest }: CalendarRange) => ReactElement>; +export const CalendarBaseRange: ({ value, min, max, disabledList, eventList, eventMonthList, disabledMonthList, eventYearList, disabledYearList, onChangeValue, onChangeStartOfRange, ...rest }: CalendarRange) => ReactElement>; // @public (undocumented) export const CalendarDouble: FunctionComponent & HTMLAttributes & Calendar_2 & { -size?: string | undefined; -view?: string | undefined; -} & RefAttributes>; +}> & Calendar_2 & CalendarConfigProps & RefAttributes>; export { CalendarDoubleProps } // @public (undocumented) -export const CalendarDoubleRange: ({ value, disabledList, eventList, min, max, onChangeValue, onChangeStartOfRange, ...rest }: CalendarRange) => ReactElement>; +export const CalendarDoubleRange: ({ value, min, max, disabledList, eventList, eventMonthList, disabledMonthList, eventYearList, disabledYearList, onChangeValue, onChangeStartOfRange, ...rest }: CalendarRange) => ReactElement>; export { CalendarProps } @@ -1035,8 +1070,8 @@ true: PolymorphicClassName; }> & 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; +onCommitFirstDate?: ((value: string | Date, error?: boolean | undefined, success?: boolean | undefined, dateInfo?: DateInfo | undefined) => void) | undefined; +onCommitSecondDate?: ((value: string | Date, error?: boolean | undefined, success?: boolean | undefined, dateInfo?: DateInfo | undefined) => void) | undefined; } & { label?: string | undefined; view?: string | undefined; @@ -1068,7 +1103,7 @@ onFocusFirstTextfield?: ((event: ChangeEvent) => void) | undef onFocusSecondTextfield?: ((event: ChangeEvent) => void) | undefined; onBlurFirstTextfield?: ((event: ChangeEvent) => void) | undefined; onBlurSecondTextfield?: ((event: ChangeEvent) => void) | undefined; -} & DatePickerCalendarProps_2 & Omit & { +} & DatePickerCalendarProps & Omit & { placement?: DatePickerRangePlacement | DatePickerRangePlacement[] | undefined; isDoubleCalendar?: boolean | undefined; } & HTMLAttributes & RefAttributes>; @@ -1195,6 +1230,7 @@ l: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps_2 & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -1204,6 +1240,7 @@ m: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps_2 & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -1213,6 +1250,7 @@ s: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps_2 & BoldProps & HTMLAttributes & RefAttributes>; export { Editable } @@ -1223,6 +1261,16 @@ export { ElasticGrid } export { ElasticGridProps } +// @public (undocumented) +export const EmptyState: FunctionComponent & Props & RefAttributes>; + export { extractTextFrom } export { FocusProps } @@ -1260,6 +1308,7 @@ h1: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps_2 & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -1269,6 +1318,7 @@ h2: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps_2 & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -1278,6 +1328,7 @@ h3: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps_2 & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -1287,6 +1338,7 @@ h4: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps_2 & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -1296,6 +1348,7 @@ h5: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps_2 & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -1593,16 +1646,16 @@ export { padZeroNumber } // @public export const Pagination: FunctionComponent & PortalProps & RefAttributes>; +export { Portal } export { PortalProps } @@ -1683,9 +1735,12 @@ export { PreviewGalleryItemProps } export { PreviewGalleryProps } -export { Price } +// @public +export const Price: FunctionComponent & PriceProps & RefAttributes>; -export { PriceProps } +export { priceClasses } // @public (undocumented) export const Progress: FunctionComponent & React_ export { SelectGroup } +// @public (undocumented) +export const SelectNew: FunctionComponent & ((BasicProps & { +multiselect?: false | undefined; +value?: string | undefined; +onChange?: ((value: string) => void) | undefined; +isTargetAmount?: false | undefined; +} & { +target?: "textfield-like" | undefined; +view?: "default" | "positive" | "warning" | "negative" | undefined; +contentLeft?: ReactNode; +label?: string | undefined; +labelPlacement?: "outer" | "inner" | undefined; +placeholder?: string | undefined; +helperText?: string | undefined; +} & Omit, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & RefAttributes) | (BasicProps & { +multiselect?: false | undefined; +value?: string | undefined; +onChange?: ((value: string) => void) | undefined; +isTargetAmount?: false | undefined; +} & { +target?: "button-like" | undefined; +view?: "default" | "accent" | "secondary" | "positive" | "warning" | "negative" | "black" | "white" | "dark" | "clear" | undefined; +contentLeft?: undefined; +label?: undefined; +labelPlacement?: undefined; +placeholder?: undefined; +helperText?: undefined; +} & Omit, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & RefAttributes) | (BasicProps & { +multiselect: true; +value?: string[] | undefined; +onChange?: ((value: string[]) => void) | undefined; +isTargetAmount?: boolean | undefined; +} & { +target?: "textfield-like" | undefined; +view?: "default" | "positive" | "warning" | "negative" | undefined; +contentLeft?: ReactNode; +label?: string | undefined; +labelPlacement?: "outer" | "inner" | undefined; +placeholder?: string | undefined; +helperText?: string | undefined; +} & Omit, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & RefAttributes) | (BasicProps & { +multiselect: true; +value?: string[] | undefined; +onChange?: ((value: string[]) => void) | undefined; +isTargetAmount?: boolean | undefined; +} & { +target?: "button-like" | undefined; +view?: "default" | "accent" | "secondary" | "positive" | "warning" | "negative" | "black" | "white" | "dark" | "clear" | undefined; +contentLeft?: undefined; +label?: undefined; +labelPlacement?: undefined; +placeholder?: undefined; +helperText?: undefined; +} & Omit, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & RefAttributes))>; + export { SelectProps } export { selectText } @@ -2156,7 +2290,7 @@ true: PolymorphicClassName; disabled?: boolean | undefined; } & { label?: string | undefined; - labelPlacement?: "inner" | "outer" | undefined; + labelPlacement?: "outer" | "inner" | undefined; leftHelper?: string | undefined; contentLeft?: React_2.ReactElement> | undefined; contentRight?: React_2.ReactElement> | undefined; @@ -2175,7 +2309,7 @@ true: PolymorphicClassName; disabled?: boolean | undefined; } & { label?: string | undefined; - labelPlacement?: "inner" | "outer" | undefined; + labelPlacement?: "outer" | "inner" | undefined; leftHelper?: string | undefined; contentLeft?: React_2.ReactElement> | undefined; contentRight?: React_2.ReactElement> | undefined; @@ -2203,6 +2337,7 @@ l: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps_2 & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -2212,6 +2347,7 @@ m: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps_2 & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -2221,6 +2357,7 @@ s: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps_2 & BoldProps & HTMLAttributes & RefAttributes>; // @public @@ -2276,6 +2413,7 @@ xs: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps_2 & BoldProps & HTMLAttributes & RefAttributes>; export { TimingFunction } diff --git a/packages/plasma-b2c/package-lock.json b/packages/plasma-b2c/package-lock.json index d03a60f7e5..384a2dfb42 100644 --- a/packages/plasma-b2c/package-lock.json +++ b/packages/plasma-b2c/package-lock.json @@ -1,17 +1,17 @@ { "name": "@salutejs/plasma-b2c", - "version": "1.350.0", + "version": "1.356.0-dev.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@salutejs/plasma-b2c", - "version": "1.350.0", + "version": "1.356.0-dev.0", "license": "MIT", "dependencies": { - "@salutejs/plasma-core": "1.162.0", - "@salutejs/plasma-hope": "1.288.0", - "@salutejs/plasma-new-hope": "0.105.0", + "@salutejs/plasma-core": "1.163.1-dev.0", + "@salutejs/plasma-hope": "1.289.1-dev.0", + "@salutejs/plasma-new-hope": "0.111.0-dev.0", "@salutejs/plasma-tokens-b2c": "0.51.0", "@salutejs/plasma-tokens-web": "1.56.0", "@salutejs/plasma-typo": "0.40.0" @@ -31,9 +31,9 @@ "@rollup/plugin-commonjs": "25.0.7", "@rollup/plugin-node-resolve": "15.2.3", "@salutejs/plasma-colors": "0.13.0", - "@salutejs/plasma-cy-utils": "0.94.0", + "@salutejs/plasma-cy-utils": "0.95.1-dev.0", "@salutejs/plasma-icons": "1.199.0", - "@salutejs/plasma-sb-utils": "0.160.0", + "@salutejs/plasma-sb-utils": "0.161.1-dev.0", "@storybook/addon-docs": "7.6.17", "@storybook/addon-essentials": "7.6.17", "@storybook/addon-knobs": "7.0.2", @@ -4990,9 +4990,9 @@ "dev": true }, "node_modules/@salutejs/plasma-core": { - "version": "1.162.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-core/-/plasma-core-1.162.0.tgz", - "integrity": "sha512-+RmyuJb58tuGgbjvbcby5jjFG5VpZLyD2xTD7JrQaKyI355wYXS6vCXWhMH5JgevOBSNMWfEkRvDuL+YfW/r9w==", + "version": "1.163.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-core/-/plasma-core-1.163.1-dev.0.tgz", + "integrity": "sha512-KHf3PJW6X+aBnOEW6UqKGiyOueEDsFy+3tNT1KAkkPC1ZL3n/On3hmVaDrpzc7sSD+slGdpqQLAvYjR28ZgG0g==", "dependencies": { "@popperjs/core": "2.9.2", "@salutejs/plasma-typo": "0.40.0", @@ -5008,9 +5008,9 @@ } }, "node_modules/@salutejs/plasma-cy-utils": { - "version": "0.94.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-cy-utils/-/plasma-cy-utils-0.94.0.tgz", - "integrity": "sha512-VmyuJHXoV2BmWDrfRpJC7RE7A4FaWoKO5YZmrphQm7bTECvhdvS19V8h/POzG/qT6d2soOX+Bs20MmnPazPy9g==", + "version": "0.95.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-cy-utils/-/plasma-cy-utils-0.95.1-dev.0.tgz", + "integrity": "sha512-wD+TF1KODuJYB/GOKC3QTf42qt6jzNL+zhUMJJTuNU7a7JnPmRxXXJa+wGqbwSTtZvpLwO6qRs3Qf47vqZl2jg==", "dev": true, "peerDependencies": { "react": ">=16.13.1", @@ -5019,12 +5019,12 @@ } }, "node_modules/@salutejs/plasma-hope": { - "version": "1.288.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-hope/-/plasma-hope-1.288.0.tgz", - "integrity": "sha512-IVlEA/ouXFEk3MqNWLx7HxTCcX4//+EAdnOonLIayTwwNlaMum6pDTVtnAW4Yz3KCO6ca6KrRN23eAF7X0ozWQ==", + "version": "1.289.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-hope/-/plasma-hope-1.289.1-dev.0.tgz", + "integrity": "sha512-5SN98nF3sDntl2WC/tbthJkKuEk8HnIhBz1pERW/TgXYsh/jDrlAY5rHThJmYFSlqGz/iHPknowvbeZJKmB1DQ==", "dependencies": { "@popperjs/core": "2.9.2", - "@salutejs/plasma-core": "1.162.0", + "@salutejs/plasma-core": "1.163.1-dev.0", "@salutejs/plasma-typo": "0.40.0", "react-file-drop": "3.1.6", "react-popper": "2.3.0", @@ -5050,14 +5050,14 @@ } }, "node_modules/@salutejs/plasma-new-hope": { - "version": "0.105.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-new-hope/-/plasma-new-hope-0.105.0.tgz", - "integrity": "sha512-Y1BmxjgqSqoXwLBJYFapDGeNSl1nXXiN2B1Pxo+gqAPr8DpBHbGV+6Y2GgrXRrJJXGQL9mpuJubVXF0Hs/OUfA==", + "version": "0.111.0-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-new-hope/-/plasma-new-hope-0.111.0-dev.0.tgz", + "integrity": "sha512-S1wUVrDZfnz+DbOG0lxZfUkRtAfAkaAZiDfHWNE/+pPGqEZIEVzmvJoGA6hHD2fIX5m+v1Uh7O5bVX7BAcE8iQ==", "dependencies": { "@linaria/core": "5.0.2", "@linaria/react": "5.0.3", "@popperjs/core": "2.11.8", - "@salutejs/plasma-core": "1.162.0", + "@salutejs/plasma-core": "1.163.1-dev.0", "dayjs": "1.11.11", "focus-visible": "5.2.0", "lodash.throttle": "4.1.1", @@ -5100,13 +5100,13 @@ } }, "node_modules/@salutejs/plasma-sb-utils": { - "version": "0.160.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-sb-utils/-/plasma-sb-utils-0.160.0.tgz", - "integrity": "sha512-+9HfFOprKcd072koF0+FNyYFXATCxjDgNtZfonBhn04o8T80ts58PWYylMhzCr1uZvenszqYDEffIaCM+r5LTQ==", + "version": "0.161.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-sb-utils/-/plasma-sb-utils-0.161.1-dev.0.tgz", + "integrity": "sha512-ft4Owu34dlhr384S2EeSIfpCTW78RwvBsjf/VjiEcnESYnF7wuPwD8UK5euCHJW7IXGaxAAPLTY/6cObiL26VQ==", "dev": true, "dependencies": { "@salutejs/plasma-colors": "0.13.0", - "@salutejs/plasma-core": "1.162.0", + "@salutejs/plasma-core": "1.163.1-dev.0", "param-case": "^3.0.4" }, "peerDependencies": { @@ -19925,9 +19925,9 @@ "dev": true }, "@salutejs/plasma-core": { - "version": "1.162.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-core/-/plasma-core-1.162.0.tgz", - "integrity": "sha512-+RmyuJb58tuGgbjvbcby5jjFG5VpZLyD2xTD7JrQaKyI355wYXS6vCXWhMH5JgevOBSNMWfEkRvDuL+YfW/r9w==", + "version": "1.163.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-core/-/plasma-core-1.163.1-dev.0.tgz", + "integrity": "sha512-KHf3PJW6X+aBnOEW6UqKGiyOueEDsFy+3tNT1KAkkPC1ZL3n/On3hmVaDrpzc7sSD+slGdpqQLAvYjR28ZgG0g==", "requires": { "@popperjs/core": "2.9.2", "@salutejs/plasma-typo": "0.40.0", @@ -19938,18 +19938,18 @@ } }, "@salutejs/plasma-cy-utils": { - "version": "0.94.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-cy-utils/-/plasma-cy-utils-0.94.0.tgz", - "integrity": "sha512-VmyuJHXoV2BmWDrfRpJC7RE7A4FaWoKO5YZmrphQm7bTECvhdvS19V8h/POzG/qT6d2soOX+Bs20MmnPazPy9g==", + "version": "0.95.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-cy-utils/-/plasma-cy-utils-0.95.1-dev.0.tgz", + "integrity": "sha512-wD+TF1KODuJYB/GOKC3QTf42qt6jzNL+zhUMJJTuNU7a7JnPmRxXXJa+wGqbwSTtZvpLwO6qRs3Qf47vqZl2jg==", "dev": true }, "@salutejs/plasma-hope": { - "version": "1.288.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-hope/-/plasma-hope-1.288.0.tgz", - "integrity": "sha512-IVlEA/ouXFEk3MqNWLx7HxTCcX4//+EAdnOonLIayTwwNlaMum6pDTVtnAW4Yz3KCO6ca6KrRN23eAF7X0ozWQ==", + "version": "1.289.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-hope/-/plasma-hope-1.289.1-dev.0.tgz", + "integrity": "sha512-5SN98nF3sDntl2WC/tbthJkKuEk8HnIhBz1pERW/TgXYsh/jDrlAY5rHThJmYFSlqGz/iHPknowvbeZJKmB1DQ==", "requires": { "@popperjs/core": "2.9.2", - "@salutejs/plasma-core": "1.162.0", + "@salutejs/plasma-core": "1.163.1-dev.0", "@salutejs/plasma-typo": "0.40.0", "react-file-drop": "3.1.6", "react-popper": "2.3.0", @@ -19964,14 +19964,14 @@ "dev": true }, "@salutejs/plasma-new-hope": { - "version": "0.105.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-new-hope/-/plasma-new-hope-0.105.0.tgz", - "integrity": "sha512-Y1BmxjgqSqoXwLBJYFapDGeNSl1nXXiN2B1Pxo+gqAPr8DpBHbGV+6Y2GgrXRrJJXGQL9mpuJubVXF0Hs/OUfA==", + "version": "0.111.0-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-new-hope/-/plasma-new-hope-0.111.0-dev.0.tgz", + "integrity": "sha512-S1wUVrDZfnz+DbOG0lxZfUkRtAfAkaAZiDfHWNE/+pPGqEZIEVzmvJoGA6hHD2fIX5m+v1Uh7O5bVX7BAcE8iQ==", "requires": { "@linaria/core": "5.0.2", "@linaria/react": "5.0.3", "@popperjs/core": "2.11.8", - "@salutejs/plasma-core": "1.162.0", + "@salutejs/plasma-core": "1.163.1-dev.0", "dayjs": "1.11.11", "focus-visible": "5.2.0", "lodash.throttle": "4.1.1", @@ -19993,13 +19993,13 @@ } }, "@salutejs/plasma-sb-utils": { - "version": "0.160.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-sb-utils/-/plasma-sb-utils-0.160.0.tgz", - "integrity": "sha512-+9HfFOprKcd072koF0+FNyYFXATCxjDgNtZfonBhn04o8T80ts58PWYylMhzCr1uZvenszqYDEffIaCM+r5LTQ==", + "version": "0.161.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-sb-utils/-/plasma-sb-utils-0.161.1-dev.0.tgz", + "integrity": "sha512-ft4Owu34dlhr384S2EeSIfpCTW78RwvBsjf/VjiEcnESYnF7wuPwD8UK5euCHJW7IXGaxAAPLTY/6cObiL26VQ==", "dev": true, "requires": { "@salutejs/plasma-colors": "0.13.0", - "@salutejs/plasma-core": "1.162.0", + "@salutejs/plasma-core": "1.163.1-dev.0", "param-case": "^3.0.4" } }, diff --git a/packages/plasma-b2c/package.json b/packages/plasma-b2c/package.json index a1180adafe..50094f1d5c 100644 --- a/packages/plasma-b2c/package.json +++ b/packages/plasma-b2c/package.json @@ -1,6 +1,6 @@ { "name": "@salutejs/plasma-b2c", - "version": "1.350.0", + "version": "1.356.0-dev.0", "description": "Salute Design System / React UI kit for business-related web applications", "author": "Salute Frontend Team ", "license": "MIT", @@ -42,9 +42,9 @@ "atLeast": 99.97 }, "dependencies": { - "@salutejs/plasma-core": "1.162.0", - "@salutejs/plasma-hope": "1.288.0", - "@salutejs/plasma-new-hope": "0.105.0", + "@salutejs/plasma-core": "1.163.1-dev.0", + "@salutejs/plasma-hope": "1.289.1-dev.0", + "@salutejs/plasma-new-hope": "0.111.0-dev.0", "@salutejs/plasma-tokens-b2c": "0.51.0", "@salutejs/plasma-tokens-web": "1.56.0", "@salutejs/plasma-typo": "0.40.0" @@ -70,9 +70,9 @@ "@rollup/plugin-commonjs": "25.0.7", "@rollup/plugin-node-resolve": "15.2.3", "@salutejs/plasma-colors": "0.13.0", - "@salutejs/plasma-cy-utils": "0.94.0", + "@salutejs/plasma-cy-utils": "0.95.1-dev.0", "@salutejs/plasma-icons": "1.199.0", - "@salutejs/plasma-sb-utils": "0.160.0", + "@salutejs/plasma-sb-utils": "0.161.1-dev.0", "@storybook/addon-docs": "7.6.17", "@storybook/addon-essentials": "7.6.17", "@storybook/addon-knobs": "7.0.2", @@ -107,4 +107,4 @@ "react" ], "sideEffects": false -} +} \ No newline at end of file diff --git a/packages/plasma-b2c/src/components/Accordion/Accordion.config.ts b/packages/plasma-b2c/src/components/Accordion/Accordion.config.ts index 4818c3cb31..2a5f533405 100644 --- a/packages/plasma-b2c/src/components/Accordion/Accordion.config.ts +++ b/packages/plasma-b2c/src/components/Accordion/Accordion.config.ts @@ -16,7 +16,35 @@ export const config = { ${accordionTokens.accordionItemTextColor}: var(--text-primary); ${accordionTokens.accordionItemFocus}: var(--surface-accent); ${accordionTokens.accordionBackground}: var(--surface-clear); + ${accordionTokens.accordionItemBorder}: none; ${accordionTokens.accordionItemBorderBottom}: 0; + ${accordionTokens.accordionItemPaddingHorizontalLeft}: var(${accordionTokens.accordionItemPaddingHorizontal}); + `, + secondary: css` + ${accordionTokens.accordionGap}: 0.125rem; + ${accordionTokens.accordionWidth}: 20rem; + ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) var(${accordionTokens.accordionItemPaddingHorizontal}); + ${accordionTokens.accordionItemBackground}: var(--surface-transparent-primary); + ${accordionTokens.accordionItemTitleColor}: var(--text-primary); + ${accordionTokens.accordionItemTextColor}: var(--text-primary); + ${accordionTokens.accordionItemFocus}: var(--surface-accent); + ${accordionTokens.accordionBackground}: var(--surface-clear); + ${accordionTokens.accordionItemBorder}: none; + ${accordionTokens.accordionItemBorderBottom}: 0; + ${accordionTokens.accordionItemPaddingHorizontalLeft}: var(${accordionTokens.accordionItemPaddingHorizontal}); + `, + outlined: css` + ${accordionTokens.accordionGap}: 0.125rem; + ${accordionTokens.accordionWidth}: 20rem; + ${accordionTokens.accordionItemPadding}: var(${accordionTokens.accordionItemPaddingVertical}) var(${accordionTokens.accordionItemPaddingHorizontal}); + ${accordionTokens.accordionItemBackground}: var(--surface-clear); + ${accordionTokens.accordionItemTitleColor}: var(--text-primary); + ${accordionTokens.accordionItemTextColor}: var(--text-primary); + ${accordionTokens.accordionItemFocus}: var(--surface-accent); + ${accordionTokens.accordionBackground}: var(--surface-clear); + ${accordionTokens.accordionItemBorder}: 0.125rem solid var(--surface-transparent-secondary); + ${accordionTokens.accordionItemBorderBottom}: 0.125rem solid var(--surface-transparent-secondary); + ${accordionTokens.accordionItemPaddingHorizontalLeft}: var(${accordionTokens.accordionItemPaddingHorizontal}); `, clear: css` ${accordionTokens.accordionGap}: 0.125rem; @@ -28,14 +56,16 @@ export const config = { ${accordionTokens.accordionItemFocus}: var(--surface-accent); ${accordionTokens.accordionItemBorderRadius}: 0rem !important; ${accordionTokens.accordionBackground}: var(--surface-clear); + ${accordionTokens.accordionItemBorder}: none; ${accordionTokens.accordionItemBorderBottom}: 0.125rem solid var(--surface-solid-tertiary); + ${accordionTokens.accordionItemPaddingHorizontalLeft}: 0; `, }, size: { l: css` ${accordionTokens.accordionItemPaddingVertical}: 1.0625rem; ${accordionTokens.accordionItemPaddingHorizontal}: 1.25rem; - ${accordionTokens.accordionItemGap}: 0.5rem; + ${accordionTokens.accordionItemGap}: 0.875rem; ${accordionTokens.accordionItemBorderRadius}: 0.875rem; ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-l-font-family); @@ -55,7 +85,7 @@ export const config = { m: css` ${accordionTokens.accordionItemPaddingVertical}: 0.875rem; ${accordionTokens.accordionItemPaddingHorizontal}: 1.125rem; - ${accordionTokens.accordionItemGap}: 0.375rem; + ${accordionTokens.accordionItemGap}: 0.75rem; ${accordionTokens.accordionItemBorderRadius}: 0.75rem; ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-m-font-family); @@ -75,7 +105,7 @@ export const config = { s: css` ${accordionTokens.accordionItemPaddingVertical}: 0.6875rem; ${accordionTokens.accordionItemPaddingHorizontal}: 0.875rem; - ${accordionTokens.accordionItemGap}: 0.375rem; + ${accordionTokens.accordionItemGap}: 0.625rem; ${accordionTokens.accordionItemBorderRadius}: 0.625rem; ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-s-font-family); @@ -95,7 +125,7 @@ export const config = { xs: css` ${accordionTokens.accordionItemPaddingVertical}: 0.5rem; ${accordionTokens.accordionItemPaddingHorizontal}: 0.75rem; - ${accordionTokens.accordionItemGap}: 0.25rem; + ${accordionTokens.accordionItemGap}: 0.5rem; ${accordionTokens.accordionItemBorderRadius}: 0.5rem; ${accordionTokens.accordionItemTitleFontFamily}: var(--plasma-typo-body-xs-font-family); diff --git a/packages/plasma-b2c/src/components/Accordion/Accordion.stories.tsx b/packages/plasma-b2c/src/components/Accordion/Accordion.stories.tsx index 7c9abfa2f3..464f651ea0 100644 --- a/packages/plasma-b2c/src/components/Accordion/Accordion.stories.tsx +++ b/packages/plasma-b2c/src/components/Accordion/Accordion.stories.tsx @@ -14,6 +14,7 @@ const meta: Meta = { size: 'm', stretching: 'filled', type: 'arrow', + alignWithTitle: false, title: 'Как оплатить заправку бонусами СберСпасибо?', body: 'После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива', @@ -43,13 +44,13 @@ export const Default: StoryObj> = { return ( - + {args.body} - + {args.body} - + {args.body} diff --git a/packages/plasma-b2c/src/components/AudioPlayer/AudioPlayer.stories.tsx b/packages/plasma-b2c/src/components/AudioPlayer/AudioPlayer.stories.tsx index a766cd2b6f..892fc887f1 100644 --- a/packages/plasma-b2c/src/components/AudioPlayer/AudioPlayer.stories.tsx +++ b/packages/plasma-b2c/src/components/AudioPlayer/AudioPlayer.stories.tsx @@ -23,7 +23,7 @@ const song = { duration: 128, id: 123, file: - 'https://vc-static.sberdevices.ru/smartmarket-video-news/media/uploads/15/159f025fe48c54f70b7a4041edbb413044f01a61.mp3', + 'https://cdn1.newsback.sberdevices.ru/p-newsback/media/uploads/15/159f025fe48c54f70b7a4041edbb413044f01a61.mp3', canDelete: true, }; diff --git a/packages/plasma-b2c/src/components/Autocomplete/Autocomplete.component-test.tsx b/packages/plasma-b2c/src/components/Autocomplete/Autocomplete.component-test.tsx new file mode 100644 index 0000000000..829cb5c9ea --- /dev/null +++ b/packages/plasma-b2c/src/components/Autocomplete/Autocomplete.component-test.tsx @@ -0,0 +1,501 @@ +import * as React from 'react'; +import type { FC, PropsWithChildren } from 'react'; +import { createGlobalStyle } from 'styled-components'; +import { standard as standardTypo } from '@salutejs/plasma-typo'; +import { mount, CypressTestDecorator, getComponent } from '@salutejs/plasma-cy-utils'; + +const StandardTypoStyle = createGlobalStyle(standardTypo); + +const suggestions = [ + { label: 'Алексей Смирнов' }, + { label: 'Екатерина Иванова' }, + { label: 'Дмитрий Петров' }, + { label: 'Ольга Васильева' }, + { label: 'Сергей Сидоров' }, + { label: 'Мария Кузнецова' }, + { label: 'Андрей Попов' }, + { label: 'Анна Николаева' }, + { label: 'Иван Федоров' }, + { label: 'Наталья Морозова' }, + { label: 'Михаил Павлов' }, + { label: 'Елена Романова' }, + { label: 'Владимир Киселев' }, + { label: 'Татьяна Захарова' }, + { label: 'Николай Семенов' }, + { label: 'Юлия Белова' }, + { label: 'Александр Гусев' }, + { label: 'Оксана Яковлева' }, + { label: 'Игорь Егорова' }, + { label: 'Вера Тихомирова' }, + { label: 'Артем Григорьев' }, + { label: 'Евгения Козлова' }, + { label: 'Максим Лебедев' }, + { label: 'Виктория Калашникова' }, + { label: 'Константин Абрамов' }, + { label: 'Светлана Новикова' }, + { label: 'Юрий Волков' }, + { label: 'Валентина Воробьева' }, + { label: 'Павел Сергеев' }, + { label: 'Людмила Виноградова' }, + { label: 'Антон Соловьев' }, + { label: 'Маргарита Цветкова' }, + { label: 'Роман Трофимов' }, + { label: 'Лариса Зайцева' }, + { label: 'Евгений Никитин' }, + { label: 'Галина Михайлова' }, + { label: 'Владислав Антонов' }, + { label: 'Дарья Филатова' }, + { label: 'Олег Буров' }, + { label: 'Инна Медведева' }, + { label: 'Вячеслав Крылов' }, + { label: 'Тамара Беляева' }, + { label: 'Кирилл Марков' }, + { label: 'Марина Пономарева' }, + { label: 'Борис Захаров' }, + { label: 'Жанна Савельева' }, + { label: 'Федор Жуков' }, + { label: 'Елизавета Логинова' }, + { label: 'Виктор Рыбаков' }, + { label: 'Лилия Макарова' }, +]; + +describe('plasma-b2c: Autocomplete', () => { + const Autocomplete = getComponent('Autocomplete'); + + const CypressTestDecoratorWithTypo: FC = ({ children }) => ( + + + {children} + + ); + + it('default', () => { + cy.viewport(1000, 500); + + mount( + + + , + ); + + cy.get('input').click(); + cy.focused().type('ал'); + cy.matchImageSnapshot(); + }); + + it('prop: size', () => { + cy.viewport(1000, 300); + + mount( + +
+ + + + +
+ +
+ + + + +
+ , + ); + + cy.matchImageSnapshot(); + }); + + it('prop: view', () => { + cy.viewport(1000, 300); + + mount( + +
+ + + + +
+ +
+ + + + +
+ , + ); + + cy.matchImageSnapshot(); + }); + + it('prop: disabled', () => { + cy.viewport(1000, 300); + + mount( + +
+ + + + +
+ +
+ + + + +
+ , + ); + + cy.matchImageSnapshot(); + }); + + it('prop: readOnly', () => { + cy.viewport(1000, 300); + + mount( + +
+ + + + +
+ +
+ + + + +
+ , + ); + + cy.matchImageSnapshot(); + }); + + it('prop: listMaxHeight', () => { + cy.viewport(1000, 500); + + mount( + + + , + ); + + cy.get('input').click(); + cy.focused().type('ал'); + cy.matchImageSnapshot(); + }); + + it('prop: listWidth', () => { + cy.viewport(1000, 500); + + mount( + + + , + ); + + cy.get('input').click(); + cy.focused().type('ал'); + cy.matchImageSnapshot(); + }); + + it('prop: threshold', () => { + cy.viewport(1000, 500); + + mount( + + + , + ); + + cy.get('input').click(); + cy.focused().type('ал'); + cy.get('.popover-root').should('not.be.visible'); + cy.realPress('Tab'); + cy.get('input').click(); + cy.focused().type('е'); + cy.get('.popover-root').should('be.visible'); + }); + + it('keyboard interactions', () => { + cy.viewport(1000, 500); + + mount( + + + , + ); + + cy.get('input').click(); + cy.focused().type('ал'); + + // Arrow Down & End + cy.realPress('ArrowDown'); + cy.get('ul').should('be.visible'); + cy.get('ul li').first().should('have.class', 'suggestion-item-is-focused'); + cy.realPress('ArrowDown'); + cy.get('ul li').first().should('not.have.class', 'suggestion-item-is-focused'); + cy.get('ul li').first().next().should('have.class', 'suggestion-item-is-focused'); + cy.realPress('End'); + cy.get('ul li').last().should('have.class', 'suggestion-item-is-focused'); + cy.realPress('ArrowDown'); + cy.get('ul li').last().should('have.class', 'suggestion-item-is-focused'); + cy.realPress('Tab'); + + // Arrow Up & Home + cy.get('input').click(); + cy.realPress('ArrowUp'); + cy.get('ul').should('be.visible'); + cy.get('ul li').last().should('have.class', 'suggestion-item-is-focused'); + cy.realPress('ArrowUp'); + cy.get('ul li').last().prev().should('have.class', 'suggestion-item-is-focused'); + cy.realPress('Home'); + cy.get('ul li').first().should('have.class', 'suggestion-item-is-focused'); + cy.realPress('ArrowUp'); + cy.get('ul li').first().should('have.class', 'suggestion-item-is-focused'); + cy.realPress('Tab'); + + // Enter + cy.get('input').click(); + cy.realPress('ArrowDown'); + cy.realPress('Enter'); + cy.get('ul').should('not.be.visible'); + cy.get('input').should('have.value', 'Алексей Смирнов'); + + // Tab + cy.realPress('Tab'); + cy.get('input').should('not.have.focus'); + }); +}); diff --git a/packages/plasma-b2c/src/components/Autocomplete/Autocomplete.config.ts b/packages/plasma-b2c/src/components/Autocomplete/Autocomplete.config.ts new file mode 100644 index 0000000000..14ccb1821c --- /dev/null +++ b/packages/plasma-b2c/src/components/Autocomplete/Autocomplete.config.ts @@ -0,0 +1,321 @@ +import { css, autocompleteTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; + +export const config = { + defaults: { + view: 'default', + size: 'l', + labelPlacement: 'outer', + }, + variations: { + view: { + default: css` + ${tokens.textFieldColor}: var(--text-primary); + ${tokens.textFieldBackgroundColor}: var(--surface-transparent-primary); + ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-secondary); + ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldPlaceholderColor}: var(--text-secondary); + ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); + ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldLabelColor}: var(--text-primary); + ${tokens.textFieldLeftHelperColor}: var(--text-secondary); + ${tokens.textFieldFocusColor}: var(--text-accent); + + ${tokens.background}: var(--surface-solid-card); + ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); + ${tokens.itemBackground}: var(--plasma-colors-transparent); + ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.itemColor}: var(--text-primary); + ${tokens.focusColor}: var(--surface-accent); + + ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + `, + positive: css` + ${tokens.textFieldColor}: var(--plasma-colors-primary); + ${tokens.textFieldBackgroundColor}: var(--surface-transparent-positive); + ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-positive-active); + ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldPlaceholderColor}: var(--text-secondary); + ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); + ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldLabelColor}: var(--text-primary); + ${tokens.textFieldLeftHelperColor}: var(--text-positive); + ${tokens.textFieldFocusColor}: var(--text-accent); + + ${tokens.background}: var(--surface-solid-card); + ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); + ${tokens.itemBackground}: var(--plasma-colors-transparent); + ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.itemColor}: var(--text-primary); + ${tokens.focusColor}: var(--surface-accent); + + ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + `, + warning: css` + ${tokens.textFieldColor}: var(--plasma-colors-primary); + ${tokens.textFieldBackgroundColor}: var(--surface-transparent-warning); + ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); + ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldPlaceholderColor}: var(--text-secondary); + ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); + ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldLabelColor}: var(--text-primary); + ${tokens.textFieldLeftHelperColor}: var(--text-warning); + ${tokens.textFieldFocusColor}: var(--text-accent); + + ${tokens.background}: var(--surface-solid-card); + ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); + ${tokens.itemBackground}: var(--plasma-colors-transparent); + ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.itemColor}: var(--text-primary); + ${tokens.focusColor}: var(--surface-accent); + + ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + `, + negative: css` + ${tokens.textFieldColor}: var(--plasma-colors-primary); + ${tokens.textFieldBackgroundColor}: var(--surface-transparent-negative); + ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); + ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldPlaceholderColor}: var(--text-secondary); + ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); + ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldLabelColor}: var(--text-primary); + ${tokens.textFieldLeftHelperColor}: var(--text-negative); + ${tokens.textFieldFocusColor}: var(--text-accent); + + ${tokens.background}: var(--surface-solid-card); + ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); + ${tokens.itemBackground}: var(--plasma-colors-transparent); + ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.itemColor}: var(--text-primary); + ${tokens.focusColor}: var(--surface-accent); + + ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + `, + }, + size: { + l: css` + ${tokens.textFieldHeight}: 3.5rem; + ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; + ${tokens.textFieldBorderRadius}: 0.875rem; + ${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.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); + ${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.textFieldLabelOffset}: 0.75rem; + ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldLeftHelperOffset}: 0.25rem; + ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0; + ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; + + ${tokens.borderRadius}: 0.875rem; + ${tokens.padding}: 0.125rem; + ${tokens.itemPadding}: 1.0625rem 1rem; + ${tokens.itemBorderRadius}: 0.75rem; + + ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.itemFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + + ${tokens.emptyStatePadding}: 2rem 1rem 1rem 1rem; + ${tokens.emptyStateGap}: 0.5rem; + + ${tokens.infiniteLoaderSpinnerSize}: 1.5rem; + ${tokens.infiniteLoaderGap}: 0.5rem; + `, + m: css` + ${tokens.textFieldHeight}: 3rem; + ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; + ${tokens.textFieldBorderRadius}: 0.75rem; + ${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.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); + ${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.textFieldLabelOffset}: 0.625rem; + ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLeftHelperOffset}: 0.25rem; + ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; + ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; + + ${tokens.borderRadius}: 0.75rem; + ${tokens.padding}: 0.125rem; + ${tokens.itemPadding}: 0.875rem 0.875rem 0.875rem 0.875rem; + ${tokens.itemBorderRadius}: 0.625rem; + + ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.itemFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); + + ${tokens.emptyStatePadding}: 1.625rem 0.875rem 0.875rem 0.875rem; + ${tokens.emptyStateGap}: 0.375rem; + + ${tokens.infiniteLoaderSpinnerSize}: 1.5rem; + ${tokens.infiniteLoaderGap}: 0.375rem; + `, + s: css` + ${tokens.textFieldHeight}: 2.5rem; + ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; + ${tokens.textFieldBorderRadius}: 0.625rem; + ${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.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); + ${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.textFieldLabelOffset}: 0.5rem; + ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLeftHelperOffset}: 0.25rem; + ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; + ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; + + ${tokens.borderRadius}: 0.625rem; + ${tokens.padding}: 0.125rem; + ${tokens.itemPadding}: 0.6875rem 0.75rem; + ${tokens.itemBorderRadius}: 0.5rem; + + ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.itemFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); + + ${tokens.emptyStatePadding}: 1.375rem 0.625rem 0.625rem 0.625rem; + ${tokens.emptyStateGap}: 0.25rem; + + ${tokens.infiniteLoaderSpinnerSize}: 1.5rem; + ${tokens.infiniteLoaderGap}: 0.25rem; + `, + xs: css` + ${tokens.textFieldHeight}: 2rem; + ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; + ${tokens.textFieldBorderRadius}: 0.5rem; + ${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.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); + ${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.textFieldLabelOffset}: 0.375rem; + ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperOffset}: 0.25rem; + ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; + ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; + + ${tokens.borderRadius}: 0.5rem; + ${tokens.padding}: 0.125rem; + ${tokens.itemPadding}: 0.5625rem 0.5rem; + ${tokens.itemBorderRadius}: 0.5rem; + + ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.itemFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.emptyStatePadding}: 1rem 0.5rem 0.5rem 0.5rem; + ${tokens.emptyStateGap}: 0.25rem; + + ${tokens.infiniteLoaderSpinnerSize}: 1rem; + ${tokens.infiniteLoaderGap}: 0.25rem; + `, + }, + labelPlacement: { + inner: css` + ${tokens.textFieldPlaceholderColor}: var(--plasma-input-label-color, var(--plasma-input-placeholder-color, var(--plasma-colors-secondary))); + ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + `, + outer: css``, + }, + disabled: { + true: css` + ${tokens.textFieldDisabledOpacity}: 0.4; + `, + }, + readOnly: { + true: css` + ${tokens.textFieldColorReadOnly}: var(--text-secondary); + ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-transparent-primary); + ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); + ${tokens.textFieldLabelColorReadOnly}: var(--text-secondary); + `, + }, + }, +}; diff --git a/packages/plasma-b2c/src/components/Autocomplete/Autocomplete.stories.tsx b/packages/plasma-b2c/src/components/Autocomplete/Autocomplete.stories.tsx new file mode 100644 index 0000000000..85cfd5ee22 --- /dev/null +++ b/packages/plasma-b2c/src/components/Autocomplete/Autocomplete.stories.tsx @@ -0,0 +1,133 @@ +import type { ComponentProps } from 'react'; +import * as React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; +import { InSpacingDecorator } from '@salutejs/plasma-sb-utils'; +import { IconPlasma } from '@salutejs/plasma-icons'; + +import { Autocomplete } from './Autocomplete'; + +const sizes = ['l', 'm', 's', 'xs']; +const views = ['default', 'positive', 'warning', 'negative']; +const labelPlacements = ['outer', 'inner']; + +const suggestions = [ + { label: 'Алексей Смирнов' }, + { label: 'Екатерина Иванова' }, + { label: 'Дмитрий Петров' }, + { label: 'Ольга Васильева' }, + { label: 'Сергей Сидоров' }, + { label: 'Мария Кузнецова' }, + { label: 'Андрей Попов' }, + { label: 'Анна Николаева' }, + { label: 'Иван Федоров' }, + { label: 'Наталья Морозова' }, + { label: 'Михаил Павлов' }, + { label: 'Елена Романова' }, + { label: 'Владимир Киселев' }, + { label: 'Татьяна Захарова' }, + { label: 'Николай Семенов' }, + { label: 'Юлия Белова' }, + { label: 'Александр Гусев' }, + { label: 'Оксана Яковлева' }, + { label: 'Игорь Егорова' }, + { label: 'Вера Тихомирова' }, + { label: 'Артем Григорьев' }, + { label: 'Евгения Козлова' }, + { label: 'Максим Лебедев' }, + { label: 'Виктория Калашникова' }, + { label: 'Константин Абрамов' }, + { label: 'Светлана Новикова' }, + { label: 'Юрий Волков' }, + { label: 'Валентина Воробьева' }, + { label: 'Павел Сергеев' }, + { label: 'Людмила Виноградова' }, + { label: 'Антон Соловьев' }, + { label: 'Маргарита Цветкова' }, + { label: 'Роман Трофимов' }, + { label: 'Лариса Зайцева' }, + { label: 'Евгений Никитин' }, + { label: 'Галина Михайлова' }, + { label: 'Владислав Антонов' }, + { label: 'Дарья Филатова' }, + { label: 'Олег Буров' }, + { label: 'Инна Медведева' }, + { label: 'Вячеслав Крылов' }, + { label: 'Тамара Беляева' }, + { label: 'Кирилл Марков' }, + { label: 'Марина Пономарева' }, + { label: 'Борис Захаров' }, + { label: 'Жанна Савельева' }, + { label: 'Федор Жуков' }, + { label: 'Елизавета Логинова' }, + { label: 'Виктор Рыбаков' }, + { label: 'Лилия Макарова' }, +]; + +type StoryProps = ComponentProps & { + enableContentLeft: boolean; + enableContentRight: boolean; +}; + +const meta: Meta = { + title: 'Controls/Autocomplete', + decorators: [InSpacingDecorator], + component: Autocomplete, + argTypes: { + view: { + options: views, + control: { + type: 'select', + }, + }, + size: { + options: sizes, + control: { + type: 'inline-radio', + }, + }, + labelPlacement: { + options: labelPlacements, + control: { + type: 'inline-radio', + }, + }, + }, + args: { + view: 'default', + size: 'l', + labelPlacement: 'outer', + disabled: false, + readOnly: false, + label: 'Label', + textBefore: '', + textAfter: '', + placeholder: 'Заполните поле', + leftHelper: 'Введите имя Алексей', + listWidth: '100%', + listMaxHeight: '200px', + threshold: 2, + enableContentLeft: true, + enableContentRight: true, + }, +}; + +export default meta; + +const DefaultStory = (args: StoryProps) => { + const { enableContentLeft, enableContentRight } = args; + + const iconSize = args.size === 'xs' ? 'xs' : 's'; + + return ( + : undefined} + contentRight={enableContentRight ? : undefined} + /> + ); +}; + +export const Default: StoryObj = { + render: (args) => , +}; diff --git a/packages/plasma-b2c/src/components/Autocomplete/Autocomplete.ts b/packages/plasma-b2c/src/components/Autocomplete/Autocomplete.ts new file mode 100644 index 0000000000..5e4d15f60a --- /dev/null +++ b/packages/plasma-b2c/src/components/Autocomplete/Autocomplete.ts @@ -0,0 +1,6 @@ +import { autocompleteConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components'; + +import { config } from './Autocomplete.config'; + +const mergedConfig = mergeConfig(autocompleteConfig, config); +export const Autocomplete = component(mergedConfig); diff --git a/packages/plasma-b2c/src/components/Autocomplete/index.ts b/packages/plasma-b2c/src/components/Autocomplete/index.ts new file mode 100644 index 0000000000..aa5b9344ae --- /dev/null +++ b/packages/plasma-b2c/src/components/Autocomplete/index.ts @@ -0,0 +1 @@ +export { Autocomplete } from './Autocomplete'; diff --git a/packages/plasma-b2c/src/components/Calendar/Calendar.component-test.tsx b/packages/plasma-b2c/src/components/Calendar/Calendar.component-test.tsx new file mode 100644 index 0000000000..895935055e --- /dev/null +++ b/packages/plasma-b2c/src/components/Calendar/Calendar.component-test.tsx @@ -0,0 +1,902 @@ +/* eslint-disable newline-per-chained-call */ +import React, { useCallback, useState } from 'react'; +import type { FC, PropsWithChildren } from 'react'; +import { createGlobalStyle } from 'styled-components'; +import { standard as standardTypo } from '@salutejs/plasma-typo'; +import { mount, CypressTestDecorator, getComponent, PadMe } from '@salutejs/plasma-cy-utils'; + +import { CalendarDouble as CalendarDoubleB2C, CalendarBase as CalendarBaseB2C } from './Calendar'; + +const StandardTypoStyle = createGlobalStyle(standardTypo); + +const baseDate = new Date(1999, 6, 7); +const minBaseDate = new Date(1970, 1, 1); + +const events = [ + { + date: new Date('1999-07-09'), + color: 'red', + }, + { + date: new Date('1999-07-09'), + color: 'red', + }, + { + date: new Date('1999-07-10'), + color: 'red', + }, + { + date: new Date('1999-07-11'), + color: 'red', + }, + { + date: new Date('1999-07-12'), + color: 'red', + }, + { + date: new Date('1999-07-12'), + color: 'red', + }, +]; +const disabledDays = [...new Array(5)].map((_, day) => ({ + date: new Date(1999, 6, 23 + day), +})); +const monthEvents = [ + { + date: new Date('1999-06-01'), + color: 'purple', + }, + { + date: new Date('1999-06-01'), + color: 'purple', + }, + { + date: new Date('1999-06-01'), + color: 'purple', + }, + { + date: new Date('1999-07-01'), + color: 'purple', + }, + { + date: new Date('1999-07-01'), + color: 'purple', + }, + { + date: new Date('1999-08-01'), + color: 'purple', + }, + { + date: new Date('1999-08-01'), + color: 'purple', + }, + { + date: new Date('1999-08-01'), + color: 'purple', + }, + { + date: new Date('1999-09-01'), + color: 'purple', + }, + { + date: new Date('1999-09-01'), + color: 'purple', + }, +]; +const quarterEvents = [ + { + date: new Date('1999-06-01'), + color: 'green', + }, + { + date: new Date('1999-06-01'), + color: 'green', + }, + { + date: new Date('1999-06-01'), + color: 'green', + }, + { + date: new Date('1999-07-01'), + color: 'green', + }, + { + date: new Date('1999-07-01'), + color: 'green', + }, + { + date: new Date('1999-07-01'), + color: 'green', + }, +]; +const yearEvents = [ + { + date: new Date('1999-01-01'), + color: 'blue', + }, + { + date: new Date('1999-01-01'), + color: 'blue', + }, + { + date: new Date('1999-01-01'), + color: 'blue', + }, +]; + +const dateFormatter = new Intl.DateTimeFormat('ru', { + month: 'long', +}); + +const getMonth = (date) => { + const [first, ...currentMonth] = dateFormatter.format(date); + + return first.toUpperCase().concat(...currentMonth); +}; + +const checkFocusedDay = (day: string) => cy.focused().should('have.attr', 'data-day', day); +const checkFocusedMonth = (monthIndex: string) => cy.focused().should('have.attr', 'data-month-index', monthIndex); + +describe('plasma-b2c: Calendar', () => { + const CalendarBase = getComponent('CalendarBase') as typeof CalendarBaseB2C; + const CalendarDouble = getComponent('CalendarDouble') as typeof CalendarDoubleB2C; + + const CypressTestDecoratorWithTypo: FC = ({ children }) => ( + + + {children} + + ); + + const Demo = (args) => { + const { min, max, includeEdgeDates, displayDouble, baseValue, size = 's', type = 'Days' } = args; + const [value, setValue] = useState(baseValue); + + const handleOnChange = useCallback((newValue: Date) => { + setValue(newValue); + }, []); + + const getCalendarComponent = (rest) => { + return displayDouble ? ( + + ) : ( + + ); + }; + + const calendarMap = { + Days: getCalendarComponent({ type: 'Days', eventList: events, disabledList: disabledDays }), + Months: getCalendarComponent({ type: 'Months', eventMonthList: monthEvents }), + Quarters: getCalendarComponent({ type: 'Quarters', eventQuarterList: quarterEvents }), + Years: getCalendarComponent({ type: 'Years', eventYearList: yearEvents }), + }; + + return {calendarMap[type]}; + }; + + it('default', () => { + mount( + <> + + + + + + + + , + ); + + cy.matchImageSnapshot(); + }); + + it('default: double calendar', () => { + mount( + <> + + + + + + + + , + ); + + cy.viewport(1200, 500); + + cy.matchImageSnapshot(); + }); + + it('size', () => { + mount( + <> + + + + + + + + , + ); + + cy.matchImageSnapshot(); + }); + + it('value as undefined', () => { + mount(); + + cy.get('body').find('[aria-selected="true"]').should('not.be.exist'); + }); + + it('days: prev month', () => { + mount(); + + cy.get('button').eq(1).click(); + + cy.matchImageSnapshot({ + failureThreshold: 0.01, + failureThresholdType: 'percent', + }); + }); + + it('days: next month', () => { + mount(); + + cy.get('button').eq(2).click(); + + cy.matchImageSnapshot({ + failureThreshold: 0.01, + failureThresholdType: 'percent', + }); + }); + + it('months: prev year', () => { + mount(); + + cy.get('button').eq(1).click(); + + cy.matchImageSnapshot({ + failureThreshold: 0.01, + failureThresholdType: 'percent', + }); + }); + + it('months: next year', () => { + mount(); + + cy.get('button').eq(2).click(); + + cy.matchImageSnapshot({ + failureThreshold: 0.01, + failureThresholdType: 'percent', + }); + }); + + it('quartes: prev year', () => { + mount(); + + cy.get('button').eq(1).click(); + + cy.matchImageSnapshot({ + failureThreshold: 0.01, + failureThresholdType: 'percent', + }); + }); + + it('quartes: next year', () => { + mount(); + + cy.get('button').eq(2).click(); + + cy.matchImageSnapshot({ + failureThreshold: 0.01, + failureThresholdType: 'percent', + }); + }); + + it('min and max', () => { + mount( + <> + + + + + + + + , + ); + + cy.matchImageSnapshot(); + }); + + it('min and max: double', () => { + mount( + <> + + + + + + + + , + ); + + cy.matchImageSnapshot(); + }); +}); + +describe('plasma-b2c: Calendar keyboard navigation', () => { + const CalendarBase = getComponent('CalendarBase') as typeof CalendarBaseB2C; + const CalendarDouble = getComponent('CalendarDouble') as typeof CalendarDoubleB2C; + + const CypressTestDecoratorWithTypo: FC = ({ children }) => ( + + + {children} + + ); + + const Demo = (args) => { + const { min, max, baseValue, displayDouble, disabledList, size = 's', type = 'Days' } = args; + const [value, setValue] = useState(baseValue); + + const disabledDates = disabledList?.length ? disabledList : disabledDays; + + const handleOnChange = useCallback((newValue: Date) => { + setValue(newValue); + }, []); + + const getCalendarComponent = (rest) => { + return displayDouble ? ( + + ) : ( + + ); + }; + + const calendarMap = { + Days: getCalendarComponent({ type: 'Days', eventList: events, disabledList: disabledDates }), + Months: getCalendarComponent({ type: 'Months', eventMonthList: monthEvents }), + Quarters: getCalendarComponent({ type: 'Quarters', eventQuarterList: quarterEvents }), + Years: getCalendarComponent({ type: 'Years', eventYearList: yearEvents }), + }; + + return {calendarMap[type]}; + }; + + beforeEach(() => { + cy.viewport(700, 500); + }); + + it('set value with `Enter` and `Space`', () => { + mount(); + + cy.get('body').type('{rightarrow}{enter}{rightarrow} '); + + cy.matchImageSnapshot(); + }); + + it('navigate with `Down`, `Left`, `Up`, `Right` arrows', () => { + mount(); + + cy.get('body') + .type('{downarrow}') + .type('{leftarrow}') + .type('{downarrow}') + .type('{rightarrow}') + .type('{uparrow}'); + + cy.matchImageSnapshot(); + }); + + it('navigate with `Home` and `End`', () => { + mount(); + + cy.get('body').type('{downarrow}').type('{end}'); + checkFocusedDay('18'); + checkFocusedMonth('6'); + + cy.get('body').type('{home}'); + checkFocusedDay('12'); + checkFocusedMonth('6'); + + cy.get('body').type('{end}').type('{uparrow}').type('{uparrow}').type('{home}'); + checkFocusedDay('1'); + checkFocusedMonth('6'); + }); + + it('navigate with `PageUp` and `PageDown`', () => { + mount(); + + cy.get('body').type('{pageup}'); + checkFocusedDay('9'); + checkFocusedMonth('5'); + + cy.get('body').type('{downarrow}').type('{pagedown}'); + checkFocusedDay('14'); + checkFocusedMonth('6'); + }); + + it('navigate with Shift + `PageUp` and `PageDown`', () => { + mount(); + + cy.get('body').type('{shift}{pageup}'); + cy.get('body') + .find('[data-day="2"][data-month-index="1"]') + .first() + .should('have.attr', 'tabindex', '0') + .should('have.attr', 'data-year', minBaseDate.getFullYear() - 1); + + cy.get('[id="id-grid-label"] span') + .first() + .contains(`${getMonth(minBaseDate)}`); + cy.get('[id="id-grid-label"] span') + .last() + .contains(`${minBaseDate.getFullYear() - 1}`); + + cy.get('body').type('{shift}{pagedown}'.repeat(2)); + cy.get('body') + .find('[data-day="7"][data-month-index="1"]') + .first() + .should('have.attr', 'tabindex', '0') + .should('have.attr', 'data-year', minBaseDate.getFullYear() + 1); + + cy.get('[id="id-grid-label"] span') + .first() + .contains(`${getMonth(minBaseDate)}`); + cy.get('[id="id-grid-label"] span') + .last() + .contains(`${minBaseDate.getFullYear() + 1}`); + }); + + it('navigate with arrow abroad bounds', () => { + mount(); + + cy.get('body').type('{leftarrow}'); + checkFocusedDay('31'); + checkFocusedMonth('0'); + + cy.get('body').type('{uparrow}').type('{uparrow}').type('{uparrow}').type('{uparrow}').type('{uparrow}'); + checkFocusedDay('27'); + checkFocusedMonth('11'); + + cy.get('body') + .type('{rightarrow}') + .type('{rightarrow}') + .type('{rightarrow}') + .type('{rightarrow}') + .type('{rightarrow}'); + checkFocusedDay('1'); + checkFocusedMonth('0'); + + cy.get('body').type('{uparrow}'); + checkFocusedDay('25'); + checkFocusedMonth('11'); + + cy.get('body').type('{downarrow}'); + checkFocusedDay('1'); + checkFocusedMonth('0'); + + cy.get('body').type('{leftarrow}').type('{downarrow}'); + checkFocusedDay('7'); + checkFocusedMonth('0'); + + cy.get('body') + .type('{downarrow}') + .type('{downarrow}') + .type('{downarrow}') + .type('{rightarrow}') + .type('{rightarrow}') + .type('{rightarrow}') + .type('{rightarrow}'); + checkFocusedDay('1'); + checkFocusedMonth('1'); + + cy.get('body').type('{downarrow}').type('{downarrow}').type('{downarrow}').type('{downarrow}'); + checkFocusedDay('1'); + checkFocusedMonth('2'); + }); + + it('double: navigate with arrow abroad bounds', () => { + mount(); + + cy.get('body').type('{leftarrow}'); + checkFocusedDay('31'); + checkFocusedMonth('0'); + + cy.get('body') + .type('{uparrow}') + .type('{uparrow}') + .type('{uparrow}') + .type('{uparrow}') + .type('{uparrow}') + .type('{uparrow}'); + checkFocusedDay('27'); + checkFocusedMonth('11'); + + cy.get('body') + .type('{rightarrow}') + .type('{rightarrow}') + .type('{rightarrow}') + .type('{rightarrow}') + .type('{rightarrow}'); + checkFocusedDay('1'); + checkFocusedMonth('0'); + + cy.get('body').type('{uparrow}'); + checkFocusedDay('25'); + checkFocusedMonth('11'); + + cy.get('body').type('{downarrow}'); + checkFocusedDay('1'); + checkFocusedMonth('0'); + + cy.get('body').type('{leftarrow}').type('{downarrow}'); + checkFocusedDay('7'); + checkFocusedMonth('0'); + + cy.get('body') + .type('{downarrow}') + .type('{downarrow}') + .type('{downarrow}') + .type('{rightarrow}') + .type('{rightarrow}') + .type('{rightarrow}') + .type('{rightarrow}'); + checkFocusedDay('1'); + checkFocusedMonth('1'); + + cy.get('body').type('{downarrow}').type('{downarrow}').type('{downarrow}').type('{downarrow}'); + checkFocusedDay('1'); + checkFocusedMonth('2'); + }); + + it('processing aria-disabled as disabled attr', () => { + mount(); + + cy.get('body').type('{downArrow}'.repeat(2)).type('{end}'); + + cy.get('body') + .find('[data-day="25"][data-month-index="6"]') + .first() + .should('have.attr', 'tabindex', '0') + .should('have.attr', 'aria-disabled', 'true'); + }); + + describe('navigate with pressed Shift and skipped disabled date', () => { + const shiftLeftArrow = '{shift}{leftArrow}'; + const shiftRightArrow = '{shift}{rightArrow}'; + const shiftDownArrow = '{shift}{downArrow}'; + const shiftUpArrow = '{shift}{upArrow}'; + + it('Arrow Left or Right in current month', () => { + const disabledDays = [ + { + date: new Date(1970, 1, 4), + }, + { + date: new Date(1970, 1, 5), + }, + ]; + + mount(); + + const start = '[data-day="3"][data-month-index="1"]'; + + cy.get('body').find(start).type(shiftRightArrow); + checkFocusedDay('6'); + checkFocusedMonth('1'); + + cy.focused().type(shiftLeftArrow); + checkFocusedDay('3'); + checkFocusedMonth('1'); + }); + + it('Arrow Up or Down in current month', () => { + const disabledDays = [ + { + date: new Date(1970, 1, 11), + }, + { + date: new Date(1970, 1, 12), + }, + ]; + + mount(); + + const start = '[data-day="4"][data-month-index="1"]'; + + cy.get('body').find(start).type(shiftDownArrow); + checkFocusedDay('13'); + checkFocusedMonth('1'); + + cy.get('body').find('[data-day="19"][data-month-index="1"]').type(shiftUpArrow); + checkFocusedDay('10'); + checkFocusedMonth('1'); + }); + + it('Arrow Left or Right between months', () => { + const disabledDays = [ + { + date: new Date(1970, 1, 28), + }, + { + date: new Date(1970, 2, 1), + }, + ]; + + mount(); + + const start = '[data-day="27"][data-month-index="1"]'; + + cy.get('body').find(start).type(shiftRightArrow); + checkFocusedDay('2'); + checkFocusedMonth('2'); + + cy.focused().type(shiftLeftArrow); + checkFocusedDay('27'); + checkFocusedMonth('1'); + }); + + it('Arrow Left or Right when entire one month disabled', () => { + const may = [ + { + date: new Date(1970, 4, 1), + }, + ]; + + const april = [ + ...[...new Array(30)].map((_, day) => ({ + date: new Date(1970, 3, 1 + day), + })), + ]; + + mount(); + + cy.get('body').find('[data-day="31"][data-month-index="2"]').type(shiftRightArrow); + checkFocusedDay('2'); + checkFocusedMonth('4'); + + cy.focused().type(shiftLeftArrow); + + checkFocusedDay('31'); + checkFocusedMonth('2'); + }); + + it('Arrow Left or Right when entire few months disabled', () => { + const march = [...new Array(31)].map((_, day) => ({ + date: new Date(1970, 2, 1 + day), + color: '', + })); + + const april = [...new Array(31)].map((_, day) => ({ + date: new Date(1970, 3, 1 + day), + color: '', + })); + + const may = [ + { + date: new Date(1970, 4, 1), + color: '', + }, + ]; + + mount(); + + const start = '[data-day="28"][data-month-index="1"]'; + + cy.get('body').find(start).type(shiftRightArrow); + checkFocusedDay('2'); + checkFocusedMonth('4'); + + cy.focused().type(shiftLeftArrow); + + checkFocusedDay('28'); + checkFocusedMonth('1'); + }); + + it("Can't jump to dates outside of min max dates", () => { + mount(); + + cy.get('body').find('[data-day="1"][data-month-index="1"]').type('leftArrow'); + checkFocusedDay('1'); + + cy.get('body').find('[data-day="1"][data-month-index="1"]').type(shiftLeftArrow); + checkFocusedDay('1'); + + cy.get('body').find('[data-day="28"][data-month-index="1"]').type('rightArrow'); + checkFocusedDay('28'); + + cy.get('body').find('[data-day="28"][data-month-index="1"]').type(shiftRightArrow); + checkFocusedDay('28'); + + cy.get('body').find('[data-day="5"][data-month-index="1"]').type('upArrow'); + checkFocusedDay('5'); + + cy.get('body').find('[data-day="5"][data-month-index="1"]').type(shiftUpArrow); + checkFocusedDay('5'); + + cy.get('body').find('[data-day="25"][data-month-index="1"]').type('downArrow'); + checkFocusedDay('25'); + + cy.get('body').find('[data-day="25"][data-month-index="1"]').type(shiftDownArrow); + checkFocusedDay('25'); + }); + + it("Can't jump to dates outside of min max dates in current month", () => { + mount(); + + cy.get('body').find('[data-day="14"][data-month-index="1"]').type('rightArrow'); + checkFocusedDay('14'); + + cy.get('body').find('[data-day="14"][data-month-index="1"]').type(shiftRightArrow); + checkFocusedDay('14'); + + cy.get('body').find('[data-day="11"][data-month-index="1"]').type('leftArrow'); + checkFocusedDay('11'); + + cy.get('body').find('[data-day="11"][data-month-index="1"]').type(shiftLeftArrow); + checkFocusedDay('11'); + + cy.get('body').find('[data-day="12"][data-month-index="1"]').type('upArrow'); + checkFocusedDay('12'); + + cy.get('body').find('[data-day="12"][data-month-index="1"]').type(shiftUpArrow); + checkFocusedDay('12'); + + cy.get('body').find('[data-day="12"][data-month-index="1"]').type('downArrow'); + checkFocusedDay('12'); + + cy.get('body').find('[data-day="12"][data-month-index="1"]').type(shiftDownArrow); + checkFocusedDay('12'); + }); + + it("Can't jump from the disabled day to the day of month that is outside min", () => { + const disabledList = [...new Array(8)].map((_, day) => ({ + date: new Date(1970, 4, 1 + day), + })); + + mount(); + + cy.get('body').find('[data-day="9"][data-month-index="4"]').first().type(shiftLeftArrow); + checkFocusedDay('9'); + + cy.focused().type(shiftUpArrow); + checkFocusedDay('9'); + }); + + it("Can't jump through disabled entire month in month that is outside min", () => { + const disabledList = [...new Array(28)].map((_, day) => ({ + date: new Date(1970, 1, 1 + day), + })); + + mount(); + + cy.get('body').find('[data-day="1"][data-month-index="2"]').type(shiftLeftArrow); + checkFocusedDay('1'); + cy.focused().type(shiftUpArrow); + checkFocusedDay('1'); + }); + + it("Can't jump from the disabled day to the day of month that is outside max", () => { + const disabledList = [...new Array(8)].map((_, day) => ({ + date: new Date(1970, 4, 24 + day), + })); + + mount(); + + cy.get('body').find('[data-day="23"][data-month-index="4"]').type(shiftRightArrow); + checkFocusedDay('23'); + cy.focused().type(shiftDownArrow); + checkFocusedDay('23'); + }); + + it("Can't jump through disabled entire month in month that is outside max", () => { + const disabledList = [...new Array(30)].map((_, day) => ({ + date: new Date(1970, 5, 1 + day), + })); + + mount(); + + cy.get('body').find('[data-day="31"][data-month-index="4"]').type(shiftRightArrow); + checkFocusedDay('31'); + cy.focused().type(shiftDownArrow); + checkFocusedDay('31'); + }); + }); + + describe('double: navigate with pressed Shift', () => { + const shiftDownArrow = '{shift}{downArrow}'; + const shiftUpArrow = '{shift}{upArrow}'; + + it('arrow up with min', () => { + const june = [...new Array(6)].map((_, day) => ({ + date: new Date(2022, 5, 1 + day), + })); + + mount( + , + ); + + const start = '[data-day="10"][data-month-index="5"]'; + + cy.get('body').find(start).type(shiftUpArrow); + + checkFocusedDay('10'); + checkFocusedMonth('5'); + }); + + it('arrow down with max', () => { + const june = [...new Array(6)].map((_, day) => ({ + date: new Date(2022, 5, 24 + day), + })); + + mount( + , + ); + + const start = '[data-day="17"][data-month-index="5"]'; + + cy.get('body').find(start).type(shiftDownArrow); + + checkFocusedDay('17'); + checkFocusedMonth('5'); + }); + }); +}); diff --git a/packages/plasma-b2c/src/components/Calendar/Calendar.stories.tsx b/packages/plasma-b2c/src/components/Calendar/Calendar.stories.tsx index f67d4b5f60..a8252d530f 100644 --- a/packages/plasma-b2c/src/components/Calendar/Calendar.stories.tsx +++ b/packages/plasma-b2c/src/components/Calendar/Calendar.stories.tsx @@ -1,18 +1,15 @@ -import React, { ComponentProps, useCallback, useMemo, useState } from 'react'; -import styled from 'styled-components'; +import React, { ComponentProps, useCallback, useRef, useState } from 'react'; import type { StoryObj, Meta } from '@storybook/react'; import { action } from '@storybook/addon-actions'; -import { backgroundPrimary } from '@salutejs/plasma-tokens-web'; -import { InSpacingDecorator } from '@salutejs/plasma-sb-utils'; +import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils'; -import { Popup } from '../Popup'; -import { TextField } from '../TextField'; +import { Tabs } from '../Tabs/Tabs'; +import { TabItem } from '../Tabs/TabItem'; +import { H3 } from '../Typography'; import { Calendar, CalendarBase, CalendarBaseRange, CalendarDouble, CalendarDoubleRange } from '.'; -import type { CalendarProps, CalendarBaseProps, CalendarDoubleProps } from '.'; const onChangeValue = action('onChangeValue'); -const onChangeStartOfRange = action('onChangeStartOfRange'); const meta: Meta = { title: 'Controls/Calendar', @@ -29,333 +26,279 @@ const meta: Meta = { type: 'date', }, }, + size: { + options: ['l', 'm', 's', 'xs'], + control: { + type: 'inline-radio', + }, + }, + ...disableProps([ + 'value', + 'onChangeValue', + 'date', + 'eventList', + 'disabledList', + 'eventMonthList', + 'disabledMonthList', + 'eventQuarterList', + 'disabledQuarterList', + 'eventYearList', + 'disabledYearList', + 'type', + 'view', + 'onChangeStartOfRange', + ]), }, }; export default meta; -type Story = StoryObj; - -const baseEvents = [ - { - date: new Date(2022, 5, 6), - }, - { - date: new Date(2022, 5, 10), - color: 'red', - }, - { - date: new Date(2022, 5, 10), - color: 'green', - }, - { - date: new Date(2022, 5, 10), - color: 'blue', - }, -]; - -const StyledTextField = styled(TextField)` - input[type='date']::-webkit-inner-spin-button, - input[type='date']::-webkit-calendar-picker-indicator { - display: none; - -webkit-appearance: none; - } -`; - -const StyledCalendar = styled(Calendar)` - background-color: ${backgroundPrimary}; - box-shadow: 0 0.063rem 0.25rem -0.063rem rgba(0, 0, 0, 0.04), 0 0.375rem 0.75rem -0.125rem rgba(8, 8, 8, 0.1); - border-radius: 0.75rem; -`; - -const CommonStoryProps = { - min: new Date(2022, 4, 0), - max: new Date(2022, 6, 15), - includeEdgeDates: false, +type CalendarProps = ComponentProps; +type CalendarBaseProps = ComponentProps; +type CalendarBaseRangeProps = ComponentProps; +const eventColors = ['red', 'green', 'blue', 'purple']; +const defaultMinDate = new Date(2016, 6, 1); +const defaultMaxDate = new Date(2030, 11, 24); + +const getBaseEvents = (type: 'days' | 'months' | 'quarters' | 'years', datesNumber = 2) => { + const baseDate = { + day: 10, + monthIndex: 6, + year: 2023, + }; + + const colorIndex = Math.floor(Math.random() * eventColors.length); + + const events = [...new Array(datesNumber)].map((_, index) => { + const eventNumber = Math.floor(Math.random() * 3 + 1); + const day = type === 'days' ? baseDate.day + index : 1; + const month = + // eslint-disable-next-line no-nested-ternary + type === 'months' || type === 'quarters' + ? baseDate.monthIndex + index + : type === 'days' + ? baseDate.monthIndex + : 0; + const year = type === 'years' ? baseDate.year + index : baseDate.year; + + return [...new Array(eventNumber)].map(() => { + return { date: new Date(year, month, day), color: eventColors[colorIndex] }; + }); + }); + + return events.flat(); }; -const StoryCalendarDefault = (props: CalendarProps) => { - const { isRange, isDouble, min, max, date, includeEdgeDates } = props; - const [value, setValue] = useState(new Date(2022, 5, 6)); - const [valueRange, setValueRange] = useState<[Date, Date?]>([new Date(2022, 5, 6), new Date(2022, 5, 10)]); +const StoryDefault = (args: CalendarProps) => { + 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)]); const handleOnChange = useCallback((newValue: Date) => { setValue(newValue); onChangeValue(newValue); }, []); - const handleOnRangeChange = useCallback((newValue: [Date, Date?]) => { setValueRange(newValue); }, []); - const eventsRange = [...new Array(10)].map((_, day) => ({ - date: new Date(2022, 5, 15 + day), - color: 'purple', - })); - - const disabledDays = [...new Array(5)].map((_, day) => ({ - date: new Date(2022, 5, 11 + day), - })); - return ( void} /> ); }; -export const Default: Story = { +export const Default: StoryObj = { args: { - ...CommonStoryProps, + min: new Date(2023, 10, 1), + max: new Date(2023, 11, 24), isDouble: false, isRange: false, + includeEdgeDates: false, + size: 'm', }, - render: (args) => , + render: (args) => , }; -const StoryCalendarBase = ({ min, max, type, includeEdgeDates }: CalendarBaseProps) => { - const [value, setValue] = useState(new Date(2022, 5, 6)); +const StoryBase = (args: CalendarBaseProps & { displayDouble: boolean }) => { + const { min, max, includeEdgeDates, size, displayDouble } = args; + const [value, setValue] = useState(new Date(2023, 6, 7)); + const [currentState, setCurrentState] = useState('Days'); - const handleOnChange = useCallback((newValue: Date) => { + const handleOnChange = useCallback((newValue: Date, dateInfo?: unknown) => { setValue(newValue); - onChangeValue(newValue); + onChangeValue(newValue, dateInfo); }, []); - const eventsRange = [...new Array(10)].map((_, day) => ({ - date: new Date(2022, 5, 15 + day), - color: 'purple', - })); + const eventList = useRef(getBaseEvents('days', 5)); + const eventMonthList = useRef(getBaseEvents('months', 5)); + const eventQuarterList = useRef(getBaseEvents('quarters')); + const eventYearList = useRef(getBaseEvents('years')); const disabledDays = [...new Array(5)].map((_, day) => ({ - date: new Date(2022, 5, 11 + day), + date: new Date(2023, 6, 23 + day), })); - return ( - - ); -}; - -export const Base: StoryObj = { - args: { - ...CommonStoryProps, - type: 'Days', - }, - argTypes: { - type: { - options: ['Days', 'Months', 'Years'], - control: { - type: 'select', - }, - }, - }, - render: (args) => , -}; - -const StoryCalendarDouble = ({ min, max, includeEdgeDates }: CalendarDoubleProps) => { - const [value, setValue] = useState(new Date(2022, 5, 6)); - const handleOnChange = useCallback((newValue: Date) => { - setValue(newValue); - onChangeValue(newValue); - }, []); - - const eventsRange = [...new Array(15)].map((_, day) => ({ - date: new Date(2022, 5, 25 + day), - color: 'purple', - })); - - const disabledDays = [...new Array(5)].map((_, day) => ({ - date: new Date(2022, 5, 11 + day), - })); - - return ( - - ); -}; - -export const Double: StoryObj = { - args: { - ...CommonStoryProps, - }, - render: (args) => , -}; - -const StoryCalendarRange = ({ min, max, type, includeEdgeDates }: ComponentProps) => { - const [values, setValue] = useState<[Date, Date?]>([new Date(2022, 5, 16), new Date(2022, 5, 25)]); - const handleOnChange = useCallback((newValue: [Date, Date?]) => { - onChangeValue(newValue); - setValue(newValue); - }, []); - - const eventsRange = [...new Array(10)].map((_, day) => ({ - date: new Date(2022, 5, 15 + day), - color: 'purple', - })); - - const disabledDays = [...new Array(5)].map((_, day) => ({ - date: new Date(2022, 5, 11 + day), - })); + const getCalendarComponent = ({ type, ...rest }) => { + return displayDouble ? ( + + ) : ( + + ); + }; - const eventList = useMemo(() => [...baseEvents, ...eventsRange], [eventsRange]); - const disabledList = useMemo(() => [{ date: new Date(2022, 5, 4) }, ...disabledDays], [disabledDays]); + const calendarMap = { + Days: getCalendarComponent({ type: 'Days', eventList: eventList.current, disabledList: disabledDays }), + Months: getCalendarComponent({ type: 'Months', eventMonthList: eventMonthList.current }), + Quarters: getCalendarComponent({ type: 'Quarters', eventQuarterList: eventQuarterList.current }), + Years: getCalendarComponent({ type: 'Years', eventYearList: eventYearList.current }), + }; return ( - + <> +

Тип календаря

+ + {Object.keys(calendarMap).map((state, i) => ( + setCurrentState(state)} + size="m" + > + {state} + + ))} + +
{calendarMap[currentState]}
+ ); }; -export const Range: StoryObj> = { +export const Base: StoryObj = { argTypes: { - type: { - options: ['Days', 'Months', 'Years'], - control: { - type: 'select', - }, - }, - }, - args: { - min: new Date(2022, 4, 0), - max: new Date(2022, 7, 15), - includeEdgeDates: false, - type: 'Days', + ...disableProps(['isRange', 'isDouble']), }, - render: (args) => , -}; - -const StoryDoubleRange = ({ min, max, includeEdgeDates }: ComponentProps) => { - const [values, setValue] = useState<[Date, Date?]>([new Date(2022, 5, 7), new Date(2022, 6, 9)]); - const handleOnChange = useCallback((newValue: [Date, Date?]) => { - onChangeValue(newValue); - setValue(newValue); - }, []); - - const eventsRange = [...new Array(10)].map((_, day) => ({ - date: new Date(2022, 5, 15 + day), - color: 'purple', - })); - - const disabledDays = [...new Array(7)].map((_, day) => ({ - date: new Date(2022, 6, 10 + day), - })); - - const eventList = useMemo(() => [...baseEvents, ...eventsRange], [eventsRange]); - const disabledList = useMemo(() => [{ date: new Date(2022, 5, 4) }, ...disabledDays], [disabledDays]); - - return ( - - ); -}; - -export const DoubleRange: StoryObj> = { args: { - min: new Date(2022, 4, 0), - max: new Date(2022, 7, 15), + size: 'm', + min: defaultMinDate, + max: defaultMaxDate, includeEdgeDates: false, + displayDouble: false, }, - render: (args) => , + render: (args) => , }; -const StoryCalendarWithPopup = ({ min, max, isDouble, includeEdgeDates }: CalendarProps) => { - const [textValue, setTextValue] = useState('2022-06-06'); - const [value, setValue] = useState(new Date(textValue)); - const [isOpen, setIsOpen] = useState(false); - - const handleOnTextChange = useCallback((event: ChangeEvent) => { - const newValue = event.target.value; - setTextValue(newValue); - setValue(new Date(newValue)); - }, []); +const StoryRange = (args: CalendarBaseRangeProps & { displayDouble: boolean }) => { + const { min, max, includeEdgeDates, size, displayDouble } = args; + const [values, setValue] = useState<[Date, Date?]>([new Date(2023, 6, 1), new Date(2023, 6, 16)]); + const [currentState, setCurrentState] = useState('Days'); - const handleOnChange = useCallback((newValue: Date) => { + const handleOnChange = (newValue: [Date, Date?], dateInfo) => { + onChangeValue(newValue, dateInfo); setValue(newValue); - setTextValue(new Date(newValue).toLocaleDateString('en-CA')); - setIsOpen(false); - onChangeValue(newValue); - }, []); + }; - const onToggle = useCallback((newIsOpen) => { - setIsOpen(newIsOpen); - }, []); - - const eventsRange = [...new Array(10)].map((_, day) => ({ - date: new Date(2022, 5, 15 + day), - color: 'purple', - })); + const eventList = useRef(getBaseEvents('days', 5)); + const eventMonthList = useRef(getBaseEvents('months', 5)); + const eventQuarterList = useRef(getBaseEvents('quarters')); + const eventYearList = useRef(getBaseEvents('years')); const disabledDays = [...new Array(5)].map((_, day) => ({ - date: new Date(2022, 5, 11 + day), + date: new Date(2023, 6, 23 + day), })); - return ( - } - onToggle={onToggle} - > - { + return displayDouble ? ( + + ) : ( + - + ); + }; + + const calendarMap = { + Days: getCalendarComponent({ type: 'Days', eventList: eventList.current, disabledList: disabledDays }), + Months: getCalendarComponent({ type: 'Months', eventMonthList: eventMonthList.current }), + Quarters: getCalendarComponent({ type: 'Quarters', eventQuarterList: eventQuarterList.current }), + Years: getCalendarComponent({ type: 'Years', eventYearList: eventYearList.current }), + }; + + return ( + <> +

Тип календаря

+ + {Object.keys(calendarMap).map((state, i) => ( + setCurrentState(state)} + size="m" + > + {state} + + ))} + +
{calendarMap[currentState]}
+ ); }; -export const WithPopup: Story = { +export const Range: StoryObj = { + argTypes: { + ...disableProps(['isRange', 'isDouble']), + }, args: { - ...CommonStoryProps, - isDouble: false, + size: 'm', + min: defaultMinDate, + max: defaultMaxDate, + includeEdgeDates: false, + displayDouble: false, }, - render: (args) => , + render: (args) => , }; diff --git a/packages/plasma-b2c/src/components/Calendar/CalendarBase.component-test.tsx b/packages/plasma-b2c/src/components/Calendar/CalendarBase.component-test.tsx deleted file mode 120000 index baffe7e7f2..0000000000 --- a/packages/plasma-b2c/src/components/Calendar/CalendarBase.component-test.tsx +++ /dev/null @@ -1 +0,0 @@ -../../../../plasma-web/src/components/Calendar/Calendar.component-test.tsx \ No newline at end of file diff --git a/packages/plasma-b2c/src/components/Calendar/CalendarBase.config.ts b/packages/plasma-b2c/src/components/Calendar/CalendarBase.config.ts index 83cc1c49de..261fe65776 100644 --- a/packages/plasma-b2c/src/components/Calendar/CalendarBase.config.ts +++ b/packages/plasma-b2c/src/components/Calendar/CalendarBase.config.ts @@ -52,6 +52,19 @@ export const config = { ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.75rem; + ${calendarBaseTokens.calendarQuarterItemWidth}: 11.75rem; + ${calendarBaseTokens.calendarQuarterItemHeight}: 10.5rem; + + ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); + ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); + ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: 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; @@ -113,6 +126,19 @@ export const config = { ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.625rem; + ${calendarBaseTokens.calendarQuarterItemWidth}: 10rem; + ${calendarBaseTokens.calendarQuarterItemHeight}: 8.5rem; + + ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); + ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); + ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: 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; @@ -174,6 +200,19 @@ export const config = { ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.5rem; + ${calendarBaseTokens.calendarQuarterItemWidth}: 8.25rem; + ${calendarBaseTokens.calendarQuarterItemHeight}: 7rem; + + ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); + ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); + ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: 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; @@ -235,6 +274,19 @@ export const config = { ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; + ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.375rem; + ${calendarBaseTokens.calendarQuarterItemWidth}: 8.25rem; + ${calendarBaseTokens.calendarQuarterItemHeight}: 6.563rem; + + ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); + ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); + ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: 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; diff --git a/packages/plasma-b2c/src/components/Calendar/CalendarDouble.config.ts b/packages/plasma-b2c/src/components/Calendar/CalendarDouble.config.ts index bd3cd59543..f706a3a68c 100644 --- a/packages/plasma-b2c/src/components/Calendar/CalendarDouble.config.ts +++ b/packages/plasma-b2c/src/components/Calendar/CalendarDouble.config.ts @@ -53,6 +53,19 @@ export const config = { ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.75rem; + ${calendarDoubleTokens.calendarQuarterItemWidth}: 11.75rem; + ${calendarDoubleTokens.calendarQuarterItemHeight}: 10.5rem; + + ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); + ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); + ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: 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; @@ -114,6 +127,19 @@ export const config = { ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.625rem; + ${calendarDoubleTokens.calendarQuarterItemWidth}: 10rem; + ${calendarDoubleTokens.calendarQuarterItemHeight}: 8.5rem; + + ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); + ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); + ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: 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; @@ -176,6 +202,19 @@ export const config = { ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.5rem; + ${calendarDoubleTokens.calendarQuarterItemWidth}: 8.25rem; + ${calendarDoubleTokens.calendarQuarterItemHeight}: 7rem; + + ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); + ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); + ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: 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; @@ -237,6 +276,19 @@ export const config = { ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; + ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.375rem; + ${calendarDoubleTokens.calendarQuarterItemWidth}: 8.25rem; + ${calendarDoubleTokens.calendarQuarterItemHeight}: 6.563rem; + + ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); + ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); + ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: 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; diff --git a/packages/plasma-b2c/src/components/Calendar/CalendarRange.component-test.tsx b/packages/plasma-b2c/src/components/Calendar/CalendarRange.component-test.tsx new file mode 100644 index 0000000000..516150f75e --- /dev/null +++ b/packages/plasma-b2c/src/components/Calendar/CalendarRange.component-test.tsx @@ -0,0 +1,154 @@ +/* eslint-disable newline-per-chained-call */ +import React, { useCallback, useState } from 'react'; +import type { FC, PropsWithChildren } from 'react'; +import { createGlobalStyle } from 'styled-components'; +import { standard as standardTypo } from '@salutejs/plasma-typo'; +import { mount, CypressTestDecorator, getComponent, PadMe } from '@salutejs/plasma-cy-utils'; + +import { CalendarDoubleRange as CalendarDoubleRangeB2C, CalendarBaseRange as CalendarBaseRangeB2C } from './Calendar'; + +const StandardTypoStyle = createGlobalStyle(standardTypo); + +const events = [ + { + date: new Date('1999-07-09'), + color: 'red', + }, + { + date: new Date('1999-07-09'), + color: 'red', + }, + { + date: new Date('1999-07-10'), + color: 'red', + }, + { + date: new Date('1999-07-11'), + color: 'red', + }, + { + date: new Date('1999-07-12'), + color: 'red', + }, + { + date: new Date('1999-07-12'), + color: 'red', + }, +]; +const disabledDays = [...new Array(5)].map((_, day) => ({ + date: new Date(1999, 6, 23 + day), +})); + +describe('plasma-b2c: CalendarRange', () => { + const CalendarBaseRange = getComponent('CalendarBaseRange') as typeof CalendarBaseRangeB2C; + const CalendarDoubleRange = getComponent('CalendarDoubleRange') as typeof CalendarDoubleRangeB2C; + + const CypressTestDecoratorWithTypo: FC = ({ children }) => ( + + + {children} + + ); + + const Demo = (args) => { + const { min, max, displayDouble, baseValue, size = 's', type = 'Days' } = args; + const [values, setValue] = useState<[Date, Date?]>(baseValue); + + const handleOnChange = useCallback((newValue: [Date, Date?]) => { + setValue(newValue); + }, []); + + const getCalendarComponent = (rest) => { + return displayDouble ? ( + + ) : ( + + ); + }; + + const calendarMap = { + Days: getCalendarComponent({ type: 'Days', eventList: events, disabledList: disabledDays }), + Months: getCalendarComponent({ type: 'Months' }), + Quarters: getCalendarComponent({ type: 'Quarters' }), + Years: getCalendarComponent({ type: 'Years' }), + }; + + return {calendarMap[type]}; + }; + + it('default', () => { + mount( + <> + + + + + + + + , + ); + + cy.matchImageSnapshot({ + failureThreshold: 0.01, + failureThresholdType: 'percent', + }); + }); + + it('default: double calendar', () => { + mount( + <> + + + + + + + + , + ); + + cy.viewport(1200, 500); + + cy.matchImageSnapshot(); + }); + + it('range with init values as undefined', () => { + mount(); + + cy.get('body').find('[aria-selected="true"]').should('not.be.exist'); + }); + + it('range in progress', () => { + mount(); + + cy.get('div:nth-of-type(5) > div:nth-of-type(5)').first().trigger('mouseover'); + + cy.matchImageSnapshot(); + }); + + it('range in progress with disabled', () => { + mount(); + + cy.get('div:nth-of-type(5) > div:nth-of-type(4)').first().trigger('mouseover'); + cy.get('div:nth-of-type(6) > div:nth-of-type(3)').first().trigger('mouseover'); + + cy.matchImageSnapshot(); + }); +}); diff --git a/packages/plasma-b2c/src/components/Chip/Chip.component-test.tsx b/packages/plasma-b2c/src/components/Chip/Chip.component-test.tsx index 09c4190536..749d0f3448 100644 --- a/packages/plasma-b2c/src/components/Chip/Chip.component-test.tsx +++ b/packages/plasma-b2c/src/components/Chip/Chip.component-test.tsx @@ -2,10 +2,12 @@ import React from 'react'; import { IconDownload } from '@salutejs/plasma-icons'; import { mount, CypressTestDecorator, getComponent, PadMe, SpaceMe } from '@salutejs/plasma-cy-utils'; +import { Chip as ChipB2C } from '.'; + const Icon = () => ; -describe('plasma-web: Chip', () => { - const Chip = getComponent('Chip'); +describe('plasma-b2c: Chip', () => { + const Chip = getComponent('Chip') as typeof ChipB2C; it('simple', () => { mount( @@ -17,6 +19,16 @@ describe('plasma-web: Chip', () => { cy.matchImageSnapshot(); }); + it('without Clear', () => { + mount( + + Hello Plasma + , + ); + + cy.matchImageSnapshot(); + }); + it('with Icon', () => { mount( diff --git a/packages/plasma-b2c/src/components/Chip/Chip.stories.tsx b/packages/plasma-b2c/src/components/Chip/Chip.stories.tsx index 86b93d02cb..a5ed3115db 100644 --- a/packages/plasma-b2c/src/components/Chip/Chip.stories.tsx +++ b/packages/plasma-b2c/src/components/Chip/Chip.stories.tsx @@ -51,6 +51,7 @@ export const Default: Story = { text: 'This is chip', view: 'default', size: 'm', + hasClear: true, disabled: false, focused: true, pilled: false, diff --git a/packages/plasma-b2c/src/components/DatePicker/DatePicker.config.ts b/packages/plasma-b2c/src/components/DatePicker/DatePicker.config.ts index eb38c9637a..a387f17251 100644 --- a/packages/plasma-b2c/src/components/DatePicker/DatePicker.config.ts +++ b/packages/plasma-b2c/src/components/DatePicker/DatePicker.config.ts @@ -137,6 +137,19 @@ export const config = { ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem; + ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; + ${tokens.calendarQuarterItemWidth}: 11.75rem; + ${tokens.calendarQuarterItemHeight}: 10.5rem; + + ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDaysPadding}: 0.5rem 1rem 1.125rem 1rem; ${tokens.calendarDayItemBorderRadius}: 0.75rem; ${tokens.calendarDayItemWidth}: 3.5rem; @@ -232,6 +245,19 @@ export const config = { ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem; + ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; + ${tokens.calendarQuarterItemWidth}: 10rem; + ${tokens.calendarQuarterItemHeight}: 8.5rem; + + ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthsPadding}: 0.5rem 1rem 1.125rem 1rem; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; ${tokens.calendarMonthItemWidth}: 6.688rem; @@ -340,6 +366,19 @@ export const config = { ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem; + ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; + ${tokens.calendarQuarterItemWidth}: 8.25rem; + ${tokens.calendarQuarterItemHeight}: 7rem; + + ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthsPadding}: 0.5rem 1rem 0.875rem 1rem; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; ${tokens.calendarMonthItemWidth}: 5.5rem; @@ -448,6 +487,19 @@ export const config = { ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; + ${tokens.calendarQuarterItemBorderRadius}: 0.375rem; + ${tokens.calendarQuarterItemWidth}: 8.25rem; + ${tokens.calendarQuarterItemHeight}: 6.563rem; + + ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.calendarQuarterSelectedFontWeight}: 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; diff --git a/packages/plasma-b2c/src/components/Dropdown/Dropdown.component-test.tsx b/packages/plasma-b2c/src/components/Dropdown/Dropdown.component-test.tsx index b6708de7e2..52fc2e292b 100644 --- a/packages/plasma-b2c/src/components/Dropdown/Dropdown.component-test.tsx +++ b/packages/plasma-b2c/src/components/Dropdown/Dropdown.component-test.tsx @@ -569,25 +569,62 @@ describe('plasma-b2c: Dropdown', () => { // Arrows Right and Left cy.realPress('ArrowDown').realPress('ArrowDown').realPress('ArrowRight'); - cy.get('#tree_level_1').should('be.visible'); - cy.get('#tree_level_2').should('be.visible'); - cy.get('#brazil').should('have.class', 'dropdown-item-is-focused'); + cy.get('#south_america').should('have.class', 'dropdown-item-is-focused'); + cy.get('#south_america').should('have.class', 'dropdown-item-is-active'); cy.get('button').should('have.focus'); + cy.realPress('ArrowRight'); + cy.get('#south_america').should('not.have.class', 'dropdown-item-is-focused'); + cy.get('#brazil').should('have.class', 'dropdown-item-is-focused'); cy.get('#south_america').should('have.class', 'dropdown-item-is-active'); - cy.realPress('ArrowLeft'); - cy.get('#tree_level_1').should('be.visible'); - cy.get('#tree_level_2').should('not.be.visible'); + cy.realPress('ArrowLeft').realPress('ArrowLeft'); cy.get('#south_america').should('have.class', 'dropdown-item-is-focused'); - cy.realPress('ArrowDown').realPress('ArrowRight'); - cy.get('#france').should('have.class', 'dropdown-item-is-focused'); + cy.get('#south_america').should('not.have.class', 'dropdown-item-is-active'); + cy.realPress('ArrowDown') + .realPress('ArrowDown') + .realPress('ArrowRight') + .realPress('ArrowRight') + .realPress('ArrowRight') + .realPress('ArrowRight'); + cy.get('#beijing').should('have.class', 'dropdown-item-is-focused'); + cy.get('#asia').should('have.class', 'dropdown-item-is-active'); + cy.get('#china').should('have.class', 'dropdown-item-is-active'); cy.get('button').should('have.focus'); - cy.get('#europe').should('have.class', 'dropdown-item-is-active'); - cy.realPress('ArrowRight'); - cy.get('#europe').should('have.class', 'dropdown-item-is-active'); - cy.get('#france').should('have.class', 'dropdown-item-is-active'); - cy.get('#paris').should('have.class', 'dropdown-item-is-focused'); - cy.realPress('ArrowLeft').realPress('ArrowLeft').realPress('ArrowLeft'); + cy.realPress('ArrowLeft') + .realPress('ArrowLeft') + .realPress('ArrowLeft') + .realPress('ArrowLeft') + .realPress('ArrowLeft'); cy.get('#tree_level_1').should('not.be.visible'); + cy.get('#tree_level_2').should('not.be.visible'); + cy.get('#tree_level_3').should('not.be.visible'); + cy.get('button').should('have.focus'); + cy.realPress('ArrowDown').realPress('ArrowDown').realPress('ArrowRight'); + cy.realPress('PageDown'); + cy.get('#africa').should('have.class', 'dropdown-item-is-focused'); + cy.get('#south_america').should('not.have.class', 'dropdown-item-is-active'); + cy.get('#tree_level_2').should('not.be.visible'); + cy.realPress('Escape'); + cy.get('button').should('have.focus'); + cy.realPress('ArrowDown').realPress('ArrowDown').realPress('ArrowRight'); + cy.realPress('PageUp'); + cy.get('#north_america').should('have.class', 'dropdown-item-is-focused'); + cy.get('#south_america').should('not.have.class', 'dropdown-item-is-active'); + cy.get('#tree_level_2').should('not.be.visible'); + cy.realPress('Escape'); + cy.get('button').should('have.focus'); + cy.realPress('ArrowDown').realPress('ArrowDown').realPress('ArrowRight'); + cy.realPress('Home'); + cy.get('#north_america').should('have.class', 'dropdown-item-is-focused'); + cy.get('#south_america').should('not.have.class', 'dropdown-item-is-active'); + cy.get('#tree_level_2').should('not.be.visible'); + cy.realPress('Escape'); + cy.get('button').should('have.focus'); + cy.realPress('ArrowDown').realPress('ArrowDown').realPress('ArrowRight'); + cy.realPress('End'); + cy.get('#africa').should('have.class', 'dropdown-item-is-focused'); + cy.get('#south_america').should('not.have.class', 'dropdown-item-is-active'); + cy.get('#tree_level_2').should('not.be.visible'); + cy.realPress('Escape'); cy.get('button').should('have.focus'); // Escape @@ -638,6 +675,7 @@ describe('plasma-b2c: Dropdown', () => { .realPress('ArrowDown') .realPress('Space') .realPress('ArrowLeft') + .realPress('ArrowLeft') .realPress('ArrowUp') .realPress('Space'); cy.get('#tree_level_1').should('not.be.visible'); @@ -648,6 +686,7 @@ describe('plasma-b2c: Dropdown', () => { .realPress('ArrowDown') .realPress('Enter') .realPress('ArrowLeft') + .realPress('ArrowLeft') .realPress('ArrowUp') .realPress('Enter'); cy.get('#tree_level_1').should('not.be.visible'); diff --git a/packages/plasma-b2c/src/components/Dropdown/Dropdown.config.ts b/packages/plasma-b2c/src/components/Dropdown/Dropdown.config.ts index ae9e0f998a..fddc8a8387 100644 --- a/packages/plasma-b2c/src/components/Dropdown/Dropdown.config.ts +++ b/packages/plasma-b2c/src/components/Dropdown/Dropdown.config.ts @@ -93,7 +93,7 @@ export const config = { ${dropdownTokens.disabledOpacity}: 0.4; ${dropdownTokens.focusColor}: var(--surface-accent); ${dropdownTokens.background}: var(--surface-solid-card); - ${dropdownTokens.boxShadow}: var(--shadow-down-soft-s); + ${dropdownTokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${dropdownTokens.disclosureIconColor}: var(--text-secondary); ${dropdownTokens.itemBackground}: var(--plasma-colors-transparent); ${dropdownTokens.itemBackgroundHover}: var(--surface-transparent-secondary); diff --git a/packages/plasma-b2c/src/components/Dropdown/index.ts b/packages/plasma-b2c/src/components/Dropdown/index.ts index 08bcb4f511..b7b13819be 100644 --- a/packages/plasma-b2c/src/components/Dropdown/index.ts +++ b/packages/plasma-b2c/src/components/Dropdown/index.ts @@ -3,6 +3,7 @@ export type { DropdownProps } from '@salutejs/plasma-new-hope/styled-components' export { Dropdown } from './Dropdown'; +// TODO: #1271 export { DropdownItem } from './components/DropdownItem'; export { DropdownPopup } from './components/DropdownPopup'; export { DropdownList } from './components/DropdownList'; diff --git a/packages/plasma-b2c/src/components/EmptyState/EmptyState.config.ts b/packages/plasma-b2c/src/components/EmptyState/EmptyState.config.ts new file mode 100644 index 0000000000..406c7041d2 --- /dev/null +++ b/packages/plasma-b2c/src/components/EmptyState/EmptyState.config.ts @@ -0,0 +1,67 @@ +import { css, emptyStateTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; + +export const config = { + defaults: { + size: 'l', + }, + variations: { + size: { + l: css` + ${tokens.borderRadius}: 0.875rem; + ${tokens.padding}: 2rem 1rem 1rem 1rem; + ${tokens.iconMargin}: 0 0 0.5rem 0; + ${tokens.descriptionMargin}: 0 0 1rem 0; + ${tokens.buttonMargin}: -1rem 0 0 0; + ${tokens.buttonHeight}: 3.5rem; + ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + `, + m: css` + ${tokens.borderRadius}: 0.75rem; + ${tokens.padding}: 1.625rem 1rem 0.875rem 1rem; + ${tokens.iconMargin}: 0 0 0.375rem 0; + ${tokens.descriptionMargin}: 0 0 0.875rem 0; + ${tokens.buttonMargin}: -0.875rem 0 0 0; + ${tokens.buttonHeight}: 3rem; + ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + `, + s: css` + ${tokens.borderRadius}: 0.625rem; + ${tokens.padding}: 1.375rem 0.875rem 0.625rem 0.875rem; + ${tokens.iconMargin}: 0 0 0.25rem 0; + ${tokens.descriptionMargin}: 0 0 0.625rem 0; + ${tokens.buttonMargin}: -0.625rem 0 0 0; + ${tokens.buttonHeight}: 2.5rem; + ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + `, + xs: css` + ${tokens.borderRadius}: 0.5rem; + ${tokens.padding}: 1rem 0.625rem 0.5rem 0.625rem; + ${tokens.iconMargin}: 0 0 0.25rem 0; + ${tokens.descriptionMargin}: 0 0 0.5rem 0; + ${tokens.buttonMargin}: -0.5rem 0 0 0; + ${tokens.buttonHeight}: 2rem; + ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height); + `, + }, + }, +}; diff --git a/packages/plasma-b2c/src/components/EmptyState/EmptyState.stories.tsx b/packages/plasma-b2c/src/components/EmptyState/EmptyState.stories.tsx new file mode 100644 index 0000000000..6c29f6c3db --- /dev/null +++ b/packages/plasma-b2c/src/components/EmptyState/EmptyState.stories.tsx @@ -0,0 +1,43 @@ +import type { ComponentProps } from 'react'; +import type { StoryObj, Meta } from '@storybook/react'; +import * as React from 'react'; +import { InSpacingDecorator } from '@salutejs/plasma-sb-utils'; +import { IconPlasma } from '@salutejs/plasma-icons'; + +import { EmptyState } from './EmptyState'; + +const sizes = ['l', 'm', 's', 'xs']; + +type StoryProps = ComponentProps & { + enableIcon: boolean; +}; + +const meta: Meta = { + title: 'Content/EmptyState', + decorators: [InSpacingDecorator], + component: EmptyState, + args: { + description: 'Описание', + buttonText: 'Кнопка', + size: 'l', + enableIcon: true, + }, + argTypes: { + size: { + options: sizes, + control: { + type: 'inline-radio', + }, + }, + }, +}; + +export default meta; + +const DefaultStory = (args: StoryProps) => { + return : undefined} />; +}; + +export const Default: StoryObj = { + render: (args) => , +}; diff --git a/packages/plasma-b2c/src/components/EmptyState/EmptyState.ts b/packages/plasma-b2c/src/components/EmptyState/EmptyState.ts new file mode 100644 index 0000000000..ed5712ce7b --- /dev/null +++ b/packages/plasma-b2c/src/components/EmptyState/EmptyState.ts @@ -0,0 +1,7 @@ +import { emptyStateConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components'; + +import { config } from './EmptyState.config'; + +export const mergedConfig = mergeConfig(emptyStateConfig, config); + +export const EmptyState = component(mergedConfig); diff --git a/packages/plasma-b2c/src/components/EmptyState/index.ts b/packages/plasma-b2c/src/components/EmptyState/index.ts new file mode 100644 index 0000000000..89798dbd68 --- /dev/null +++ b/packages/plasma-b2c/src/components/EmptyState/index.ts @@ -0,0 +1 @@ +export { EmptyState } from './EmptyState'; diff --git a/packages/plasma-b2c/src/components/Pagination/Pagination.component-test.tsx b/packages/plasma-b2c/src/components/Pagination/Pagination.component-test.tsx index 5c35dfe9b4..b5cbd9dfb7 100644 --- a/packages/plasma-b2c/src/components/Pagination/Pagination.component-test.tsx +++ b/packages/plasma-b2c/src/components/Pagination/Pagination.component-test.tsx @@ -289,9 +289,11 @@ describe('plasma-new-hope: Pagination Content', () => { cy.matchImageSnapshot(); }); it('setSelect', () => { + cy.viewport(1000, 500); + mount( - + , ); cy.get('button').last().click(); diff --git a/packages/plasma-b2c/src/components/Pagination/Pagination.config.ts b/packages/plasma-b2c/src/components/Pagination/Pagination.config.ts index db33a5b2ea..76bb3dbd26 100644 --- a/packages/plasma-b2c/src/components/Pagination/Pagination.config.ts +++ b/packages/plasma-b2c/src/components/Pagination/Pagination.config.ts @@ -8,21 +8,44 @@ export const config = { }, variations: { view: { + default: css` + ${paginationTokens.buttonColor}: var(--inverse-text-primary); + ${paginationTokens.buttonColorHover}: var(--inverse-text-primary-hover); + ${paginationTokens.buttonColorActive}: var(--inverse-text-primary-active); + ${paginationTokens.buttonHoverColor}: var(--inverse-text-primary); + ${paginationTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${paginationTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); + ${paginationTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); + ${paginationTokens.buttonActiveColor}: var(--inverse-text-primary); + ${paginationTokens.buttonArrowColor}: var(--inverse-text-secondary); + ${paginationTokens.buttonArrowColorHover}: var(--inverse-text-secondary-hover); + ${paginationTokens.buttonArrowColorActive}: var(--inverse-text-secondary-hover); + + ${paginationTokens.buttonDisabledOpacity}: 0.4; + + ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); + ${paginationTokens.inputBorderColor}:transparent; + ${paginationTokens.selectBackgroundColor}: color-mix( + in srgb, + var(--inverse-text-primary), + var(--surface-solid-default) 85% + ); + + ${paginationTokens.paginationColor}: var(--text-primary); + ${paginationTokens.buttonFocusColor}: var(--surface-accent); + `, secondary: css` ${paginationTokens.buttonColor}: var(--text-primary); + ${paginationTokens.buttonColorHover}: var(--text-primary-hover); + ${paginationTokens.buttonColorActive}: var(--text-primary-active); ${paginationTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${paginationTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); + ${paginationTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); ${paginationTokens.buttonHoverColor}: var(--text-primary); - ${paginationTokens.buttonHoverBackgroundColor}: color-mix( - in srgb, - var(--inverse-text-primary), - var(--surface-transparent-secondary) 85% - ); ${paginationTokens.buttonActiveColor}: var(--text-primary); - ${paginationTokens.buttonActiveBackgroundColor}: color-mix( - in srgb, - var(--inverse-text-primary), - var(--surface-transparent-secondary) 80% - ); + ${paginationTokens.buttonArrowColor}: var(--text-secondary); + ${paginationTokens.buttonArrowColorHover}: var(--text-secondary-hover); + ${paginationTokens.buttonArrowColorActive}: var(--text-secondary-hover); ${paginationTokens.buttonDisabledOpacity}: 0.4; @@ -35,11 +58,16 @@ export const config = { `, clear: css` ${paginationTokens.buttonColor}: var(--text-primary); + ${paginationTokens.buttonColorHover}: var(--text-primary-hover); + ${paginationTokens.buttonColorActive}: var(--text-primary-active); ${paginationTokens.buttonBackgroundColor}: var(--surface-clear); + ${paginationTokens.buttonBackgroundColorHover}: var(--surface-clear); + ${paginationTokens.buttonBackgroundColorActive}: var(--surface-clear); ${paginationTokens.buttonHoverColor}: var(--text-primary); - ${paginationTokens.buttonHoverBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 95%); ${paginationTokens.buttonActiveColor}: var(--text-primary); - ${paginationTokens.buttonActiveBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 90%); + ${paginationTokens.buttonArrowColor}: var(--text-secondary); + ${paginationTokens.buttonArrowColorHover}: var(--text-secondary-hover); + ${paginationTokens.buttonArrowColorActive}: var(--text-secondary-hover); ${paginationTokens.buttonDisabledOpacity}: 0.4; @@ -50,54 +78,22 @@ export const config = { ${paginationTokens.paginationColor}: var(--text-primary); ${paginationTokens.buttonFocusColor}: var(--surface-accent); `, - default: css` - ${paginationTokens.buttonColor}: var(--inverse-text-primary); - ${paginationTokens.buttonBackgroundColor}: var(--surface-solid-default); - ${paginationTokens.buttonHoverColor}: var(--inverse-text-primary); - ${paginationTokens.buttonHoverBackgroundColor}: color-mix( - in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% - ); - ${paginationTokens.buttonActiveColor}: var(--inverse-text-primary); - ${paginationTokens.buttonActiveBackgroundColor}: color-mix( - in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 80% - ); - - ${paginationTokens.buttonDisabledOpacity}: 0.4; - - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.selectBackgroundColor}: color-mix( - in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% - ); - ${paginationTokens.inputBorderColor}:transparent; - - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); - `, /** * @deprecated * использовать `default` */ primary: css` ${paginationTokens.buttonColor}: var(--inverse-text-primary); - ${paginationTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${paginationTokens.buttonColorHover}: var(--inverse-text-primary-hover); + ${paginationTokens.buttonColorActive}: var(--inverse-text-primary-active); ${paginationTokens.buttonHoverColor}: var(--inverse-text-primary); - ${paginationTokens.buttonHoverBackgroundColor}: color-mix( - in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% - ); + ${paginationTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${paginationTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); + ${paginationTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); ${paginationTokens.buttonActiveColor}: var(--inverse-text-primary); - ${paginationTokens.buttonActiveBackgroundColor}: color-mix( - in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 80% - ); + ${paginationTokens.buttonArrowColor}: var(--inverse-text-secondary); + ${paginationTokens.buttonArrowColorHover}: var(--inverse-text-secondary-hover); + ${paginationTokens.buttonArrowColorActive}: var(--inverse-text-secondary-hover); ${paginationTokens.buttonDisabledOpacity}: 0.4; @@ -130,26 +126,6 @@ export const config = { var(--surface-solid-default) 80% ); `, - /** - * @deprecated - * использовать `default` - */ - primary: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--inverse-text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-solid-default); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--inverse-text-primary); - ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix( - in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% - ); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--inverse-text-primary); - ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix( - in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 80% - ); - `, secondary: css` ${paginationTokens.paginationCurrentButtonColor}: var(--text-primary); ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-transparent-secondary); @@ -174,6 +150,26 @@ export const config = { ${paginationTokens.paginationCurrentButtonActiveColor}: var(--text-primary); ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 90%); `, + /** + * @deprecated + * использовать `default` + */ + primary: css` + ${paginationTokens.paginationCurrentButtonColor}: var(--inverse-text-primary); + ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-solid-default); + ${paginationTokens.paginationCurrentButtonHoverColor}: var(--inverse-text-primary); + ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix( + in srgb, + var(--inverse-text-primary), + var(--surface-solid-default) 85% + ); + ${paginationTokens.paginationCurrentButtonActiveColor}: var(--inverse-text-primary); + ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix( + in srgb, + var(--inverse-text-primary), + var(--surface-solid-default) 80% + ); + `, }, size: { l: css` @@ -181,6 +177,9 @@ export const config = { ${paginationTokens.paginationFontSize}: var(--plasma-typo-body-l-font-size); ${paginationTokens.paginationFontStyle}: var(--plasma-typo-body-l-font-style); ${paginationTokens.paginationFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-l-line-height); + ${paginationTokens.buttonHeight}: 3.5rem; ${paginationTokens.buttonWidth}: 3rem; ${paginationTokens.buttonWidthShorter}: 2.25rem; @@ -188,30 +187,21 @@ export const config = { ${paginationTokens.buttonRadius}: 0.875rem; ${paginationTokens.paginationIconSize}: 1.2rem; ${paginationTokens.paginationIconDoubleSize}: 1.45rem; - ${paginationTokens.paginationLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${paginationTokens.paginationLineHeight}: var(--plasma-typo-body-l-line-height); + ${paginationTokens.buttonArrowMargin}: 0 -0.125rem 0 0.5rem; - ${paginationTokens.selectWidth}: 100%; ${paginationTokens.selectHeight}: auto; ${paginationTokens.selectPaddingTop}: 0.125rem; ${paginationTokens.selectPaddingRight}: 0.125rem; ${paginationTokens.selectPaddingBottom}: 0.125rem; ${paginationTokens.selectPaddingLeft}: 0.125rem; - ${paginationTokens.selectItemWidth}: auto; ${paginationTokens.selectItemHeight}: 1.5rem; - ${paginationTokens.selectItemPaddingTop}: 1rem; - ${paginationTokens.selectItemPaddingRight}: 1rem; - ${paginationTokens.selectItemPaddingBottom}: 1rem; - ${paginationTokens.selectItemPaddingLeft}: 1rem; + ${paginationTokens.selectItemPadding}: 1rem 1rem 1rem 1rem; ${paginationTokens.selectItemContentLeftWidth}: 1.875rem; ${paginationTokens.selectItemBackground}: transparent; ${paginationTokens.selectTargetArrowRight}: 1rem; - ${paginationTokens.selectTargetWidth}: 100%; - ${paginationTokens.selectTargetPadding}: 0 3.5rem 0 1.5rem; - ${paginationTokens.selectTargetPaddingHasChips}: 0 3.625rem 0 0.375rem; - ${paginationTokens.selectTargetPaddingWithInput}: 0 3.625rem 0 0.625rem; + ${paginationTokens.selectTargetPadding}: 1.5rem 0 1.5rem; ${paginationTokens.selectTargetInnerTop}: 0.5rem; ${paginationTokens.selectTargetLabelInnerTop}: 0.375rem; @@ -236,28 +226,21 @@ export const config = { ${paginationTokens.buttonRadius}: 0.75rem; ${paginationTokens.paginationIconSize}: 1.05rem; ${paginationTokens.paginationIconDoubleSize}: 1.3rem; + ${paginationTokens.buttonArrowMargin}: 0 -0.125rem 0 0.375rem; - ${paginationTokens.selectWidth}: 100%; ${paginationTokens.selectHeight}: auto; ${paginationTokens.selectPaddingTop}: 0.125rem; ${paginationTokens.selectPaddingRight}: 0.125rem; ${paginationTokens.selectPaddingBottom}: 0.125rem; ${paginationTokens.selectPaddingLeft}: 0.125rem; - ${paginationTokens.selectItemWidth}: auto; ${paginationTokens.selectItemHeight}: 1.5rem; - ${paginationTokens.selectItemPaddingTop}: 0.75rem; - ${paginationTokens.selectItemPaddingRight}: 0.75rem; - ${paginationTokens.selectItemPaddingBottom}: 0.75rem; - ${paginationTokens.selectItemPaddingLeft}: 0.75rem; + ${paginationTokens.selectItemPadding}: 0.75rem 0.75rem 0.75rem 0.75rem; ${paginationTokens.selectItemContentLeftWidth}: 1.75rem; ${paginationTokens.selectItemBackground}: transparent; ${paginationTokens.selectTargetArrowRight}: 0.875rem; - ${paginationTokens.selectTargetWidth}: 100%; - ${paginationTokens.selectTargetPadding}: 0 3.25rem 0 1.25rem; - ${paginationTokens.selectTargetPaddingHasChips}: 0 3.375rem 0 0.375rem; - ${paginationTokens.selectTargetPaddingWithInput}: 0 3.375rem 0 0.625rem; + ${paginationTokens.selectTargetPadding}: 1.25rem 0 1.25rem; ${paginationTokens.selectTargetInnerTop}: 0.5rem; ${paginationTokens.selectTargetLabelInnerTop}: 0.375rem; @@ -282,28 +265,21 @@ export const config = { ${paginationTokens.buttonRadius}: 0.625rem; ${paginationTokens.paginationIconSize}: 0.9rem; ${paginationTokens.paginationIconDoubleSize}: 1.15rem; + ${paginationTokens.buttonArrowMargin}: 0 -0.125rem 0 0.25rem; - ${paginationTokens.selectWidth}: 100%; ${paginationTokens.selectHeight}: auto; ${paginationTokens.selectPaddingTop}: 0.125rem; ${paginationTokens.selectPaddingRight}: 0.125rem; ${paginationTokens.selectPaddingBottom}: 0.125rem; ${paginationTokens.selectPaddingLeft}: 0.125rem; - ${paginationTokens.selectItemWidth}: auto; ${paginationTokens.selectItemHeight}: 1.5rem; - ${paginationTokens.selectItemPaddingTop}: 0.5rem; - ${paginationTokens.selectItemPaddingRight}: 0.75rem; - ${paginationTokens.selectItemPaddingBottom}: 0.5rem; - ${paginationTokens.selectItemPaddingLeft}: 0.75rem; + ${paginationTokens.selectItemPadding}: 0.5rem 0.75rem 0.5rem 0.75rem; ${paginationTokens.selectItemContentLeftWidth}: 1.75rem; ${paginationTokens.selectItemBackground}: transparent; ${paginationTokens.selectTargetArrowRight}: 0.75rem; - ${paginationTokens.selectTargetWidth}: 100%; - ${paginationTokens.selectTargetPadding}: 0 3rem 0 1rem; - ${paginationTokens.selectTargetPaddingHasChips}: 0 3.125rem 0 0.375rem; - ${paginationTokens.selectTargetPaddingWithInput}: 0 3.125rem 0 0.625rem; + ${paginationTokens.selectTargetPadding}: 1rem 0 1rem; ${paginationTokens.selectTargetInnerTop}: 0.5rem; ${paginationTokens.selectTargetLabelInnerTop}: 0.375rem; @@ -328,28 +304,21 @@ export const config = { ${paginationTokens.buttonWidthShorter}: 1.5rem; ${paginationTokens.paginationIconSize}: 0.75rem; ${paginationTokens.paginationIconDoubleSize}: 1rem; + ${paginationTokens.buttonArrowMargin}: 0 -0.125rem 0 0.25rem; - ${paginationTokens.selectWidth}: 100%; ${paginationTokens.selectHeight}: auto; ${paginationTokens.selectPaddingTop}: 0.125rem; ${paginationTokens.selectPaddingRight}: 0.125rem; ${paginationTokens.selectPaddingBottom}: 0.125rem; ${paginationTokens.selectPaddingLeft}: 0.125rem; - ${paginationTokens.selectItemWidth}: auto; ${paginationTokens.selectItemHeight}: 1rem; - ${paginationTokens.selectItemPaddingTop}: 0.5rem; - ${paginationTokens.selectItemPaddingRight}: 0.5rem; - ${paginationTokens.selectItemPaddingBottom}: 0.5rem; - ${paginationTokens.selectItemPaddingLeft}: 0.5rem; + ${paginationTokens.selectItemPadding}: 0.5rem 0.5rem 0.5rem 0.5rem; ${paginationTokens.selectItemContentLeftWidth}: 1.25rem; ${paginationTokens.selectItemBackground}: transparent; ${paginationTokens.selectTargetArrowRight}: 0.5rem; - ${paginationTokens.selectTargetWidth}: 100%; - ${paginationTokens.selectTargetPadding}: 0 2.5rem 0 0.75rem; - ${paginationTokens.selectTargetPaddingHasChips}: 0 2.625rem 0 0.375rem; - ${paginationTokens.selectTargetPaddingWithInput}: 0 2.625rem 0 0.625rem; + ${paginationTokens.selectTargetPadding}: 0.75rem 0 0.75rem; ${paginationTokens.selectTargetInnerTop}: 0.5rem; ${paginationTokens.selectTargetLabelInnerTop}: 0.375rem; diff --git a/packages/plasma-b2c/src/components/Portal/Portal.stories.tsx b/packages/plasma-b2c/src/components/Portal/Portal.stories.tsx index 73b9db5f28..b2ae0c884c 100644 --- a/packages/plasma-b2c/src/components/Portal/Portal.stories.tsx +++ b/packages/plasma-b2c/src/components/Portal/Portal.stories.tsx @@ -7,7 +7,7 @@ import styled from 'styled-components'; import { Button } from '../Button/Button'; import { BodyM } from '../Typography'; -import { Portal } from './Portal'; +import { Portal } from '.'; const meta: Meta = { title: 'Controls/Portal', diff --git a/packages/plasma-b2c/src/components/Portal/Portal.tsx b/packages/plasma-b2c/src/components/Portal/Portal.tsx deleted file mode 100644 index 60ea33d97a..0000000000 --- a/packages/plasma-b2c/src/components/Portal/Portal.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { portalConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components'; - -const mergedConfig = mergeConfig(portalConfig); -const PortalComponent = component(mergedConfig); - -/* - * Вспомогательный компонент. Используется в Popup, Popover. - * Представляет собой ReactDOM.createPortal() в форме компонента. - */ -export const Portal = PortalComponent; diff --git a/packages/plasma-b2c/src/components/Portal/index.ts b/packages/plasma-b2c/src/components/Portal/index.ts index 922be8e235..2818aae9fc 100644 --- a/packages/plasma-b2c/src/components/Portal/index.ts +++ b/packages/plasma-b2c/src/components/Portal/index.ts @@ -1,3 +1,3 @@ -export { Portal } from './Portal'; +export { Portal } from '@salutejs/plasma-new-hope/styled-components'; export type { PortalProps } from '@salutejs/plasma-new-hope/styled-components'; diff --git a/packages/plasma-b2c/src/components/Price/Price.component-test.tsx b/packages/plasma-b2c/src/components/Price/Price.component-test.tsx new file mode 100644 index 0000000000..d805db2337 --- /dev/null +++ b/packages/plasma-b2c/src/components/Price/Price.component-test.tsx @@ -0,0 +1,133 @@ +import { mount, CypressTestDecorator, getComponent, PadMe } from '@salutejs/plasma-cy-utils'; +import { standard as standardTypo } from '@salutejs/plasma-typo'; +import React, { FC, PropsWithChildren } from 'react'; +import { createGlobalStyle } from 'styled-components'; + +const StandardTypoStyle = createGlobalStyle(standardTypo); + +describe('plasma-b2c: Price', () => { + const Price = getComponent('Price'); + const BodyM = getComponent('BodyM'); + + const CypressTestDecoratorWithTypo: FC = ({ children }) => ( + + + {children} + + ); + + it('simple', () => { + mount( + + + 12345.67 + + , + ); + + cy.matchImageSnapshot(); + }); + + it('_locale', () => { + mount( + + + 12345.67 + + + + 12345.67 + + , + ); + + cy.matchImageSnapshot(); + }); + + it('_currency', () => { + mount( + + + 12345.67 + + + + 12345.67 + + + + 12345.67 + + + + 12345.67 + + , + ); + + cy.matchImageSnapshot(); + }); + + it('_stroked', () => { + mount( + + + 12345.67 + + , + ); + + cy.matchImageSnapshot(); + }); + + it('_minFraction', () => { + mount( + + + 12345.6789 + + , + ); + + cy.matchImageSnapshot(); + }); + + it('processing periodicity', () => { + mount( + + + 990 + + + + 1990 + + + + 2990 + + + + 3990 + + , + ); + + cy.matchImageSnapshot(); + }); + + it('handle two prices in a row', () => { + mount( + + + 99 + + 200 + + + , + ); + + cy.matchImageSnapshot(); + }); +}); diff --git a/packages/plasma-b2c/src/components/Price/Price.config.ts b/packages/plasma-b2c/src/components/Price/Price.config.ts new file mode 100644 index 0000000000..5351ba7197 --- /dev/null +++ b/packages/plasma-b2c/src/components/Price/Price.config.ts @@ -0,0 +1,8 @@ +export const config = { + defaults: { + view: 'default', + }, + variations: { + view: {}, + }, +}; diff --git a/packages/plasma-b2c/src/components/Price/Price.stories.tsx b/packages/plasma-b2c/src/components/Price/Price.stories.tsx index 76004f3f4b..405482fad3 100644 --- a/packages/plasma-b2c/src/components/Price/Price.stories.tsx +++ b/packages/plasma-b2c/src/components/Price/Price.stories.tsx @@ -1,17 +1,15 @@ -import React from 'react'; +import React, { ComponentProps } from 'react'; import type { StoryObj, Meta } from '@storybook/react'; import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils'; import { Price } from '.'; -import type { PriceProps } from '.'; -const meta: Meta = { +const meta: Meta = { title: 'Content/Price', - component: Price, decorators: [InSpacingDecorator], argTypes: { currency: { - options: ['rub', 'usd', 'eur'], + options: ['rub', 'usd', 'eur', 'inr'], control: { type: 'inline-radio', }, @@ -22,10 +20,13 @@ const meta: Meta = { export default meta; -export const Default: StoryObj = { +type StoryPriceProps = ComponentProps & { priceLabel: number }; + +export const Default: StoryObj = { args: { + locale: 'ru', currency: 'rub', - stroke: false, + stroked: false, minimumFractionDigits: 0, priceLabel: 12345.67, }, diff --git a/packages/plasma-b2c/src/components/Price/Price.ts b/packages/plasma-b2c/src/components/Price/Price.ts new file mode 100644 index 0000000000..ab9be36c78 --- /dev/null +++ b/packages/plasma-b2c/src/components/Price/Price.ts @@ -0,0 +1,11 @@ +import { priceConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components'; + +import { config } from './Price.config'; + +const mergedConfig = mergeConfig(priceConfig, config); +const PriceComponent = component(mergedConfig); + +/** + * Компонент для отображения цены / стоимости / суммы. + */ +export const Price = PriceComponent; diff --git a/packages/plasma-b2c/src/components/Price/PriceBase.component-test.tsx b/packages/plasma-b2c/src/components/Price/PriceBase.component-test.tsx deleted file mode 120000 index a98ba06df3..0000000000 --- a/packages/plasma-b2c/src/components/Price/PriceBase.component-test.tsx +++ /dev/null @@ -1 +0,0 @@ -../../../../plasma-core/src/components/Price/Price.component-test.tsx \ No newline at end of file diff --git a/packages/plasma-b2c/src/components/Price/index.ts b/packages/plasma-b2c/src/components/Price/index.ts index 6c38200e5f..2288a8714a 100644 --- a/packages/plasma-b2c/src/components/Price/index.ts +++ b/packages/plasma-b2c/src/components/Price/index.ts @@ -1,2 +1,2 @@ -export { Price } from '@salutejs/plasma-hope'; -export type { PriceProps } from '@salutejs/plasma-hope'; +export { Price } from './Price'; +export { priceClasses } from '@salutejs/plasma-new-hope/styled-components'; diff --git a/packages/plasma-b2c/src/components/Select/Select.config.ts b/packages/plasma-b2c/src/components/Select/Select.config.ts deleted file mode 100644 index e95cc5cc11..0000000000 --- a/packages/plasma-b2c/src/components/Select/Select.config.ts +++ /dev/null @@ -1,338 +0,0 @@ -import { css, selectTokens } from '@salutejs/plasma-new-hope/styled-components'; - -export const config = { - defaults: { - target: 'button-like', - view: 'default', - size: 'm', - }, - variations: { - target: { - 'textField-like': css` - ${selectTokens.targetColor}: var(--text-primary); - ${selectTokens.targetLabelColor}: var(--text-secondary); - ${selectTokens.targetArrowColor}: var(--text-secondary); - ${selectTokens.targetBackgroundColor}: var(--surface-transparent-primary); - ${selectTokens.targetBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${selectTokens.targetBackgroundColorActive}: var(--surface-transparent-primary-active); - ${selectTokens.targetBackgroundColorOpen}: var(--surface-transparent-secondary); - `, - 'button-like': css` - ${selectTokens.targetColor}: var(--text-primary); - ${selectTokens.targetLabelColor}: var(--text-primary); - ${selectTokens.targetArrowColor}: var(--text-secondary); - ${selectTokens.targetBackgroundColor}: var(--surface-transparent-secondary); - ${selectTokens.targetBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${selectTokens.targetBackgroundColorActive}: var(--surface-transparent-secondary-active); - ${selectTokens.targetBackgroundColorOpen}: var(--surface-transparent-secondary); - ${selectTokens.targetFontWeight}: 600 !important; /* TODO: Переделать когда появится возможность пересечения свойств */ - `, - }, - size: { - xs: css` - ${selectTokens.width}: 100%; - ${selectTokens.height}: auto; - ${selectTokens.borderRadius}: 0.5rem; - ${selectTokens.paddingTop}: 0.125rem; - ${selectTokens.paddingRight}: 0.125rem; - ${selectTokens.paddingBottom}: 0.125rem; - ${selectTokens.paddingLeft}: 0.125rem; - - ${selectTokens.dividerColor}: var(--surface-transparent-tertiary); - ${selectTokens.dividerHeight}: 0.063rem; - ${selectTokens.dividerMarginTop}: 0; - ${selectTokens.dividerMarginRight}: 0.5rem; - ${selectTokens.dividerMarginBottom}: 0; - ${selectTokens.dividerMarginLeft}: 0.375rem; - - ${selectTokens.itemWidth}: auto; - ${selectTokens.itemHeight}: 1rem; - ${selectTokens.itemPaddingTop}: 0.5rem; - ${selectTokens.itemPaddingRight}: 0.5rem; - ${selectTokens.itemPaddingBottom}: 0.5rem; - ${selectTokens.itemPaddingLeft}: 0.375rem; - ${selectTokens.itemBorderRadius}: 0.375rem; - ${selectTokens.itemContentLeftWidth}: 1.25rem; - ${selectTokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${selectTokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${selectTokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${selectTokens.itemFontWeightBold}: var(--plasma-typo-body-xs-font-weight); - ${selectTokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${selectTokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${selectTokens.chipGap}: 0.25rem; - ${selectTokens.chipBorderRadius}: 0.125rem; - ${selectTokens.chipWidth}: auto; - ${selectTokens.chipHeight}: 1.25rem; - ${selectTokens.chipPaddingRight}: 0.375rem; - ${selectTokens.chipPaddingLeft}: 0.625rem; - ${selectTokens.chipClearContentMarginLeft}: 0.25rem; - ${selectTokens.chipClearContentMarginRight}: 0rem; - ${selectTokens.chipCloseIconSize}: 0.75rem; - ${selectTokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${selectTokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${selectTokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${selectTokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${selectTokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${selectTokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${selectTokens.targetArrowRight}: 0.5rem; - ${selectTokens.targetHeight}: 2rem; - ${selectTokens.targetWidth}: 100%; - ${selectTokens.targetRadius}: 0.5rem; - ${selectTokens.targetPadding}: 0 2.5rem 0 0.75rem; - ${selectTokens.targetPaddingHasChips}: 0 2.625rem 0 0.375rem; - ${selectTokens.targetPaddingWithInput}: 0 2.625rem 0 0.625rem; - ${selectTokens.targetInnerTop}: 0.5rem; - ${selectTokens.targetLabelInnerTop}: 0.375rem; - ${selectTokens.targetFontFamily}: var(--plasma-typo-body-xs-font-family); - ${selectTokens.targetFontSize}: var(--plasma-typo-body-xs-font-size); - ${selectTokens.targetFontStyle}: var(--plasma-typo-body-xs-font-style); - ${selectTokens.targetFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${selectTokens.targetLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${selectTokens.targetLineHeight}: var(--plasma-typo-body-xs-line-height); - ${selectTokens.targetLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${selectTokens.targetLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${selectTokens.targetLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${selectTokens.targetLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${selectTokens.targetLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${selectTokens.targetLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - `, - s: css` - ${selectTokens.width}: 100%; - ${selectTokens.height}: auto; - ${selectTokens.borderRadius}: 0.625rem; - ${selectTokens.paddingTop}: 0.125rem; - ${selectTokens.paddingRight}: 0.125rem; - ${selectTokens.paddingBottom}: 0.125rem; - ${selectTokens.paddingLeft}: 0.125rem; - - ${selectTokens.dividerColor}: var(--surface-transparent-tertiary); - ${selectTokens.dividerHeight}: 0.063rem; - ${selectTokens.dividerMarginTop}: 0; - ${selectTokens.dividerMarginRight}: 0.75rem; - ${selectTokens.dividerMarginBottom}: 0; - ${selectTokens.dividerMarginLeft}: 0.75rem; - - ${selectTokens.itemWidth}: auto; - ${selectTokens.itemHeight}: 1.5rem; - ${selectTokens.itemPaddingTop}: 0.5rem; - ${selectTokens.itemPaddingRight}: 0.75rem; - ${selectTokens.itemPaddingBottom}: 0.5rem; - ${selectTokens.itemPaddingLeft}: 0.75rem; - ${selectTokens.itemBorderRadius}: 0.5rem; - ${selectTokens.itemContentLeftWidth}: 1.75rem; - ${selectTokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${selectTokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${selectTokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${selectTokens.itemFontWeightBold}: var(--plasma-typo-body-s-font-weight); - ${selectTokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${selectTokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); - - ${selectTokens.chipGap}: 0.25rem; - ${selectTokens.chipBorderRadius}: 0.25rem; - ${selectTokens.chipWidth}: auto; - ${selectTokens.chipHeight}: 1.75rem; - ${selectTokens.chipPaddingRight}: 0.5rem; - ${selectTokens.chipPaddingLeft}: 0.75rem; - ${selectTokens.chipClearContentMarginLeft}: 0.375rem; - ${selectTokens.chipClearContentMarginRight}: 0rem; - ${selectTokens.chipCloseIconSize}: 0.75rem; - ${selectTokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${selectTokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${selectTokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${selectTokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${selectTokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${selectTokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); - - ${selectTokens.targetArrowRight}: 0.75rem; - ${selectTokens.targetHeight}: 2.5rem; - ${selectTokens.targetWidth}: 100%; - ${selectTokens.targetRadius}: 0.625rem; - ${selectTokens.targetPadding}: 0 3rem 0 1rem; - ${selectTokens.targetPaddingHasChips}: 0 3.125rem 0 0.375rem; - ${selectTokens.targetPaddingWithInput}: 0 3.125rem 0 0.625rem; - ${selectTokens.targetInnerTop}: 0.5rem; - ${selectTokens.targetLabelInnerTop}: 0.375rem; - ${selectTokens.targetFontFamily}: var(--plasma-typo-body-s-font-family); - ${selectTokens.targetFontSize}: var(--plasma-typo-body-s-font-size); - ${selectTokens.targetFontStyle}: var(--plasma-typo-body-s-font-style); - ${selectTokens.targetFontWeight}: var(--plasma-typo-body-s-font-weight); - ${selectTokens.targetLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${selectTokens.targetLineHeight}: var(--plasma-typo-body-s-line-height); - ${selectTokens.targetLabelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${selectTokens.targetLabelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${selectTokens.targetLabelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${selectTokens.targetLabelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${selectTokens.targetLabelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${selectTokens.targetLabelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); - `, - m: css` - ${selectTokens.width}: 100%; - ${selectTokens.height}: auto; - ${selectTokens.borderRadius}: 0.75rem; - ${selectTokens.paddingTop}: 0.125rem; - ${selectTokens.paddingRight}: 0.125rem; - ${selectTokens.paddingBottom}: 0.125rem; - ${selectTokens.paddingLeft}: 0.125rem; - - ${selectTokens.dividerColor}: var(--surface-transparent-tertiary); - ${selectTokens.dividerHeight}: 0.063rem; - ${selectTokens.dividerMarginTop}: 0; - ${selectTokens.dividerMarginRight}: 0.875rem; - ${selectTokens.dividerMarginBottom}: 0; - ${selectTokens.dividerMarginLeft}: 0.875rem; - - ${selectTokens.itemWidth}: auto; - ${selectTokens.itemHeight}: 1.5rem; - ${selectTokens.itemPaddingTop}: 0.75rem; - ${selectTokens.itemPaddingRight}: 0.875rem; - ${selectTokens.itemPaddingBottom}: 0.75rem; - ${selectTokens.itemPaddingLeft}: 0.875rem; - ${selectTokens.itemBorderRadius}: 0.625rem; - ${selectTokens.itemContentLeftWidth}: 1.75rem; - ${selectTokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${selectTokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${selectTokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${selectTokens.itemFontWeightBold}: var(--plasma-typo-body-m-font-weight); - ${selectTokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${selectTokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); - - ${selectTokens.chipGap}: 0.25rem; - ${selectTokens.chipBorderRadius}: 0.375rem; - ${selectTokens.chipWidth}: auto; - ${selectTokens.chipHeight}: 2.25rem; - ${selectTokens.chipPaddingRight}: 0.875rem; - ${selectTokens.chipPaddingLeft}: 0.625rem; - ${selectTokens.chipClearContentMarginLeft}: 0.5rem; - ${selectTokens.chipClearContentMarginRight}: 0rem; - ${selectTokens.chipCloseIconSize}: 1rem; - ${selectTokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${selectTokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${selectTokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${selectTokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${selectTokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${selectTokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); - - ${selectTokens.targetArrowRight}: 0.875rem; - ${selectTokens.targetHeight}: 3rem; - ${selectTokens.targetWidth}: 100%; - ${selectTokens.targetRadius}: 0.75rem; - ${selectTokens.targetPadding}: 0 3.25rem 0 1.25rem; - ${selectTokens.targetPaddingHasChips}: 0 3.375rem 0 0.375rem; - ${selectTokens.targetPaddingWithInput}: 0 3.375rem 0 0.625rem; - ${selectTokens.targetInnerTop}: 0.5rem; - ${selectTokens.targetLabelInnerTop}: 0.375rem; - ${selectTokens.targetFontFamily}: var(--plasma-typo-body-m-font-family); - ${selectTokens.targetFontSize}: var(--plasma-typo-body-m-font-size); - ${selectTokens.targetFontStyle}: var(--plasma-typo-body-m-font-style); - ${selectTokens.targetFontWeight}: var(--plasma-typo-body-m-font-weight); - ${selectTokens.targetLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${selectTokens.targetLineHeight}: var(--plasma-typo-body-m-line-height); - ${selectTokens.targetLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${selectTokens.targetLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${selectTokens.targetLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${selectTokens.targetLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${selectTokens.targetLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${selectTokens.targetLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - `, - l: css` - ${selectTokens.width}: 100%; - ${selectTokens.height}: auto; - ${selectTokens.borderRadius}: 0.875rem; - ${selectTokens.paddingTop}: 0.125rem; - ${selectTokens.paddingRight}: 0.125rem; - ${selectTokens.paddingBottom}: 0.125rem; - ${selectTokens.paddingLeft}: 0.125rem; - - ${selectTokens.dividerColor}: var(--surface-transparent-tertiary); - ${selectTokens.dividerHeight}: 0.063rem; - ${selectTokens.dividerMarginTop}: 0; - ${selectTokens.dividerMarginRight}: 1rem; - ${selectTokens.dividerMarginBottom}: 0; - ${selectTokens.dividerMarginLeft}: 1rem; - - ${selectTokens.itemWidth}: auto; - ${selectTokens.itemHeight}: 1.5rem; - ${selectTokens.itemPaddingTop}: 1rem; - ${selectTokens.itemPaddingRight}: 1rem; - ${selectTokens.itemPaddingBottom}: 1rem; - ${selectTokens.itemPaddingLeft}: 1rem; - ${selectTokens.itemBorderRadius}: 0.75rem; - ${selectTokens.itemContentLeftWidth}: 1.875rem; - ${selectTokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${selectTokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${selectTokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${selectTokens.itemFontWeightBold}: var(--plasma-typo-body-l-font-weight); - ${selectTokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${selectTokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); - - ${selectTokens.chipGap}: 0.25rem; - ${selectTokens.chipBorderRadius}: 0.5rem; - ${selectTokens.chipWidth}: auto; - ${selectTokens.chipHeight}: 2.75rem; - ${selectTokens.chipPaddingRight}: 0.75rem; - ${selectTokens.chipPaddingLeft}: 1rem; - ${selectTokens.chipClearContentMarginLeft}: 0.625rem; - ${selectTokens.chipClearContentMarginRight}: 0rem; - ${selectTokens.chipCloseIconSize}: 1rem; - ${selectTokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${selectTokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${selectTokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${selectTokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${selectTokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${selectTokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); - - ${selectTokens.targetArrowRight}: 1rem; - ${selectTokens.targetHeight}: 3.5rem; - ${selectTokens.targetWidth}: 100%; - ${selectTokens.targetRadius}: 0.875rem; - ${selectTokens.targetPadding}: 0 3.5rem 0 1.5rem; - ${selectTokens.targetPaddingHasChips}: 0 3.625rem 0 0.375rem; - ${selectTokens.targetPaddingWithInput}: 0 3.625rem 0 0.625rem; - ${selectTokens.targetInnerTop}: 0.5rem; - ${selectTokens.targetLabelInnerTop}: 0.375rem; - ${selectTokens.targetFontFamily}: var(--plasma-typo-body-l-font-family); - ${selectTokens.targetFontSize}: var(--plasma-typo-body-l-font-size); - ${selectTokens.targetFontStyle}: var(--plasma-typo-body-l-font-style); - ${selectTokens.targetFontWeight}: var(--plasma-typo-body-l-font-weight); - ${selectTokens.targetLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${selectTokens.targetLineHeight}: var(--plasma-typo-body-l-line-height); - ${selectTokens.targetLabelInnerFontFamily}: var(--plasma-typo-body-s-font-family); - ${selectTokens.targetLabelInnerFontSize}: var(--plasma-typo-body-s-font-size); - ${selectTokens.targetLabelInnerFontStyle}: var(--plasma-typo-body-s-font-style); - ${selectTokens.targetLabelInnerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${selectTokens.targetLabelInnerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${selectTokens.targetLabelInnerLineHeight}: var(--plasma-typo-body-s-line-height); - `, - }, - view: { - default: css` - ${selectTokens.background}: var(--surface-solid-card); - ${selectTokens.boxShadow}: var(--shadow-down-soft-s); - - ${selectTokens.itemBackground}: var(--plasma-colors-transparent); - ${selectTokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${selectTokens.itemBackgroundSelectedHover}: var(--surface-transparent-secondary); - ${selectTokens.itemColor}: var(--text-primary); - ${selectTokens.itemContentLeftColor}: var(--text-accent); - - ${selectTokens.chipCloseIconColor}: var(--text-secondary); - ${selectTokens.chipColor}: var(--text-primary); - ${selectTokens.chipBackground}: var(--surface-transparent-secondary); - ${selectTokens.chipColorHover}: var(--text-primary); - ${selectTokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${selectTokens.chipColorActive}: var(--text-primary); - ${selectTokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); - ${selectTokens.chipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${selectTokens.chipColorReadOnly}: var(--text-primary); - ${selectTokens.chipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${selectTokens.chipColorReadOnlyHover}: var(--text-primary); - ${selectTokens.chipOpacityReadonly}: 0.72; - - ${selectTokens.disabledOpacity}: 0.4; - ${selectTokens.focusColor}: var(--surface-accent); - `, - }, - }, -}; diff --git a/packages/plasma-b2c/src/components/Select/Select.tsx b/packages/plasma-b2c/src/components/Select/Select.tsx index 7160cb0261..65c0e86634 100644 --- a/packages/plasma-b2c/src/components/Select/Select.tsx +++ b/packages/plasma-b2c/src/components/Select/Select.tsx @@ -1,134 +1,3 @@ -// import React, { forwardRef, CSSProperties, Ref } from 'react'; -// import type { SelectProps, SelectRefElement } from '@salutejs/plasma-hope'; -// import { -// selectConfig, -// component, -// mergeConfig, -// selectItemConfig, -// cx, -// popoverClasses, -// } from '@salutejs/plasma-new-hope/styled-components'; -// import { IconDone } from '@salutejs/plasma-icons'; -// import styled from 'styled-components'; - -// import { Checkbox } from '../Checkbox'; -// -// import { config } from './Select.config'; -// -// const mergedConfig = mergeConfig(selectConfig, config); -// export const SelectComponent = component(mergedConfig); -// -// const mergedItemConfig = mergeConfig(selectItemConfig); -// export const SelectItem = component(mergedItemConfig); -// -// const getColor = (status?: SelectProps['status']): string => { -// switch (status) { -// case 'success': -// return '--text-positive'; -// case 'warning': -// return '--text-warning'; -// case 'error': -// return '--text-negative'; -// default: -// return '--text-secondary'; -// } -// }; -// -// const HelperText = styled.div<{ status?: SelectProps['status'] }>` -// color: ${({ status }) => `var(${getColor(status)})`}; -// margin-top: 0.25rem; -// font-family: var(--plasma-typo-body-xs-font-family), sans-serif; -// font-size: var(--plasma-typo-body-xs-font-size); -// font-style: var(--plasma-typo-body-xs-font-style); -// font-weight: var(--plasma-typo-body-xs-font-weight); -// letter-spacing: var(--plasma-typo-body-xs-letter-spacing); -// line-height: var(--plasma-typo-body-xs-line-height); -// `; -// -// const SelectWrapper = styled.div<{ -// listHeight?: number | CSSProperties['height']; -// }>` -// width: 100%; -// -// & .select-height { -// --plasma-select-height: ${({ listHeight }) => -// Number.isNaN(Number(listHeight)) ? listHeight : `${listHeight}rem`}; -// } -// `; -// -// /** -// * Выпадающий список для использования в формах. -// * Поддерживает выбор одного или нескольких значений. -// */ -// export const Select = forwardRef( -// ( -// { -// value, -// items, -// onChange, -// multiselect, -// separator, -// status, -// placeholder, -// helperText, -// disabled, -// onItemSelect, -// isOpen, -// listHeight, -// listOverflow, -// className, -// ...rest -// }, -// ref, -// ) => { -// const handleItemSelect: SelectProps['onItemSelect'] = (item, e) => { -// if (onItemSelect) { -// onItemSelect(item, e); -// } -// }; -// -// return ( -// -// } -// className={cx(className, 'select-height')} -// > -// {items.map((item) => ( -// handleItemSelect(item, e)} -// disabled={item.isDisabled} -// contentLeft={ -// // eslint-disable-next-line no-nested-ternary -// multiselect ? ( -// -// ) : item.value === value ? ( -// -// ) : undefined -// } -// /> -// ))} -// -// -// {/* TODO: #1153 */} -// {helperText && {helperText}} -// -// ); -// }, -// ); - import React, { forwardRef } from 'react'; import type { SelectProps, SelectRefElement } from '@salutejs/plasma-hope'; import { Select as SelectHope } from '@salutejs/plasma-hope'; diff --git a/packages/plasma-b2c/src/components/SelectNew/Select.component-test.tsx b/packages/plasma-b2c/src/components/SelectNew/Select.component-test.tsx new file mode 100644 index 0000000000..34eecc51c4 --- /dev/null +++ b/packages/plasma-b2c/src/components/SelectNew/Select.component-test.tsx @@ -0,0 +1,934 @@ +import React from 'react'; +import type { FC, PropsWithChildren } from 'react'; +import { IconLocation } from '@salutejs/plasma-icons'; +import { mount, CypressTestDecorator, getComponent } from '@salutejs/plasma-cy-utils'; +import { createGlobalStyle } from 'styled-components'; +import { standard as standardTypo } from '@salutejs/plasma-typo'; + +const items = [ + { + value: 'north_america', + label: 'Северная Америка', + contentLeft: , + contentRight: , + }, + { + value: 'south_america', + label: 'Южная Америка', + items: [ + { + value: 'brazil', + label: 'Бразилия', + items: [ + { + value: 'rio_de_janeiro', + label: 'Рио-де-Жанейро', + }, + { + value: 'sao_paulo', + label: 'Сан-Паулу', + }, + ], + }, + { + value: 'argentina', + label: 'Аргентина', + items: [ + { + value: 'buenos_aires', + label: 'Буэнос-Айрес', + }, + { + value: 'cordoba', + label: 'Кордова', + }, + ], + }, + { + value: 'colombia', + label: 'Колумбия', + items: [ + { + value: 'bogota', + label: 'Богота', + }, + { + value: 'medellin', + label: 'Медельин', + }, + ], + }, + ], + }, + { + value: 'europe', + label: 'Европа', + items: [ + { + value: 'france', + label: 'Франция', + items: [ + { + value: 'paris', + label: 'Париж', + }, + { + value: 'lyon', + label: 'Лион', + }, + ], + }, + { + value: 'germany', + label: 'Германия', + items: [ + { + value: 'berlin', + label: 'Берлин', + }, + { + value: 'munich', + label: 'Мюнхен', + }, + ], + }, + { + value: 'italy', + label: 'Италия', + items: [ + { + value: 'rome', + label: 'Рим', + }, + { + value: 'milan', + label: 'Милан', + }, + ], + }, + { + value: 'spain', + label: 'Испания', + items: [ + { + value: 'madrid', + label: 'Мадрид', + }, + { + value: 'barcelona', + label: 'Барселона', + }, + ], + }, + { + value: 'united_kingdom', + label: 'Великобритания', + items: [ + { + value: 'london', + label: 'Лондон', + }, + { + value: 'manchester', + label: 'Манчестер', + }, + ], + }, + ], + }, + { + value: 'asia', + label: 'Азия', + items: [ + { + value: 'china', + label: 'Китай', + items: [ + { + value: 'beijing', + label: 'Пекин', + }, + { + value: 'shanghai', + label: 'Шанхай', + }, + ], + }, + { + value: 'japan', + label: 'Япония', + items: [ + { + value: 'tokyo', + label: 'Токио', + }, + { + value: 'osaka', + label: 'Осака', + }, + ], + }, + { + value: 'india', + label: 'Индия', + items: [ + { + value: 'delhi', + label: 'Дели', + }, + { + value: 'mumbai', + label: 'Мумбаи', + }, + ], + }, + { + value: 'south_korea', + label: 'Южная Корея', + items: [ + { + value: 'seoul', + label: 'Сеул', + }, + { + value: 'busan', + label: 'Пусан', + }, + ], + }, + { + value: 'thailand', + label: 'Таиланд', + items: [ + { + value: 'bangkok', + label: 'Бангкок', + }, + { + value: 'phuket', + label: 'Пхукет', + }, + ], + }, + ], + }, + { + value: 'africa', + label: 'Африка', + disabled: true, + }, +]; + +const StandardTypoStyle = createGlobalStyle(standardTypo); + +describe('plasma-b2c: SelectNew', () => { + const Select = getComponent('SelectNew'); + + const CypressTestDecoratorWithTypo: FC = ({ children }) => ( + + + {children} + + ); + + const CommonComponent = (props: any) => { + const [singleValue, setSingleValue] = React.useState(props.initialSingleValue || ''); + const [valueMultiple, setValueMultiple] = React.useState>(props.initialMultipleValue || []); + + return ( + +
+ + + + +
+
+ + +
+
+ + +
+
+ + + + + + + + + + + +
+
+ + +
+
+ + +
+
+
+ + ); + }; + + it('default', () => { + cy.viewport(1000, 1000); + + mount(); + + cy.matchImageSnapshot(); + }); + + it('prop: size l', () => { + cy.viewport(1000, 1200); + + mount(); + + cy.matchImageSnapshot(); + }); + + it('prop: size m', () => { + cy.viewport(1000, 1000); + + mount(); + + cy.matchImageSnapshot(); + }); + + it('prop: size s', () => { + cy.viewport(1000, 1000); + + mount(); + + cy.matchImageSnapshot(); + }); + + it('prop: size xs', () => { + cy.viewport(1000, 1000); + + mount(); + + cy.matchImageSnapshot(); + }); + + it('prop: size xs', () => { + cy.viewport(1000, 1000); + + mount(); + + cy.matchImageSnapshot(); + }); + + it('prop: labelPlacement', () => { + cy.viewport(1000, 1000); + + mount( + , + ); + + cy.matchImageSnapshot(); + }); + + it('prop: chipView secondary', () => { + cy.viewport(1000, 1000); + + mount( + , + ); + + cy.matchImageSnapshot(); + }); + + it('prop: chipView accent', () => { + cy.viewport(1000, 1000); + + mount( + , + ); + + cy.matchImageSnapshot(); + }); + + it('prop: contentLeft', () => { + cy.viewport(1000, 1000); + + mount( + } + />, + ); + + cy.matchImageSnapshot(); + }); + + it('prop: isTargetAmount', () => { + cy.viewport(1000, 1000); + + mount(); + + cy.matchImageSnapshot(); + }); + + it('basic logic', () => { + cy.viewport(1000, 500); + + const Component = () => { + const [valueSingle, setValueSingle] = React.useState('paris'); + const [valueMultiple, setValueMultiple] = React.useState(['paris', 'lyon']); + + return ( + +
+ +
+ + ); + }; + + mount(); + + cy.get('#single').should('include.text', 'Париж'); + cy.get('#multiple').should('include.text', 'Париж').should('include.text', 'Лион'); + + cy.get('#single').realClick(); + cy.get('#single #europe').realClick(); + cy.get('#single #france').realClick(); + + cy.get('#single #paris').realClick(); + + cy.get('#single').realClick(); + + cy.get('#multiple').realClick(); + cy.get('#multiple #europe').realClick(); + cy.get('#multiple #france').realClick(); + + cy.get('#multiple #lyon .select-item-checkbox').realClick(); + + cy.get('#multiple #germany .select-item-checkbox').realClick(); + cy.get('#multiple #germany').realClick(); + + cy.matchImageSnapshot(); + }); + + it('keyboard interactions', () => { + cy.viewport(1000, 500); + + const Component = () => { + const [valueMultiple, setValueMultiple] = React.useState([]); + + return ( + +
+ : undefined} + /> +
+ ); +}; + +export const Single: StoryObj = { + render: (args) => , +}; + +const MultiselectStory = (args: StorySelectProps) => { + const [value, setValue] = useState>([]); + + return ( +
+ : undefined} + /> + +
+ + +
+ + +
+ : undefined} + /> +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ : undefined} + /> +
+ + +
+ +
+ + +
+ : undefined} + /> +
+ + +
+ +
+ + +
+ : undefined} + /> +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ { - setValue(v); - }} - placeholder="Выберите пример" - helperText="Заполните пример" - status="success" - /> -
-
- - - - - ); -} -``` diff --git a/packages/plasma-new-hope/src/components/Select/Select.tokens.ts b/packages/plasma-new-hope/src/components/Select/Select.tokens.ts index 4504f40c8c..f8755798ef 100644 --- a/packages/plasma-new-hope/src/components/Select/Select.tokens.ts +++ b/packages/plasma-new-hope/src/components/Select/Select.tokens.ts @@ -1,195 +1,111 @@ export const classes = { - selectTarget: 'select-target', - selectTargeText: 'select-target-text', - selectTargetLabel: 'select-target-label', + dropdownItemIsFocused: 'dropdown-item-is-focused', + dropdownItemIsDisabled: 'dropdown-item-is-disabled', + dropdownItemIsActive: 'dropdown-item-is-active', selectTargetArrow: 'select-target-arrow', arrowInverse: 'arrow-inverse', - selectItemIsSelected: 'select-item-is-selected', - selectItemIsDisabled: 'select-item-is-disabled', - nativeSelectVisible: 'native-select-visible', - hasNoFocus: 'has-no-focus', - hasChips: 'has-chips', - innerLabelUp: 'inner-label-up', + textfieldTarget: 'select-textfield-target', + selectChipIsFocused: 'select-chip-is-focused', + selectWithoutBoxShadow: 'select-without-box-shadow', + selectItemCheckbox: 'select-item-checkbox', + selectSpinner: 'select-spinner', }; export const tokens = { - background: '--plasma-select-background', - boxShadow: '--plasma-select-box-shadow', - width: '--plasma-select-width', - height: '--plasma-select-height', borderRadius: '--plasma-select-border-radius', - paddingTop: '--plasma-select-padding-top', - paddingRight: '--plasma-select-padding-right', - paddingBottom: '--plasma-select-padding-bottom', - paddingLeft: '--plasma-select-padding-left', + padding: '--plasma-select-padding', + focusOffset: '--plasma-select-focus-offset', + + fontFamily: '--plasma-select-font-family', + fontSize: '--plasma-select-font-size', + fontStyle: '--plasma-select-font-style', + fontWeight: '--plasma-select-font-weight', + fontLetterSpacing: '--plasma-select-font-letter-spacing', + fontLineHeight: '--plasma-select-font-line-height', - itemBackground: '--plasma-select-item-background', - itemColor: '--plasma-select-item-color', - itemBackgroundHover: '--plasma-select-item-background-hover', - itemBackgroundSelected: '--plasma-select-item-background-selected', - itemColorSelected: '--plasma-select-item-color-selected', - itemBackgroundSelectedHover: '--plasma-select-item-background-selected-hover', - itemColorSelectedHover: '--plasma-select-item-color-selected-hover', - itemWidth: '--plasma-select-item-width', itemHeight: '--plasma-select-item-height', itemBorderRadius: '--plasma-select-item-border-radius', - itemPaddingTop: '--plasma-select-item-padding-top', - itemPaddingRight: '--plasma-select-item-padding-right', - itemPaddingBottom: '--plasma-select-item-padding-bottom', - itemPaddingLeft: '--plasma-select-item-padding-left', - itemMarginTop: '--plasma-select-item-margin-top', - itemMarginRight: '--plasma-select-item-margin-right', - itemMarginBottom: '--plasma-select-item-margin-bottom', - itemMarginLeft: '--plasma-select-item-margin-left', - itemFontFamily: '--plasma-select-item-font-family', - itemFontSize: '--plasma-select-item-font-size', - itemFontStyle: '--plasma-select-item-font-style', - itemFontWeightBold: '--plasma-select-item-letter-spacing', - itemFontLetterSpacing: '--plasma-select-item-line-height', - itemFontLineHeight: '--plasma-select-item-font-weight', - itemContentLeftColor: '--plasma-select-item-content-left-color', - itemContentRightColor: '--plasma-select-item-content-right-color', - itemContentLeftWidth: '--plasma-select-item-content-left-width', - itemContentRightWidth: '--plasma-select-item-content-right-width', - - footerBackground: '--plasma-select-footer-background', - footerWidth: '--plasma-select-footer-width', - footerHeight: '--plasma-select-footer-height', - footerPaddingTop: '--plasma-select-footer-padding-top', - footerPaddingRight: '--plasma-select-footer-padding-right', - footerPaddingBottom: '--plasma-select-footer-padding-bottom', - footerPaddingLeft: '--plasma-select-footer-padding-left', - footerMarginTop: '--plasma-select-footer-margin-top', - footerMarginRight: '--plasma-select-footer-margin-right', - footerMarginBottom: '--plasma-select-footer-margin-bottom', - footerMarginLeft: '--plasma-select-footer-margin-left', - footerFontFamily: '--plasma-select-footer-font-family', - footerFontSize: '--plasma-select-footer-font-size', - footerFontStyle: '--plasma-select-footer-font-style', - footerFontWeightBold: '--plasma-select-footer-letter-spacing', - footerFontLetterSpacing: '--plasma-select-footer-line-height', - footerFontLineHeight: '--plasma-select-footer-font-weight', - - headerBackground: '--plasma-select-header-background', - headerWidth: '--plasma-select-header-width', - headerHeight: '--plasma-select-header-height', - headerPaddingTop: '--plasma-select-header-padding-top', - headerPaddingRight: '--plasma-select-header-padding-right', - headerPaddingBottom: '--plasma-select-header-padding-bottom', - headerPaddingLeft: '--plasma-select-header-padding-left', - headerMarginTop: '--plasma-select-header-margin-top', - headerMarginRight: '--plasma-select-header-margin-right', - headerMarginBottom: '--plasma-select-header-margin-bottom', - headerMarginLeft: '--plasma-select-header-margin-left', - headerFontFamily: '--plasma-select-header-font-family', - headerFontSize: '--plasma-select-header-font-size', - headerFontStyle: '--plasma-select-header-font-style', - headerFontWeightBold: '--plasma-select-header-letter-spacing', - headerFontLetterSpacing: '--plasma-select-header-line-height', - headerFontLineHeight: '--plasma-select-header-font-weight', + itemPadding: '--plasma-select-item-padding', + itemPaddingTight: '--plasma-select-item-padding-tight', + itemIconSize: '--plasma-select-item-icon-size', + itemIconSizeTight: '--plasma-select-item-icon-size-tight', + itemIconMargin: '--plasma-select-item-icon-margin', - dividerColor: '--plasma-select-divider-color', - dividerWidth: '--plasma-select-divider-width', - dividerHeight: '--plasma-select-divider-height', - dividerMarginTop: '--plasma-select-divider-margin-top', - dividerMarginRight: '--plasma-select-divider-margin-right', - dividerMarginBottom: '--plasma-select-divider-margin-bottom', - dividerMarginLeft: '--plasma-select-divider-margin-left', + checkboxTriggerSize: '--plasma-select-checkbox-trigger-size', + checkboxTriggerSizeTight: '--plasma-select-checkbox-trigger-size-tight', + checkboxTriggerBorderRadius: '--plasma-select-checkbox-trigger-border-radius', + checkboxTriggerBorderRadiusTight: '--plasma-select-checkbox-trigger-border-radius-tight', + checkboxFillColor: '--plasma-select-checkbox-fill-color', + checkboxIconColor: '--plasma-select-checkbox-icon-color', + checkboxTriggerBorderColor: '--plasma-select-checkbox-trigger-border-color', - groupBackground: '--plasma-select-group-background', - groupWidth: '--plasma-select-group-width', - groupHeight: '--plasma-select-group-height', - groupPaddingTop: '--plasma-select-group-padding-top', - groupPaddingRight: '--plasma-select-group-padding-right', - groupPaddingBottom: '--plasma-select-group-padding-bottom', - groupPaddingLeft: '--plasma-select-group-padding-left', - groupMarginTop: '--plasma-select-group-margin-top', - groupMarginRight: '--plasma-select-group-margin-right', - groupMarginBottom: '--plasma-select-group-margin-bottom', - groupMarginLeft: '--plasma-select-group-margin-left', - groupLabelColor: '--plasma-select-group-label-color', - groupLabelFontFamily: '--plasma-select-group-label-font-family', - groupLabelFontSize: '--plasma-select-group-label-font-size', - groupLabelFontStyle: '--plasma-select-group-label-font-style', - groupLabelFontWeight: '--plasma-select-group-label-font-weight', - groupLabelLetterSpacing: '--plasma-select-group-label-letter-spacing', - groupLabelLineHeight: '--plasma-select-group-label-line-height', - groupLabelPaddingTop: '--plasma-select-group-label-padding-top', - groupLabelPaddingRight: '--plasma-select-group-label-padding-right', - groupLabelPaddingBottom: '--plasma-select-group-label-padding-bottom', - groupLabelPaddingLeft: '--plasma-select-group-label-padding-left', - groupLabelMarginTop: '--plasma-select-group-label-margin-top', - groupLabelMarginRight: '--plasma-select-group-label-margin-right', - groupLabelMarginBottom: '--plasma-select-group-label-margin-bottom', - groupLabelMarginLeft: '--plasma-select-group-label-margin-left', + indicatorSize: '--plasma-select-indicator-size', - targetColor: '--plasma-select-target-color', - targetLabelColor: '--plasma-select-target-label-color', - targetArrowColor: '--plasma-select-target-arrow-color', - targetArrowRight: '--plasma-select-target-arrow-right', - targetBackgroundColor: '--plasma-select-target-background-color', - targetBackgroundColorHover: '--plasma-select-target-background-color-hover', - targetBackgroundColorActive: '--plasma-select-target-background-color-active', - targetBackgroundColorOpen: '--plasma-select-target-background-color-open', - targetBorderColor: '--plasma-select-target-border-color', - targetBorderColorHover: '--plasma-select-target-border-color-hover', - targetBorderColorActive: '--plasma-select-target-border-color-active', - targetBorderColorOpen: '--plasma-select-target-border-color-open', - targetInnerTop: '--plasma-select-target-inner-top', - targetPadding: '--plasma-select-target-padding', - targetPaddingWithInput: '--plasma-select-target-with-input', - targetPaddingHasChips: '--plasma-select-target-padding-has-chips', + targetButtonColor: '--plasma-select-target-button-color', + targetButtonColorHover: '--plasma-select-target-button-color-hover', + targetButtonColorActive: '--plasma-select-target-button-color-active', + targetButtonArrowColor: '--plasma-select-target-button-arrow-color', + targetButtonArrowColorHover: '--plasma-select-target-button-arrow-color-hover', + targetButtonArrowColorActive: '--plasma-select-target-button-arrow-color-active', + targetTextfieldArrowColor: '--plasma-select-target-textfield-arrow-color', + targetTextfieldArrowColorHover: '--plasma-select-target-textfield-arrow-color-hover', + targetTextfieldArrowColorActive: '--plasma-select-target-textfield-arrow-color-active', + targetButtonArrowMargin: '--plasma-select-target-button-arrow-margin', + targetTextfieldArrowMargin: '--plasma-select-target-textfield-arrow-margin', + targetButtonBackgroundColor: '--plasma-select-target-button-background-color', + targetButtonBackgroundColorHover: '--plasma-select-target-button-background-color-hover', + targetButtonBackgroundColorActive: '--plasma-select-target-button-background-color-active', + targetTextfieldBackgroundColor: '--plasma-select-target-textfield-background-color', + targetTextfieldBackgroundColorOpened: '--plasma-select-target-textfield-background-color-opened', + targetTextfieldBorderColor: '--plasma-select-target-textfield-border-color', + targetButtonPadding: '--plasma-select-target-button-padding', + targetTextfieldPadding: '--plasma-select-target-textfield-padding', + targetTextfieldChipPadding: '--plasma-select-target-textfield-chip-padding', targetHeight: '--plasma-select-target-height', - targetWidth: '--plasma-select-target-width', - targetRadius: '--plasma-select-target-radius', - targetFontFamily: '--plasma-select-target-font-family', - targetFontSize: '--plasma-select-target-font-size', - targetFontStyle: '--plasma-select-target-font-style', - targetFontWeight: '--plasma-select-target-font-weight', - targetLetterSpacing: '--plasma-select-target-letter-spacing', - targetLineHeight: '--plasma-select-target-line-height', - targetLabelInnerTop: '--plasma-select-target-label-inner-top', - targetLabelInnerFontFamily: '--plasma-select-target-label-inner-font-family', - targetLabelInnerFontSize: '--plasma-select-target-label-inner-font-family', - targetLabelInnerFontStyle: '--plasma-select-target-label-inner-font-style', - targetLabelInnerFontWeight: '--plasma-select-target-label-inner-font-weight', - targetLabelInnerLetterSpacing: '--plasma-select-target-label-inner-letter-spacing', - targetLabelInnerLineHeight: '--plasma-select-target-label-inner-line-height', - chipGap: '--plasma-select-chip-gap', - chipBackground: '--plasma-select-chip-background', chipColor: '--plasma-select-chip-color', + chipBackground: '--plasma-select-chip-background', chipBackgroundHover: '--plasma-select-chip-background-hover', - chipColorHover: '--plasma-select-chip-color-hover', - chipScaleHover: '--plasma-select-chip-scale-hover', - chipBackgroundReadOnly: '--plasma-select-chip-background-readonly', - chipColorReadOnly: '--plasma-select-chip-color-readonly', - chipBackgroundReadOnlyHover: '--plasma-select-chip-background-readonly-hover', - chipColorReadOnlyHover: '--plasma-select-chip-color-readonly-hover', chipBackgroundActive: '--plasma-select-chip-background-active', - chipColorActive: '--plasma-select-chip-color-active', - chipScaleActive: '--plasma-select-chip-scale-active', - chipFocusColor: '--plasma-select-chip-focus-color', - chipCloseIconColor: '--plasma-select-chip-close-icon-color', - chipOutlineSize: '--plasma-select-chip-outline-size', + chipGap: '--plasma-select-chip-gap', chipBorderRadius: '--plasma-select-chip-border-radius', - chipWidth: '--plasma-select-chip-width', chipHeight: '--plasma-select-chip-height', - chipPaddingTop: '--plasma-select-chip-padding-top', chipPaddingRight: '--plasma-select-chip-padding-right', - chipPaddingBottom: '--plasma-select-chip-padding-bottom', chipPaddingLeft: '--plasma-select-chip-padding-left', chipCloseIconSize: '--plasma-select-chip-close-icon-size', - chipFontFamily: '--plasma-select-chip-font-family', - chipFontSize: '--plasma-select-chip-font-size', - chipFontStyle: '--plasma-select-chip-font-style', - chipFontWeight: '--plasma-select-chip-font-weight', - chipLetterSpacing: '--plasma-select-chip-letter-spacing', - chipLineHeight: '--plasma-select-chip-line-height', chipClearContentMarginLeft: '--plasma-select-chip-clear-content-margin-left', chipClearContentMarginRight: '--plasma-select-chip-clear-content-margin-right', - chipOpacityReadonly: '--plasma-select-chip-opacity-readonly', - disabledOpacity: '--plasma-select-disabled-opacity', - focusColor: '--plasma-select-focus-color', + labelOffset: '--plasma-select-label-offset', + + innerLabelGap: '--plasma-select-inner-label-gap', + + helperTextColor: '--plasma-select-helper-text-color', + helperTextOffset: '--plasma-select-helper-text-offset', + + spinnerSize: '--plasma-select-spinner-size', + spinnerSizeTight: '--plasma-select-spinner-size-tight', +}; + +export const constants = { + focusColor: '--surface-accent', + focusSize: '0.0625rem', + background: '--surface-solid-card', + boxShadow: '--shadow-down-soft-s', + disclosureIconColor: '--text-secondary', + disclosureIconColorHover: '--text-secondary-hover', + itemBackground: '--plasma-colors-transparent', + itemBackgroundHover: '--surface-transparent-secondary', + textfieldTargetColor: '--text-primary', + textfieldOuterLabelColor: '--text-primary', + textfieldInnerLabelColor: '--text-secondary', + textfieldPlaceholderColor: '--text-secondary', + textfieldBorderSize: '0.0625rem', + opacity: '0.4', + fontFamily: '--plasma-typo-body-xs-font-family', + fontSize: '--plasma-typo-body-xs-font-size', + fontStyle: '--plasma-typo-body-xs-font-style', + fontWeight: '--plasma-typo-body-xs-font-weight', + fontLetterSpacing: '--plasma-typo-body-xs-letter-spacing', + fontLineHeight: '--plasma-typo-body-xs-line-height', }; diff --git a/packages/plasma-new-hope/src/components/Select/Select.tsx b/packages/plasma-new-hope/src/components/Select/Select.tsx index ce62edb38a..a6031b77c1 100644 --- a/packages/plasma-new-hope/src/components/Select/Select.tsx +++ b/packages/plasma-new-hope/src/components/Select/Select.tsx @@ -1,251 +1,300 @@ -import React, { Children, forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react'; -import { safeUseId, useForkRef } from '@salutejs/plasma-core'; +import React, { forwardRef, useState, useReducer, useMemo, createContext, useLayoutEffect } from 'react'; import { RootProps } from '../../engines'; -import { cx, getPlacements } from '../../utils'; -import { useDidMountEffect, useForceUpdate } from '../../hooks'; - -import { base as targetCSS } from './variations/_target/base'; +import { isEmpty, getPlacements } from '../../utils'; +import { useOutsideClick } from '../../hooks'; + +import { useKeyNavigation } from './hooks/useKeyboardNavigation'; +import { initialItemsTransform, updateAncestors, updateDescendants, updateSingleAncestors } from './utils'; +import { Inner, Target } from './ui'; +import { pathReducer, focusedPathReducer, focusedChipIndexReducer } from './reducers'; +import { usePathMaps } from './hooks/usePathMaps'; +import { StyledPopover, Ul, base, OuterLabel, HelperText } from './Select.styles'; +import type { SelectProps, ItemContext } from './Select.types'; import { base as viewCSS } from './variations/_view/base'; import { base as sizeCSS } from './variations/_size/base'; -import { SelectTarget } from './ui'; -import { getChildren, getNewSelected, getValues } from './utils'; -import { classes } from './Select.tokens'; -import { StyledNativeSelect, StyledPopover, StyledRoot, StyledSelect } from './Select.styles'; -import type { SelectPrimitiveValue, SelectProps } from './Select.types'; -import { useKeyNavigation } from './hooks'; +import type { ItemOptionTransformed } from './ui/Inner/ui/Item/Item.types'; + +export const Context = createContext({} as ItemContext); /** - * Выпадающий список без внешнего контроля видимости. + * Выпадающий список. Поддерживает выбор одного или нескольких значений. */ -export const selectRoot = (Root: RootProps) => - forwardRef( - ( - { - name, - form, - readOnly, - disabled, - label, - id, - children, - role, - target, - view, - size, - frame, - usePortal, - enumerationType = 'comma', - opened = false, - placement = 'bottom', - onToggle, - ...rest - }, - outerRootRef, - ) => { - const forceUpdate = useForceUpdate(); - const uniqId = safeUseId(); - const innerId = id || uniqId; - const { valueType = 'single', value } = rest; - const offset = [0, 4] as [number, number]; - - const [ref, setRef] = useState(null); - const rootRef = useRef(null); - const handleRef = useForkRef(rootRef, outerRootRef); - - const targetRef = useRef(null); - const chipsRefs = useRef>([]); - const selectRef = useRef(null); - const itemsRefs = useRef>([]); - const controlledRefs = { targetRef, chipsRefs, selectRef, itemsRefs }; - - const [innerOpened, setOpened] = useState(opened); - - // INFO: нужно высчитывать для корректной работы портала - const dynamicTargetWidth = targetRef.current?.offsetWidth; - const withNativeSelectVisible = valueType === 'native' ? classes.nativeSelectVisible : undefined; - - // INFO: Из-за того, что классы передаются через ref, - // состояние пропсов после изменения view, size, target - // всегда предыдущее, поэтому нужно делать форс-ререндер - useDidMountEffect(() => { - forceUpdate(); - }, [view, size, target]); - - useEffect(() => { - if (disabled || readOnly) { - return; +export const selectRoot = (Root: RootProps>) => + forwardRef((props, ref) => { + const { + multiselect = false, + value: outerValue, + onChange: outerOnChange, + target = 'textfield-like', + items, + placement = 'bottom', + label, + labelPlacement = 'outer', + placeholder, + helperText, + isTargetAmount = false, + disabled = false, + view, + size, + listOverflow, + listHeight, + listWidth, + contentLeft, + onScrollBottom, + chipView, + variant = 'normal', + portal, + renderValue, + renderItem, + ...rest + } = props; + + const [internalValue, setInternalValue] = useState(outerValue || multiselect ? [] : ''); + + const value = outerValue || internalValue; + + const onChange = (e: string | string[]) => { + if (outerOnChange) { + outerOnChange(e as any); + } + + setInternalValue(e); + }; + + const transformedItems = useMemo(() => initialItemsTransform(items), [items]); + + const [pathMap, focusedToValueMap, valueToCheckedMap, valueToItemMap] = usePathMaps(transformedItems); + + const [path, dispatchPath] = useReducer(pathReducer, []); + const [focusedPath, dispatchFocusedPath] = useReducer(focusedPathReducer, []); + const [focusedChipIndex, dispatchFocusedChipIndex] = useReducer(focusedChipIndexReducer, null); + const [checked, setChecked] = useState(valueToCheckedMap); + + const targetRef = useOutsideClick(() => { + if (focusedChipIndex != null) { + dispatchFocusedChipIndex({ type: 'reset' }); + } + }); + + const handleToggle = (opened: boolean) => { + if (opened) { + dispatchPath({ type: 'opened_first_level' }); + } else { + dispatchFocusedPath({ type: 'reset' }); + dispatchPath({ type: 'reset' }); + dispatchFocusedChipIndex({ type: 'reset' }); + } + }; + + const handleCheckboxChange = (item: ItemOptionTransformed) => { + const checkedCopy = new Map(checked); + + if (!checkedCopy.get(item.value.toString())) { + checkedCopy.set(item.value.toString(), true); + updateDescendants(item, checkedCopy, true); + } else { + checkedCopy.set(item.value.toString(), false); + updateDescendants(item, checkedCopy, false); + } + + updateAncestors(item, checkedCopy); + + const newValues: Array = []; + + valueToItemMap.forEach((item, key) => { + if (checkedCopy.get(key)) { + newValues.push(item.value.toString()); + } + }); + + if (onChange) { + onChange(newValues as any); + } + }; + + const handleItemClick = (item: ItemOptionTransformed, e?: React.MouseEvent) => { + if (!isEmpty(item?.items)) { + return; + } + + if (multiselect) { + handleCheckboxChange(item); + } else { + if (e) { + e.stopPropagation(); } - setOpened(opened); - }, [opened, disabled, readOnly]); - - const onInnerToggle = useCallback( - (openValue: boolean, event: React.SyntheticEvent | Event) => { - if (disabled || readOnly) { - return; - } - - if (onToggle) { - onToggle(openValue, event); - return; - } - - setOpened(openValue); - }, - [disabled, readOnly, onToggle], - ); - - const updateValue = useCallback( - (item: HTMLElement, event: React.SyntheticEvent | Event) => { - const { - dataset: { value: newValue }, - } = item; - - if (rest.valueType === 'multiple') { - const newSelected = getNewSelected(rest.value, newValue, rest.valueType); - rest.onChangeValue?.(newSelected); - - return; - } - - const newSelected = getNewSelected(rest.value, newValue, 'single'); - - rest.onChangeValue?.(newSelected); - - onInnerToggle?.(false, event); - }, - [rest.value, rest.valueType, rest.onChangeValue, onToggle, onInnerToggle], - ); - - const onClickChildrenItem = useCallback( - (event: React.MouseEvent) => { - // INFO: Для корректной работы компонента Popper - event.stopPropagation(); - - const item = event.currentTarget as HTMLElement; - - updateValue(item, event); - }, - [updateValue], - ); - - const onNativeSelectChange = useCallback( - (event: React.ChangeEvent) => { - if (rest.valueType === 'multiple') { - return; - } - - const { value: newValue } = event.target; - const newSelected = getNewSelected(rest.value, newValue, 'native'); - - rest.onChangeValue?.(newSelected); - }, - [rest.value, rest.valueType, rest.onChangeValue], - ); - - const onChangeChipValue = useCallback( - (newValue?: Array) => { - if (rest.valueType !== 'multiple') { - return; - } - - rest.onChangeValue?.(newValue); - }, - [rest.valueType], - ); - - const { onKeyDownTarget, onKeyDownSelect } = useKeyNavigation({ - controlledRefs, - opened: innerOpened, - enumerationType, - valueType, - value, - updateOpened: onInnerToggle, - updateValue, + const checkedCopy = new Map(checked); + + const isCurrentChecked = checkedCopy.get(item.value); + + checkedCopy.forEach((_, key) => { + checkedCopy.set(key, false); + }); + + if (!isCurrentChecked) { + checkedCopy.set(item.value, 'done'); + updateSingleAncestors(item, checkedCopy, 'dot'); + } + + if (onChange) { + onChange((isCurrentChecked ? '' : item.value) as any); + } + } + }; + + const handleChipClick = (currentValue: string) => { + handleCheckboxChange(valueToItemMap.get(currentValue)!); + }; + + const handlePressDown = (item: ItemOptionTransformed, e?: React.MouseEvent) => { + if (isEmpty(item.items)) { + handleItemClick(item, e); + } else if (multiselect) { + handleCheckboxChange(item); + } + }; + + const handleScroll = (e: React.UIEvent) => { + if (!onScrollBottom) return; + + const { target } = e; + + if ( + (target as HTMLElement).scrollHeight - (target as HTMLElement).scrollTop === + (target as HTMLElement).clientHeight + ) { + onScrollBottom(e); + } + }; + + const { onKeyDown } = useKeyNavigation({ + focusedPath, + dispatchFocusedPath, + path, + dispatchPath, + pathMap, + focusedToValueMap, + handleToggle, + handlePressDown, + focusedChipIndex, + dispatchFocusedChipIndex, + value, + valueToItemMap, + multiselect, + isTargetAmount, + }); + + const isCurrentListOpen = Boolean(path[0]); + + // В данном эффекте мы следим за изменениями value и вносим коррективы в дерево чекбоксов. + useLayoutEffect(() => { + const checkedCopy = new Map(checked); + + checkedCopy.forEach((_, key) => { + checkedCopy.set(key, false); }); - const childrenArray = useMemo(() => Children.toArray(children), [children]) as React.ReactElement[]; - - const childrenMemo = useMemo( - () => getChildren(childrenArray, { onClick: onClickChildrenItem, childrenRefs: itemsRefs }, value), - [childrenArray, value, innerOpened], - ); - - const values = useMemo(() => getValues(childrenArray, value), [childrenArray, value]); - - return ( - - + if (!isEmpty(value)) { + if (Array.isArray(value)) { + value.forEach((val) => { + checkedCopy.set(val, true); + updateDescendants(valueToItemMap.get(val)!, checkedCopy, true); + updateAncestors(valueToItemMap.get(val)!, checkedCopy); + }); + } else { + checkedCopy.set(value as string, 'done'); + updateSingleAncestors(valueToItemMap.get(value as string)!, checkedCopy, 'dot'); + } + } + + setChecked(checkedCopy); + }, [value]); + + return ( + + {label && labelPlacement === 'outer' && target !== 'button-like' && {label}} + } - className={cx(ref?.classList.toString())} // INFO: Прокидываем стили для Popover - id={innerId} - offset={offset} - frame={frame} - placement={getPlacements(placement)} - trigger="click" - usePortal={usePortal} - selectWidth={dynamicTargetWidth} - isFocusTrapped={false} preventOverflow={false} - closeOnEsc={false} closeOnOverlayClick > - - {valueType !== 'native' && ( - {childrenMemo} - )} + +
    + {transformedItems.map((item, index) => ( + + ))} +
- - ); - }, - ); + + {helperText && target === 'textfield-like' && {helperText}} + + ); + }); export const selectConfig = { name: 'Select', tag: 'div', layout: selectRoot, - base: '', + base, variations: { - target: { - css: targetCSS, - }, view: { css: viewCSS, }, @@ -255,6 +304,7 @@ export const selectConfig = { }, defaults: { view: 'default', + chipView: 'default', size: 'm', }, }; diff --git a/packages/plasma-new-hope/src/components/Select/Select.types.ts b/packages/plasma-new-hope/src/components/Select/Select.types.ts index 575168f2f2..0bc6734280 100644 --- a/packages/plasma-new-hope/src/components/Select/Select.types.ts +++ b/packages/plasma-new-hope/src/components/Select/Select.types.ts @@ -1,54 +1,133 @@ -import { MutableRefObject, SyntheticEvent } from 'react'; -import { InputHTMLAttributes } from '@salutejs/plasma-core'; +import type { CSSProperties, ButtonHTMLAttributes } from 'react'; +import React from 'react'; -import { DropdownPlacement, DropdownPlacementBasic } from '../Dropdown/Dropdown.types'; +import { FocusedPathState } from './reducers'; +import { ItemOption, ItemOptionTransformed } from './ui/Inner/ui/Item/Item.types'; +import type { ValueToCheckedMapType } from './hooks/usePathMaps'; -export type SelectPrimitiveValue = string | number | boolean; +export type SelectPlacementBasic = 'top' | 'bottom' | 'right' | 'left'; +export type SelectPlacement = SelectPlacementBasic | 'auto'; -export type SelectValue = SelectPrimitiveValue | Array; - -export type ValueType = 'single' | 'multiple' | 'native'; - -export type EnumerationType = 'comma' | 'chip'; - -export type TargetType = 'button-like' | 'textField-like'; +type Target = + | { + /** + * Стиль селекта: button-like или textfield-like. + * @default textfield-like + */ + target?: 'textfield-like'; + view?: 'default' | 'positive' | 'warning' | 'negative'; + /** + * Слот для контента слева. + */ + contentLeft?: React.ReactNode; + /** + * Метка-подпись к элементу. + */ + label?: string; + /** + * Расположение лейбла. + * @default outer + */ + labelPlacement?: 'outer' | 'inner'; + /** + * Placeholder. + */ + placeholder?: string; + /** + * Вспомогательный текст снизу слева для поля ввода. + */ + helperText?: string; + } + | { + target?: 'button-like'; + view?: + | 'default' + | 'accent' + | 'secondary' + | 'clear' + | 'positive' + | 'warning' + | 'negative' + | 'dark' + | 'black' + | 'white'; + contentLeft?: never; + label?: never; + labelPlacement?: never; + placeholder?: never; + helperText?: never; + }; -export type ComponentType = 'select' | 'combobox'; +type IsMultiselect = + | { + multiselect?: false; + value?: string; + onChange?: (value: string) => void; + /** + * Если включено - будет выведено общее количество выбранных элементов вместо перечисления. + * @default false + */ + isTargetAmount?: never | false; + } + | { + multiselect: true; + value?: Array; + onChange?: (value: Array) => void; + isTargetAmount?: boolean; + }; -export interface CustomSelectProps { +export interface BasicProps { + /** + * Список элементов. + */ + items: Array; /** - * Вид элемента, рядом с которым появляется список. + * Сторона открытия дропдауна относительно target элемента. + * @default bottom */ - target?: TargetType; + placement?: SelectPlacement | Array; /** - * Текст лейбла. + * Компонент неактивен. + * @default false */ - label?: string; + disabled?: boolean; /** - * Тип перечисления выбранных значений. - * Варианты: comma, chips + * Коллбэк для определения достижения скроллом конца списка. */ - enumerationType?: EnumerationType; + onScrollBottom?: (e: React.UIEvent) => void; /** - * Находится ли в портале. + * Вариант: обычный или сжатый + * @default normal */ - usePortal?: boolean; + variant?: 'normal' | 'tight'; /** - * Дропдаун открыт или нет. - * @default - * false + * Значение css overflow для выпадающего меню. + * @example listOverflow="scroll" */ - opened?: boolean; + listOverflow?: CSSProperties['overflow']; /** - * Сторона открытия дропдауна относительно target элемента. - * @default - * auto + * Значение css height для выпадающего меню. + * @example listHeight="11", listHeight="auto", listHeight={11} + */ + listHeight?: number | CSSProperties['height']; + /** + * Значение css width для выпадающего списка. + * @example width="200px" + */ + listWidth?: CSSProperties['width']; + /** + * Портал для выпадающего списка. Принимает id контейнера или ref. */ - placement?: DropdownPlacement | Array; + portal?: string | React.RefObject; /** - * В каком контейнере позиционируется(по умолчанию document), можно также указать id элемента или ref для него. + * Callback для кастомной настройки значения в селекте */ - frame?: 'document' | string | React.RefObject; + renderValue?: (value: ItemOption['value'], label: ItemOption['label']) => string; + /** + * Callback для кастомной настройки айтема в выпадающем списке + */ + renderItem?: (value: ItemOption['value'], label: ItemOption['label']) => React.ReactNode; + /** * Размер компонента. */ @@ -58,57 +137,23 @@ export interface CustomSelectProps { */ view?: string; /** - * Событие сворачивания/разворачивания дропдауна. + * Внешний вид чипа в варианте textfield-like multiselect. */ - onToggle?: (isOpen: boolean, event: SyntheticEvent | Event) => void; + chipView?: string; } -export type valueTypeSeparation = - | { - /** - * Тип селекта. - * Варианты: single, multiple, native - */ - valueType?: 'single' | 'native'; - value?: SelectPrimitiveValue; - /** - * Обработчик изменения выбранного значения. - */ - onChangeValue?: (value?: SelectPrimitiveValue) => void; - } - | { - /** - * Тип селекта. - * Варианты: single, multiple, native - */ - valueType: 'multiple'; - value?: Array; - /** - * Обработчик изменения выбранного значения. - */ - onChangeValue?: (value?: Array) => void; - }; - -export type SelectProps = Omit, 'value' | 'size' | 'onChange'> & - CustomSelectProps & - valueTypeSeparation; +export type SelectProps = BasicProps & + IsMultiselect & + Target & + Omit, 'value' | 'onChange' | 'onResize' | 'onResizeCapture' | 'nonce'>; -export interface ControlledRefs { - targetRef: MutableRefObject; - chipsRefs: MutableRefObject>; - selectRef: MutableRefObject; - itemsRefs: MutableRefObject>; - inputRef?: MutableRefObject; -} - -export interface UseKeyNavigationProps { - controlledRefs: ControlledRefs; - opened: boolean; - valueType?: ValueType; - componentType?: ComponentType; - value?: SelectPrimitiveValue | SelectPrimitiveValue[]; - search?: string; - enumerationType?: EnumerationType; - updateValue: (item: HTMLElement, event: SyntheticEvent | Event) => void; - updateOpened: (value: boolean, event: SyntheticEvent | Event) => void; -} +export type ItemContext = { + focusedPath: FocusedPathState; + checked: ValueToCheckedMapType; + multiselect: boolean; + size: SelectProps['size']; + handleCheckboxChange: (item: ItemOptionTransformed) => void; + handleItemClick: (item: ItemOptionTransformed, e: React.MouseEvent) => void; + variant: SelectProps['variant']; + renderItem: SelectProps['renderItem']; +}; diff --git a/packages/plasma-new-hope/src/components/Select/hooks/index.ts b/packages/plasma-new-hope/src/components/Select/hooks/index.ts deleted file mode 100644 index 74fec62e3b..0000000000 --- a/packages/plasma-new-hope/src/components/Select/hooks/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { useKeyNavigation } from './useKeyNavigation'; diff --git a/packages/plasma-new-hope/src/components/Select/hooks/useKeyboardNavigation.ts b/packages/plasma-new-hope/src/components/Select/hooks/useKeyboardNavigation.ts new file mode 100644 index 0000000000..e3b30e9ebf --- /dev/null +++ b/packages/plasma-new-hope/src/components/Select/hooks/useKeyboardNavigation.ts @@ -0,0 +1,334 @@ +import type { KeyboardEvent, Dispatch } from 'react'; +import React from 'react'; + +import { + PathAction, + PathState, + FocusedPathAction, + FocusedPathState, + FocusedChipIndexState, + FocusedChipIndexAction, +} from '../reducers'; +import { SelectProps } from '../Select.types'; +import type { ItemOptionTransformed } from '../ui/Inner/ui/Item/Item.types'; + +import { PathMapType, FocusedToValueMapType, ValueToItemMapType } from './usePathMaps'; + +const JUMP_SIZE = 10; + +export const keys = { + Enter: 'Enter', + Space: 'Space', + Tab: 'Tab', + Escape: 'Escape', + Backspace: 'Backspace', + ArrowLeft: 'ArrowLeft', + ArrowRight: 'ArrowRight', + ArrowUp: 'ArrowUp', + ArrowDown: 'ArrowDown', + Home: 'Home', + End: 'End', + PageUp: 'PageUp', + PageDown: 'PageDown', +}; + +const getFurtherPath = (focusedPath: FocusedPathState, focusedToValueMap: FocusedToValueMapType) => { + const focusedPathAsString = focusedPath.reduce((acc, n) => `${acc}/${n}`, '').replace(/^(\/)/, ''); + + return focusedToValueMap.get(focusedPathAsString); +}; + +interface Props { + focusedPath: FocusedPathState; + dispatchFocusedPath: Dispatch; + path: PathState; + dispatchPath: Dispatch; + pathMap: PathMapType; + focusedToValueMap: FocusedToValueMapType; + handleToggle: (opened: boolean) => void; + handlePressDown: (item: ItemOptionTransformed, e?: React.MouseEvent) => void; + focusedChipIndex: FocusedChipIndexState; + dispatchFocusedChipIndex: Dispatch; + value: string | string[]; + valueToItemMap: ValueToItemMapType; + multiselect: boolean; + isTargetAmount: SelectProps['isTargetAmount']; +} + +interface ReturnedProps { + onKeyDown: (event: React.KeyboardEvent) => void; +} + +export const useKeyNavigation = ({ + focusedPath, + dispatchFocusedPath, + path, + dispatchPath, + pathMap, + focusedToValueMap, + handleToggle, + handlePressDown, + focusedChipIndex, + dispatchFocusedChipIndex, + value, + valueToItemMap, + multiselect, + isTargetAmount, +}: Props): ReturnedProps => { + const currentIndex: number = focusedPath?.[focusedPath.length - 1] || 0; + const currentLength: number = pathMap.get(path?.[focusedPath.length - 1]) || 0; + + const onKeyDown = (event: KeyboardEvent) => { + switch (event.code) { + case keys.ArrowUp: { + if (focusedPath.length) { + if (currentIndex > 0) { + if (path.length > focusedPath.length) { + dispatchPath({ type: 'removed_last_level' }); + } + + dispatchFocusedPath({ type: 'change_last_focus', value: currentIndex - 1 }); + } + } else { + dispatchPath({ type: 'opened_first_level' }); + dispatchFocusedPath({ type: 'set_initial_focus' }); + handleToggle(true); + } + + if (Array.isArray(value)) { + dispatchFocusedChipIndex({ type: 'reset' }); + } + + break; + } + + case keys.ArrowDown: { + if (focusedPath.length) { + if (currentIndex + 1 < currentLength) { + if (path.length > focusedPath.length) { + dispatchPath({ type: 'removed_last_level' }); + } + + dispatchFocusedPath({ type: 'change_last_focus', value: currentIndex + 1 }); + } + } else { + dispatchPath({ type: 'opened_first_level' }); + dispatchFocusedPath({ type: 'set_initial_focus' }); + handleToggle(true); + } + + if (Array.isArray(value)) { + dispatchFocusedChipIndex({ type: 'reset' }); + } + + break; + } + + case keys.ArrowLeft: { + if (path[0]) { + if (focusedPath.length) { + if (path.length > focusedPath.length) { + dispatchPath({ type: 'removed_last_level' }); + } else { + dispatchFocusedPath({ type: 'return_prev_focus' }); + } + } + + if (path.length === 1) { + handleToggle(false); + } + } else if (Array.isArray(value) && !isTargetAmount) { + dispatchFocusedChipIndex({ type: 'moveLeft' }); + } + + break; + } + + case keys.ArrowRight: { + if (path[0]) { + if (!focusedPath.length) { + break; + } + + const currentItem = getFurtherPath(focusedPath, focusedToValueMap); + + if (currentItem?.items) { + if (path.length > focusedPath.length) { + dispatchFocusedPath({ type: 'add_focus', value: 0 }); + } else { + dispatchPath({ type: 'added_next_level', value: currentItem.value.toString() }); + } + } + } else if (Array.isArray(value) && !isTargetAmount) { + dispatchFocusedChipIndex({ type: 'moveRight', total: value.length }); + } + + break; + } + + case keys.Backspace: { + if (!multiselect) break; + + if (focusedChipIndex !== null) { + const currentItem = valueToItemMap.get(value[focusedChipIndex])!; + + handlePressDown(currentItem); + + if (value.length === 1) { + dispatchFocusedChipIndex({ type: 'reset' }); + + break; + } + + if (focusedChipIndex === value.length - 1) { + dispatchFocusedChipIndex({ type: 'moveLeft' }); + + break; + } + } + + break; + } + + case keys.Space: { + event.preventDefault(); + + const currentItem = getFurtherPath(focusedPath, focusedToValueMap); + + if (!path[0]) { + dispatchPath({ type: 'opened_first_level' }); + dispatchFocusedPath({ type: 'set_initial_focus' }); + break; + } + + if (!currentItem || currentItem?.disabled) { + break; + } + + handlePressDown(currentItem); + + break; + } + + case keys.Enter: { + event.preventDefault(); + + if (Array.isArray(value)) { + dispatchFocusedChipIndex({ type: 'reset' }); + } + + const currentItem = getFurtherPath(focusedPath, focusedToValueMap)!; + + if (currentItem?.disabled) { + break; + } + + if (!path[0]) { + dispatchPath({ type: 'opened_first_level' }); + dispatchFocusedPath({ type: 'set_initial_focus' }); + break; + } + + if (currentItem?.items) { + if (path.length > focusedPath.length) { + dispatchFocusedPath({ type: 'add_focus', value: 0 }); + } else { + dispatchPath({ type: 'added_next_level', value: currentItem.value.toString() }); + } + + break; + } + + handlePressDown(currentItem); + + break; + } + + case keys.Tab: + case keys.Escape: { + dispatchFocusedPath({ type: 'reset' }); + dispatchPath({ type: 'reset' }); + dispatchFocusedChipIndex({ type: 'reset' }); + handleToggle(false); + + break; + } + + case keys.Home: { + if (path[0]) { + if (path.length > focusedPath.length) { + dispatchPath({ type: 'removed_last_level' }); + } + + dispatchFocusedPath({ type: 'change_last_focus', value: 0 }); + } else { + dispatchPath({ type: 'opened_first_level' }); + dispatchFocusedPath({ type: 'set_initial_focus' }); + + handleToggle(true); + } + + break; + } + + case keys.End: { + if (path[0]) { + if (path.length > focusedPath.length) { + dispatchPath({ type: 'removed_last_level' }); + } + + dispatchFocusedPath({ type: 'change_last_focus', value: currentLength - 1 }); + } else { + dispatchPath({ type: 'opened_first_level' }); + dispatchFocusedPath({ type: 'change_last_focus', value: (pathMap.get('root') || 0) - 1 }); + + handleToggle(true); + } + + break; + } + + case keys.PageUp: { + if (!path[0]) { + break; + } + + if (path.length > focusedPath.length) { + dispatchPath({ type: 'removed_last_level' }); + } + + if (currentIndex <= JUMP_SIZE) { + dispatchFocusedPath({ type: 'change_last_focus', value: 0 }); + } else { + dispatchFocusedPath({ type: 'change_last_focus', value: currentIndex - JUMP_SIZE }); + } + + break; + } + + case keys.PageDown: { + if (!path[0]) { + break; + } + + if (path.length > focusedPath.length) { + dispatchPath({ type: 'removed_last_level' }); + } + + if (currentLength - currentIndex <= JUMP_SIZE) { + dispatchFocusedPath({ type: 'change_last_focus', value: currentLength - 1 }); + } else { + dispatchFocusedPath({ type: 'change_last_focus', value: currentIndex + JUMP_SIZE }); + } + + break; + } + + default: { + break; + } + } + }; + + return { onKeyDown }; +}; diff --git a/packages/plasma-new-hope/src/components/Select/hooks/usePathMaps.ts b/packages/plasma-new-hope/src/components/Select/hooks/usePathMaps.ts new file mode 100644 index 0000000000..4b1bc1ce74 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Select/hooks/usePathMaps.ts @@ -0,0 +1,44 @@ +import { isEmpty } from '../../../utils'; +import { SelectProps } from '../Select.types'; +import { ItemOptionTransformed } from '../ui/Inner/ui/Item/Item.types'; + +export type PathMapType = Map; +export type FocusedToValueMapType = Map; +export type ValueToCheckedMapType = Map; +export type ValueToItemMapType = Map; + +// Рекурсивно проходим по дереву items и создаем 4 мапы: открытых путей, фокусов, выбранных элементов и айтемов. +export const usePathMaps = (items: SelectProps['items']) => { + const pathMap: PathMapType = new Map(); + const focusedToValueMap: FocusedToValueMapType = new Map(); + const valueToCheckedMap: ValueToCheckedMapType = new Map(); + const valueToItemMap: ValueToItemMapType = new Map(); + + pathMap.set('root', items.length); + + const rec = (items: SelectProps['items'], prevIndex = '') => { + items.forEach((item: ItemOptionTransformed, index: number) => { + const { value, items: innerItems } = item; + + const currIndex = `${prevIndex}/${index}`.replace(/^(\/)/, ''); + focusedToValueMap.set(currIndex, item); + + valueToCheckedMap.set(value, false); + + if (isEmpty(innerItems) || !innerItems) { + valueToItemMap.set(value, item); + } else { + pathMap.set(value, innerItems.length); + rec(innerItems, currIndex); + } + }); + }; + rec(items); + + return [pathMap, focusedToValueMap, valueToCheckedMap, valueToItemMap] as [ + PathMapType, + FocusedToValueMapType, + ValueToCheckedMapType, + ValueToItemMapType, + ]; +}; diff --git a/packages/plasma-new-hope/src/components/Select/index.ts b/packages/plasma-new-hope/src/components/Select/index.ts index a5e9c67346..09d259e91e 100644 --- a/packages/plasma-new-hope/src/components/Select/index.ts +++ b/packages/plasma-new-hope/src/components/Select/index.ts @@ -1,4 +1,3 @@ export { selectRoot, selectConfig } from './Select'; -export { classes as selectClasses, tokens as selectTokens } from './Select.tokens'; -export * from './ui'; -export type { SelectProps, SelectPrimitiveValue, SelectValue } from './Select.types'; +export type { SelectProps } from './Select.types'; +export { tokens as selectTokens } from './Select.tokens'; diff --git a/packages/plasma-new-hope/src/components/Select/reducers/focusedChipIndexReducer.ts b/packages/plasma-new-hope/src/components/Select/reducers/focusedChipIndexReducer.ts new file mode 100644 index 0000000000..48c27e9dd0 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Select/reducers/focusedChipIndexReducer.ts @@ -0,0 +1,42 @@ +export type FocusedChipIndexState = number | null; + +export type FocusedChipIndexAction = { type: 'reset' } | { type: 'moveLeft' } | { type: 'moveRight'; total: number }; + +export function focusedChipIndexReducer( + state: FocusedChipIndexState, + action: FocusedChipIndexAction, +): FocusedChipIndexState { + switch (action.type) { + case 'reset': { + return null; + } + + case 'moveLeft': { + if (state === null) { + return 0; + } + + if (state === 0) { + return state; + } + + return state - 1; + } + + case 'moveRight': { + if (state === null) { + return action.total - 1; + } + + if (state === action.total - 1) { + return state; + } + + return state + 1; + } + + default: { + return null; + } + } +} diff --git a/packages/plasma-new-hope/src/components/Select/reducers/focusedPathReducer.ts b/packages/plasma-new-hope/src/components/Select/reducers/focusedPathReducer.ts new file mode 100644 index 0000000000..bc40ac6c23 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Select/reducers/focusedPathReducer.ts @@ -0,0 +1,36 @@ +export type FocusedPathState = Array; + +export type FocusedPathAction = + | { type: 'reset' } + | { type: 'set_initial_focus' } + | { type: 'change_last_focus'; value: number } + | { type: 'add_focus'; value: number } + | { type: 'return_prev_focus' }; + +export function focusedPathReducer(state: FocusedPathState, action: FocusedPathAction): FocusedPathState { + switch (action.type) { + case 'reset': { + return []; + } + + case 'set_initial_focus': { + return [0]; + } + + case 'change_last_focus': { + return [...state.slice(0, -1), action.value]; + } + + case 'add_focus': { + return [...state, action.value]; + } + + case 'return_prev_focus': { + return state.slice(0, -1); + } + + default: { + return state; + } + } +} diff --git a/packages/plasma-new-hope/src/components/Select/reducers/index.ts b/packages/plasma-new-hope/src/components/Select/reducers/index.ts new file mode 100644 index 0000000000..c2a4ebb491 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Select/reducers/index.ts @@ -0,0 +1,3 @@ +export * from './pathReducer'; +export * from './focusedPathReducer'; +export * from './focusedChipIndexReducer'; diff --git a/packages/plasma-new-hope/src/components/Select/reducers/pathReducer.ts b/packages/plasma-new-hope/src/components/Select/reducers/pathReducer.ts new file mode 100644 index 0000000000..f99acf5c24 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Select/reducers/pathReducer.ts @@ -0,0 +1,41 @@ +export type PathState = Array; + +export type PathAction = + | { type: 'reset' } + | { type: 'opened_first_level' } + | { type: 'added_next_level'; value: string } + | { type: 'removed_last_level' } + | { type: 'changed_on_level'; value: string; level: number } + | { type: 'cut_by_level'; level: number }; + +export function pathReducer(state: PathState, action: PathAction): PathState { + switch (action.type) { + case 'reset': { + return []; + } + + case 'opened_first_level': { + return ['root']; + } + + case 'added_next_level': { + return [...state, action.value]; + } + + case 'removed_last_level': { + return state.slice(0, -1); + } + + case 'changed_on_level': { + return [...state.slice(0, action.level), action.value]; + } + + case 'cut_by_level': { + return state.slice(0, action.level); + } + + default: { + return state; + } + } +} diff --git a/packages/plasma-new-hope/src/components/Select/ui/InfiniteLoader/InfiniteLoader.styles.ts b/packages/plasma-new-hope/src/components/Select/ui/InfiniteLoader/InfiniteLoader.styles.ts new file mode 100644 index 0000000000..868bc9e199 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Select/ui/InfiniteLoader/InfiniteLoader.styles.ts @@ -0,0 +1,34 @@ +import { styled } from '@linaria/react'; + +import { tokens, classes } from '../../Select.tokens'; +import { component } from '../../../../engines'; +import { spinnerConfig, spinnerTokens } from '../../../Spinner'; +import type { SelectProps } from '../../Select.types'; + +const Spinner = component(spinnerConfig); + +export const StyledSpinner = styled(Spinner)` + ${spinnerTokens.color}: var(--text-primary); + ${spinnerTokens.size}: var(${tokens.spinnerSize}); +`; + +export const Wrapper = styled.div<{ variant: SelectProps['variant'] }>` + display: flex; + align-items: center; + justify-content: center; + gap: 0.25rem; + height: var(${tokens.itemHeight}); + padding: ${({ variant }) => `var(${variant === 'tight' ? tokens.itemPaddingTight : tokens.itemPadding})`}; + font-family: var(${tokens.fontFamily}); + font-size: var(${tokens.fontSize}); + font-style: var(${tokens.fontStyle}); + font-weight: var(${tokens.fontWeight}); + letter-spacing: var(${tokens.fontLetterSpacing}); + line-height: var(${tokens.fontLineHeight}); + user-select: none; + + & .${classes.selectSpinner} { + ${spinnerTokens.size}: ${({ variant }) => + `var(${variant === 'tight' ? tokens.spinnerSizeTight : tokens.spinnerSize})`}; + } +`; diff --git a/packages/plasma-new-hope/src/components/Select/ui/InfiniteLoader/InfiniteLoader.tsx b/packages/plasma-new-hope/src/components/Select/ui/InfiniteLoader/InfiniteLoader.tsx new file mode 100644 index 0000000000..cd3073cff7 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Select/ui/InfiniteLoader/InfiniteLoader.tsx @@ -0,0 +1,15 @@ +import React from 'react'; + +import { classes } from '../../Select.tokens'; +import { SelectProps } from '../../Select.types'; + +import { StyledSpinner, Wrapper } from './InfiniteLoader.styles'; + +export const InfiniteLoader = ({ variant }: { variant: SelectProps['variant'] }) => { + return ( + + + Загрузка + + ); +}; diff --git a/packages/plasma-new-hope/src/components/Select/ui/Inner/Inner.tsx b/packages/plasma-new-hope/src/components/Select/ui/Inner/Inner.tsx new file mode 100644 index 0000000000..f3bec4e914 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Select/ui/Inner/Inner.tsx @@ -0,0 +1,66 @@ +import React from 'react'; +import type { FC } from 'react'; + +import { isEmpty } from '../../../../utils'; +import { Ul, StyledPopover } from '../../Select.styles'; + +import type { ItemOptionTransformed } from './ui/Item/Item.types'; +import { Item } from './ui'; +import { InnerProps } from './Inner.type'; + +export const Inner: FC = ({ item, currentLevel, path, dispatchPath, index, listWidth }) => { + const handleToggle = (opened: boolean): void => { + if (opened) { + dispatchPath({ type: 'changed_on_level', value: item.value.toString(), level: currentLevel + 1 }); + } else { + dispatchPath({ type: 'cut_by_level', level: currentLevel + 1 }); + } + }; + + const isCurrentListOpen = path[currentLevel + 1] === item.value.toString(); + + const listId = `tree_level_${currentLevel + 2}`; + const nextLevel = currentLevel + 1; + + if (!isEmpty(item?.items)) { + return ( + + } + onToggle={handleToggle} + isFocusTrapped={false} + preventOverflow={false} + > +
    + {item.items?.map((innerItem: ItemOptionTransformed, innerIndex: number) => ( + + ))} +
+ + ); + } + + return ; +}; diff --git a/packages/plasma-new-hope/src/components/Select/ui/Inner/Inner.type.ts b/packages/plasma-new-hope/src/components/Select/ui/Inner/Inner.type.ts new file mode 100644 index 0000000000..d5792701c3 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Select/ui/Inner/Inner.type.ts @@ -0,0 +1,15 @@ +import type { Dispatch } from 'react'; + +import type { PathAction, PathState } from '../../reducers'; +import type { SelectProps } from '../../Select.types'; + +import type { ItemOptionTransformed } from './ui/Item/Item.types'; + +export interface InnerProps { + item: ItemOptionTransformed; + currentLevel: number; + path: PathState; + dispatchPath: Dispatch; + index: number; + listWidth: SelectProps['listWidth']; +} diff --git a/packages/plasma-new-hope/src/components/Select/ui/Inner/ui/Item/Item.styles.ts b/packages/plasma-new-hope/src/components/Select/ui/Inner/ui/Item/Item.styles.ts new file mode 100644 index 0000000000..4d4a201502 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Select/ui/Inner/ui/Item/Item.styles.ts @@ -0,0 +1,123 @@ +import { styled } from '@linaria/react'; + +import { classes, tokens, constants } from '../../../../Select.tokens'; +import { addFocus, applyEllipsis } from '../../../../../../mixins'; +import { component, mergeConfig } from '../../../../../../engines'; +import { checkboxConfig, checkboxTokens } from '../../../../../Checkbox'; +import { indicatorConfig, indicatorTokens } from '../../../../../Indicator'; +import type { SelectProps } from '../../../../Select.types'; + +const mergedCheckboxConfig = mergeConfig(checkboxConfig); +const Checkbox = component(mergedCheckboxConfig); + +export const StyledCheckbox = styled(Checkbox)` + ${checkboxTokens.triggerSize}: var(${tokens.checkboxTriggerSize}); + ${checkboxTokens.triggerBorderRadius}: var(${tokens.checkboxTriggerBorderRadius}); + ${checkboxTokens.fillColor}: var(${tokens.checkboxFillColor}); + ${checkboxTokens.iconColor}: var(${tokens.checkboxIconColor}); + ${checkboxTokens.triggerBorderColor}: var(${tokens.checkboxTriggerBorderColor}); +`; + +const mergedIndicatorConfig = mergeConfig(indicatorConfig); +const Indicator = component(mergedIndicatorConfig); + +export const StyledIndicator = styled(Indicator)` + ${indicatorTokens.size}: var(${tokens.indicatorSize}); + ${indicatorTokens.color}: var(${tokens.checkboxFillColor}); +`; + +export const StyledContentLeft = styled.div` + display: inline-flex; +`; + +export const StyledContentRight = styled.div` + margin-left: auto; + display: inline-flex; +`; + +export const DisclosureIconWrapper = styled.div` + line-height: 0; + color: var(${constants.disclosureIconColor}); + + &:hover { + color: var(${constants.disclosureIconColorHover}); + } +`; + +export const IconWrapper = styled.div<{ variant: SelectProps['variant'] }>` + display: flex; + align-items: center; + justify-content: center; + width: ${({ variant }) => `var(${variant === 'tight' ? tokens.itemIconSizeTight : tokens.itemIconSize})`}; + height: ${({ variant }) => `var(${variant === 'tight' ? tokens.itemIconSizeTight : tokens.itemIconSize})`}; + margin: var(${tokens.itemIconMargin}); + line-height: 0; + color: var(${tokens.checkboxFillColor}); + + & .${classes.selectItemCheckbox} { + --plasma-checkbox-trigger-size: ${({ variant }) => + `var(${variant === 'tight' ? tokens.checkboxTriggerSizeTight : tokens.checkboxTriggerSize})`}; + --plasma-checkbox-trigger-border-radius: ${({ variant }) => + `var(${ + variant === 'tight' ? tokens.checkboxTriggerBorderRadiusTight : tokens.checkboxTriggerBorderRadius + })`}; + } +`; + +export const StyledText = styled.div` + ${applyEllipsis()}; + flex: 1; +`; + +export const Wrapper = styled.li<{ variant: SelectProps['variant'] }>` + display: flex; + align-items: center; + min-height: var(${tokens.itemHeight}); + margin: 0; + box-sizing: content-box; + padding: ${({ variant }) => `var(${variant === 'tight' ? tokens.itemPaddingTight : tokens.itemPadding})`}; + font-family: var(${tokens.fontFamily}); + font-size: var(${tokens.fontSize}); + font-style: var(${tokens.fontStyle}); + font-weight: var(${tokens.fontWeight}); + letter-spacing: var(${tokens.fontLetterSpacing}); + line-height: var(${tokens.fontLineHeight}); + background: var(${constants.itemBackground}); + color: var(--text-primary); + border-radius: var(${tokens.itemBorderRadius}); + user-select: none; + + &:hover:not(.${classes.dropdownItemIsDisabled}) { + cursor: pointer; + background: var(${constants.itemBackgroundHover}); + } + + &.${classes.dropdownItemIsActive} { + background: var(${constants.itemBackgroundHover}); + } + + &.${classes.dropdownItemIsDisabled} { + opacity: ${constants.opacity}; + cursor: not-allowed; + } + + :focus { + outline: none; + } + + ${addFocus({ + outlineSize: '0.0625rem', + outlineOffset: '0', + outlineColor: `var(${constants.focusColor})`, + outlineRadius: `var(${tokens.itemBorderRadius})`, + hasTransition: false, + customFocusRules: ` + &.${classes.dropdownItemIsFocused}:before { + outline: none; + box-shadow: 0 0 0 0.0625rem var(${constants.focusColor}); + } + `, + })}; +`; + +export const StyledCheckboxWrapper = styled.span``; diff --git a/packages/plasma-new-hope/src/components/Select/ui/Inner/ui/Item/Item.tsx b/packages/plasma-new-hope/src/components/Select/ui/Inner/ui/Item/Item.tsx new file mode 100644 index 0000000000..05ce3aef73 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Select/ui/Inner/ui/Item/Item.tsx @@ -0,0 +1,122 @@ +import React, { useEffect, useRef, FC, useContext } from 'react'; + +import { sizeToIconSize } from '../../../../utils'; +import { classes } from '../../../../Select.tokens'; +import { cx, isEmpty } from '../../../../../../utils'; +import { IconDisclosureRightCentered, IconDone } from '../../../../../_Icon'; +import { Context } from '../../../../Select'; + +import { ItemProps } from './Item.types'; +import { + StyledContentLeft, + StyledContentRight, + StyledText, + Wrapper, + DisclosureIconWrapper, + StyledCheckbox, + IconWrapper, + StyledIndicator, + StyledCheckboxWrapper, +} from './Item.styles'; + +export const Item: FC = ({ + item, + path, + currentLevel, + index, + ariaControls, + ariaExpanded, + ariaLevel, + ariaLabel, +}) => { + const { value, label, disabled, contentLeft, contentRight } = item; + const ref = useRef(null); + + const { + focusedPath, + checked, + multiselect, + size, + handleCheckboxChange, + handleItemClick, + variant, + renderItem, + } = useContext(Context); + + const isDisabledClassName = disabled ? classes.dropdownItemIsDisabled : undefined; + const focusedClass = + currentLevel === focusedPath.length - 1 && index === focusedPath?.[currentLevel] + ? classes.dropdownItemIsFocused + : undefined; + const activeClass = value === path?.[currentLevel + 1] ? classes.dropdownItemIsActive : undefined; + + useEffect(() => { + if (focusedClass && ref?.current) { + ref.current.scrollIntoView({ + behavior: 'smooth', + block: 'center', + inline: 'center', + }); + } + }, [focusedClass]); + + const handleChange = (e: React.ChangeEvent) => { + if (disabled) return; + + e.stopPropagation(); + + handleCheckboxChange(item); + }; + + const handleClick = (e: React.MouseEvent) => { + if (disabled) return; + + handleItemClick(item, e); + }; + + return ( + + + {multiselect && ( + e.stopPropagation()}> + + + )} + + {!multiselect && checked.get(item.value) === 'dot' && } + + {!multiselect && checked.get(item.value) === 'done' && ( + + )} + + + {contentLeft && {contentLeft}} + + {(renderItem && renderItem(value, label)) || label} + + {contentRight && {contentRight}} + + {!isEmpty(item.items) && ( + + + + )} + + ); +}; diff --git a/packages/plasma-new-hope/src/components/Select/ui/Inner/ui/Item/Item.types.ts b/packages/plasma-new-hope/src/components/Select/ui/Inner/ui/Item/Item.types.ts new file mode 100644 index 0000000000..0bf37dc5f1 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Select/ui/Inner/ui/Item/Item.types.ts @@ -0,0 +1,43 @@ +import type { ReactNode } from 'react'; + +import type { PathState } from '../../../../reducers'; + +export type ItemOption = { + /** + * Значение у item + */ + value: string; + /** + * Метка-подпись к item + */ + label: string; + /** + * Список дочерних items. + */ + items?: Array; + /** + * Item не активен + */ + disabled?: boolean; + /** + * Слот для контента слева + */ + contentLeft?: ReactNode; + /** + * Слот для контента справа + */ + contentRight?: ReactNode; +}; + +export type ItemOptionTransformed = ItemOption & { parent?: ItemOption | null }; + +export interface ItemProps { + item: ItemOptionTransformed; + currentLevel: number; + index: number; + path: PathState; + ariaControls?: string; + ariaExpanded?: boolean; + ariaLevel?: React.AriaAttributes['aria-level']; + ariaLabel?: React.AriaAttributes['aria-label']; +} diff --git a/packages/plasma-new-hope/src/components/Select/ui/Inner/ui/index.ts b/packages/plasma-new-hope/src/components/Select/ui/Inner/ui/index.ts new file mode 100644 index 0000000000..83b8222065 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Select/ui/Inner/ui/index.ts @@ -0,0 +1 @@ +export * from './Item/Item'; diff --git a/packages/plasma-new-hope/src/components/Select/ui/SelectChip/SelectChip.styles.ts b/packages/plasma-new-hope/src/components/Select/ui/SelectChip/SelectChip.styles.ts deleted file mode 100644 index b61e2fe7f7..0000000000 --- a/packages/plasma-new-hope/src/components/Select/ui/SelectChip/SelectChip.styles.ts +++ /dev/null @@ -1,53 +0,0 @@ -import { styled } from '@linaria/react'; - -import { chipConfig, chipTokens } from '../../../Chip'; -import { component, mergeConfig } from '../../../../engines'; -import { tokens } from '../../Select.tokens'; -import { addFocus } from '../../../../mixins'; - -// issue #823 -const mergedConfig = mergeConfig(chipConfig); -const Chip = component(mergedConfig); - -// NOTE: Необходимое переопределение токенов из компонента Chip т.к. используются его части -export const StyledChip = styled(Chip)` - ${chipTokens.color}: var(${tokens.chipColor}); - ${chipTokens.background}: var(${tokens.chipBackground}); - ${chipTokens.colorHover}: var(${tokens.chipColorHover}); - ${chipTokens.backgroundHover}: var(${tokens.chipBackgroundHover}); - ${chipTokens.colorActive}: var(${tokens.chipColorActive}); - ${chipTokens.backgroundActive}: var(${tokens.chipBackgroundActive}); - ${chipTokens.backgroundReadOnly}: var(${tokens.chipBackgroundReadOnly}); - ${chipTokens.colorReadOnly}: var(${tokens.chipColorReadOnly}); - ${chipTokens.backgroundReadOnlyHover}: var(${tokens.chipBackgroundReadOnlyHover}); - ${chipTokens.colorReadOnlyHover}: var(${tokens.chipColorReadOnlyHover}); - ${chipTokens.borderRadius}: var(${tokens.chipBorderRadius}); - ${chipTokens.width}: var(${tokens.chipWidth}); - ${chipTokens.height}: var(${tokens.chipHeight}); - ${chipTokens.paddingRight}: var(${tokens.chipPaddingRight}); - ${chipTokens.paddingLeft}: var(${tokens.chipPaddingLeft}); - ${chipTokens.fontFamily}: var(${tokens.chipFontFamily}); - ${chipTokens.fontSize}: var(${tokens.chipFontSize}); - ${chipTokens.fontStyle}: var(${tokens.chipFontStyle}); - ${chipTokens.fontWeight}: var(${tokens.chipFontWeight}); - ${chipTokens.letterSpacing}: var(${tokens.chipLetterSpacing}); - ${chipTokens.lineHeight}: var(${tokens.chipLineHeight}); - ${chipTokens.clearContentMarginLeft}: var(${tokens.chipClearContentMarginLeft}); - ${chipTokens.clearContentMarginRight}: var(${tokens.chipClearContentMarginRight}); - ${chipTokens.scaleHover}: var(${tokens.chipScaleHover}); - ${chipTokens.scaleActive}: var(${tokens.chipScaleActive}); - ${chipTokens.closeIconSize}: var(${tokens.chipCloseIconSize}); - ${chipTokens.closeIconColor}: var(${tokens.chipCloseIconColor}); - ${chipTokens.focusColor}: var(${tokens.focusColor}); - - ${addFocus({ - outlineOffset: '0.125rem', - outlineSize: '0.0625rem', - outlineRadius: `calc(var(${tokens.chipBorderRadius}) - 0.1rem)`, - outlineColor: `var(${tokens.focusColor})`, - })} - - &[readonly] { - opacity: var(${tokens.chipOpacityReadonly}); - } -`; diff --git a/packages/plasma-new-hope/src/components/Select/ui/SelectChip/SelectChip.tsx b/packages/plasma-new-hope/src/components/Select/ui/SelectChip/SelectChip.tsx deleted file mode 100644 index 3b35d9b7da..0000000000 --- a/packages/plasma-new-hope/src/components/Select/ui/SelectChip/SelectChip.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import React, { forwardRef, useCallback } from 'react'; - -import { StyledChip } from './SelectChip.styles'; -import type { SelectChipProps } from './SelectChip.types'; - -/** - * Чип, отображающий выбранный элемент - */ -export const SelectChip = forwardRef( - ({ value, text, index, disabled, readOnly, onClick, onClear, onKeyDown }, ref) => { - const onClearHandle = useCallback(() => { - onClear(value, text); - }, [onClear, value, text]); - - const onKeyDownHandle = useCallback( - (event: React.KeyboardEvent) => { - onKeyDown?.(value, text, index, event); - }, - [onKeyDown], - ); - - return ( - - ); - }, -); diff --git a/packages/plasma-new-hope/src/components/Select/ui/SelectChip/SelectChip.types.ts b/packages/plasma-new-hope/src/components/Select/ui/SelectChip/SelectChip.types.ts deleted file mode 100644 index 6b75864c63..0000000000 --- a/packages/plasma-new-hope/src/components/Select/ui/SelectChip/SelectChip.types.ts +++ /dev/null @@ -1,43 +0,0 @@ -import { KeyboardEvent } from 'react'; - -import type { SelectPrimitiveValue } from '../../Select.types'; - -export interface SelectChipProps { - /** - * Отображаемый текст. - */ - text: SelectPrimitiveValue; - /** - * Выбранное значение. - */ - value: SelectPrimitiveValue; - /** - * Номер компонента. - */ - index: number; - /** - * Компонент неактивен. - */ - disabled?: boolean; - /** - * Элемент формы не может изменяться пользователем. - */ - readOnly?: boolean; - /** - * Обработчик удаления выбранного значения. - */ - onClear: (value: SelectPrimitiveValue, text: SelectPrimitiveValue) => void; - /** - * Обработчик клика на выбранное значение. - */ - onClick?: (event: React.MouseEvent) => void; - /** - * Обработчик нажатия клавиши. - */ - onKeyDown?: ( - value: SelectPrimitiveValue, - text: SelectPrimitiveValue, - index: number, - event: KeyboardEvent, - ) => void; -} diff --git a/packages/plasma-new-hope/src/components/Select/ui/SelectDivider/SelectDivider.styles.ts b/packages/plasma-new-hope/src/components/Select/ui/SelectDivider/SelectDivider.styles.ts deleted file mode 100644 index 65875b815e..0000000000 --- a/packages/plasma-new-hope/src/components/Select/ui/SelectDivider/SelectDivider.styles.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { css } from '@linaria/core'; - -import { tokens } from '../../Select.tokens'; -import { dropdownTokens } from '../../../Dropdown'; - -// NOTE: Необходимое переопределение токенов из компонента DropdownItem т.к. используются его части -export const mappingOverride = css` - ${dropdownTokens.dividerColor}: var(${tokens.dividerColor}); - ${dropdownTokens.dividerWidth}: var(${tokens.dividerWidth}); - ${dropdownTokens.dividerHeight}: var(${tokens.dividerHeight}); - ${dropdownTokens.dividerMarginTop}: var(${tokens.dividerMarginTop}); - ${dropdownTokens.dividerMarginRight}: var(${tokens.dividerMarginRight}); - ${dropdownTokens.dividerMarginBottom}: var(${tokens.dividerMarginBottom}); - ${dropdownTokens.dividerMarginLeft}: var(${tokens.dividerMarginLeft}); -`; - -export const base = mappingOverride; diff --git a/packages/plasma-new-hope/src/components/Select/ui/SelectDivider/SelectDivider.tsx b/packages/plasma-new-hope/src/components/Select/ui/SelectDivider/SelectDivider.tsx deleted file mode 100644 index 7e8735aa82..0000000000 --- a/packages/plasma-new-hope/src/components/Select/ui/SelectDivider/SelectDivider.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { dropdownDividerRoot } from '../../../Dropdown'; - -import { base as viewCSS } from './variations/_view/base'; -import { base as sizeCSS } from './variations/_size/base'; -import { base } from './SelectDivider.styles'; - -export const selectDividerRoot = dropdownDividerRoot; - -export const selectDividerConfig = { - name: 'SelectDivider', - tag: 'div', - layout: selectDividerRoot, - base, - variations: { - view: { - css: viewCSS, - }, - size: { - css: sizeCSS, - }, - }, - defaults: { - view: 'primary', - size: 'm', - }, -}; diff --git a/packages/plasma-new-hope/src/components/Select/ui/SelectDivider/SelectDivider.types.ts b/packages/plasma-new-hope/src/components/Select/ui/SelectDivider/SelectDivider.types.ts deleted file mode 100644 index 8eb2ff6c4f..0000000000 --- a/packages/plasma-new-hope/src/components/Select/ui/SelectDivider/SelectDivider.types.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { DropdownDividerProps } from '../../../Dropdown/ui/DropdownDivider/DropdownDivider.types'; - -export type SelectDividerProps = DropdownDividerProps; diff --git a/packages/plasma-new-hope/src/components/Select/ui/SelectDivider/variations/_size/tokens.json b/packages/plasma-new-hope/src/components/Select/ui/SelectDivider/variations/_size/tokens.json deleted file mode 100644 index e3cc638d69..0000000000 --- a/packages/plasma-new-hope/src/components/Select/ui/SelectDivider/variations/_size/tokens.json +++ /dev/null @@ -1,8 +0,0 @@ -[ - "--plasma-select-divider-width", - "--plasma-select-divider-height", - "--plasma-select-divider-margin-top", - "--plasma-select-divider-margin-right", - "--plasma-select-divider-margin-bottom", - "--plasma-select-divider-margin-left" -] diff --git a/packages/plasma-new-hope/src/components/Select/ui/SelectDivider/variations/_view/base.ts b/packages/plasma-new-hope/src/components/Select/ui/SelectDivider/variations/_view/base.ts deleted file mode 100644 index cd585b76c4..0000000000 --- a/packages/plasma-new-hope/src/components/Select/ui/SelectDivider/variations/_view/base.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { css } from '@linaria/core'; - -export const base = css``; diff --git a/packages/plasma-new-hope/src/components/Select/ui/SelectDivider/variations/_view/tokens.json b/packages/plasma-new-hope/src/components/Select/ui/SelectDivider/variations/_view/tokens.json deleted file mode 100644 index e180c0aff0..0000000000 --- a/packages/plasma-new-hope/src/components/Select/ui/SelectDivider/variations/_view/tokens.json +++ /dev/null @@ -1 +0,0 @@ -["--plasma-select-divider-color"] diff --git a/packages/plasma-new-hope/src/components/Select/ui/SelectFooter/SelectFooter.styles.ts b/packages/plasma-new-hope/src/components/Select/ui/SelectFooter/SelectFooter.styles.ts deleted file mode 100644 index 81d8c74bcd..0000000000 --- a/packages/plasma-new-hope/src/components/Select/ui/SelectFooter/SelectFooter.styles.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { css } from '@linaria/core'; - -import { tokens } from '../../Select.tokens'; -import { dropdownTokens } from '../../../Dropdown'; - -// NOTE: Необходимое переопределение токенов из компонента DropdownItem т.к. используются его части -export const mappingOverride = css` - ${dropdownTokens.footerBackground}: var(${tokens.footerBackground}); - ${dropdownTokens.footerWidth}: var(${tokens.footerWidth}); - ${dropdownTokens.footerHeight}: var(${tokens.footerHeight}); - ${dropdownTokens.footerPaddingTop}: var(${tokens.footerPaddingTop}); - ${dropdownTokens.footerPaddingRight}: var(${tokens.footerPaddingRight}); - ${dropdownTokens.footerPaddingBottom}: var(${tokens.footerPaddingBottom}); - ${dropdownTokens.footerPaddingLeft}: var(${tokens.footerPaddingLeft}); - ${dropdownTokens.footerMarginTop}: var(${tokens.footerMarginTop}); - ${dropdownTokens.footerMarginRight}: var(${tokens.footerMarginRight}); - ${dropdownTokens.footerMarginBottom}: var(${tokens.footerMarginBottom}); - ${dropdownTokens.footerMarginLeft}: var(${tokens.footerMarginLeft}); - ${dropdownTokens.footerFontFamily}: var(${tokens.footerFontFamily}); - ${dropdownTokens.footerFontSize}: var(${tokens.footerFontSize}); - ${dropdownTokens.footerFontStyle}: var(${tokens.footerFontStyle}); - ${dropdownTokens.footerFontWeightBold}: var(${tokens.footerFontWeightBold}); - ${dropdownTokens.footerFontLetterSpacing}: var(${tokens.footerFontLetterSpacing}); - ${dropdownTokens.footerFontLineHeight}: var(${tokens.footerFontLineHeight}); -`; - -export const base = mappingOverride; diff --git a/packages/plasma-new-hope/src/components/Select/ui/SelectFooter/SelectFooter.tsx b/packages/plasma-new-hope/src/components/Select/ui/SelectFooter/SelectFooter.tsx deleted file mode 100644 index c3f5f32445..0000000000 --- a/packages/plasma-new-hope/src/components/Select/ui/SelectFooter/SelectFooter.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { dropdownFooterRoot } from '../../../Dropdown'; - -import { base as viewCSS } from './variations/_view/base'; -import { base as sizeCSS } from './variations/_size/base'; -import { base } from './SelectFooter.styles'; - -export const selectFooterRoot = dropdownFooterRoot; - -export const selectFooterConfig = { - name: 'SelectFooter', - tag: 'div', - layout: selectFooterRoot, - base, - variations: { - view: { - css: viewCSS, - }, - size: { - css: sizeCSS, - }, - }, - defaults: { - view: 'primary', - size: 'm', - }, -}; diff --git a/packages/plasma-new-hope/src/components/Select/ui/SelectFooter/SelectFooter.type.ts b/packages/plasma-new-hope/src/components/Select/ui/SelectFooter/SelectFooter.type.ts deleted file mode 100644 index 31ecd3df14..0000000000 --- a/packages/plasma-new-hope/src/components/Select/ui/SelectFooter/SelectFooter.type.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { DropdownFooterProps } from '../../../Dropdown/ui/DropdownFooter/DropdownFooter.type'; - -export type SelectFooterProps = DropdownFooterProps; diff --git a/packages/plasma-new-hope/src/components/Select/ui/SelectFooter/variations/_size/base.ts b/packages/plasma-new-hope/src/components/Select/ui/SelectFooter/variations/_size/base.ts deleted file mode 100644 index cd585b76c4..0000000000 --- a/packages/plasma-new-hope/src/components/Select/ui/SelectFooter/variations/_size/base.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { css } from '@linaria/core'; - -export const base = css``; diff --git a/packages/plasma-new-hope/src/components/Select/ui/SelectFooter/variations/_size/tokens.json b/packages/plasma-new-hope/src/components/Select/ui/SelectFooter/variations/_size/tokens.json deleted file mode 100644 index da373af1ca..0000000000 --- a/packages/plasma-new-hope/src/components/Select/ui/SelectFooter/variations/_size/tokens.json +++ /dev/null @@ -1,12 +0,0 @@ -[ - "--plasma-select-footer-width", - "--plasma-select-footer-height", - "--plasma-select-footer-padding-top", - "--plasma-select-footer-padding-right", - "--plasma-select-footer-padding-bottom", - "--plasma-select-footer-padding-left", - "--plasma-select-footer-margin-top", - "--plasma-select-footer-margin-right", - "--plasma-select-footer-margin-bottom", - "--plasma-select-footer-margin-left" -] diff --git a/packages/plasma-new-hope/src/components/Select/ui/SelectFooter/variations/_view/base.ts b/packages/plasma-new-hope/src/components/Select/ui/SelectFooter/variations/_view/base.ts deleted file mode 100644 index cd585b76c4..0000000000 --- a/packages/plasma-new-hope/src/components/Select/ui/SelectFooter/variations/_view/base.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { css } from '@linaria/core'; - -export const base = css``; diff --git a/packages/plasma-new-hope/src/components/Select/ui/SelectFooter/variations/_view/tokens.json b/packages/plasma-new-hope/src/components/Select/ui/SelectFooter/variations/_view/tokens.json deleted file mode 100644 index f1b08157c1..0000000000 --- a/packages/plasma-new-hope/src/components/Select/ui/SelectFooter/variations/_view/tokens.json +++ /dev/null @@ -1,9 +0,0 @@ -[ - "--plasma-select-footer-background", - "--plasma-select-footer-font-family", - "--plasma-select-footer-font-size", - "--plasma-select-footer-font-style", - "--plasma-select-footer-letter-spacing", - "--plasma-select-footer-line-height", - "--plasma-select-footer-font-weight" -] diff --git a/packages/plasma-new-hope/src/components/Select/ui/SelectGroup/SelectGroup.styles.ts b/packages/plasma-new-hope/src/components/Select/ui/SelectGroup/SelectGroup.styles.ts deleted file mode 100644 index dccbf19bea..0000000000 --- a/packages/plasma-new-hope/src/components/Select/ui/SelectGroup/SelectGroup.styles.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { css } from '@linaria/core'; - -import { tokens } from '../../Select.tokens'; -import { dropdownTokens } from '../../../Dropdown'; - -// NOTE: Необходимое переопределение токенов из компонента DropdownItem т.к. используются его части -export const mappingOverride = css` - ${dropdownTokens.groupBackground}: var(${tokens.groupBackground}); - ${dropdownTokens.groupWidth}: var(${tokens.groupWidth}); - ${dropdownTokens.groupHeight}: var(${tokens.groupHeight}); - ${dropdownTokens.groupPaddingTop}: var(${tokens.groupPaddingTop}); - ${dropdownTokens.groupPaddingRight}: var(${tokens.groupPaddingRight}); - ${dropdownTokens.groupPaddingBottom}: var(${tokens.groupPaddingBottom}); - ${dropdownTokens.groupPaddingLeft}: var(${tokens.groupPaddingLeft}); - ${dropdownTokens.groupMarginTop}: var(${tokens.groupMarginTop}); - ${dropdownTokens.groupMarginRight}: var(${tokens.groupMarginRight}); - ${dropdownTokens.groupMarginBottom}: var(${tokens.groupMarginBottom}); - ${dropdownTokens.groupMarginLeft}: var(${tokens.groupMarginLeft}); - ${dropdownTokens.groupLabelFontFamily}: var(${tokens.groupLabelFontFamily}); - ${dropdownTokens.groupLabelFontSize}: var(${tokens.groupLabelFontSize}); - ${dropdownTokens.groupLabelFontStyle}: var(${tokens.groupLabelFontStyle}); - ${dropdownTokens.groupLabelFontWeight}: var(${tokens.groupLabelFontWeight}); - ${dropdownTokens.groupLabelLetterSpacing}: var(${tokens.groupLabelLetterSpacing}); - ${dropdownTokens.groupLabelLineHeight}: var(${tokens.groupLabelLineHeight}); - ${dropdownTokens.groupLabelColor}: var(${tokens.groupLabelColor}); - ${dropdownTokens.groupLabelPaddingTop}: var(${tokens.groupLabelPaddingTop}); - ${dropdownTokens.groupLabelPaddingRight}: var(${tokens.groupLabelPaddingRight}); - ${dropdownTokens.groupLabelPaddingBottom}: var(${tokens.groupLabelPaddingBottom}); - ${dropdownTokens.groupLabelPaddingLeft}: var(${tokens.groupLabelPaddingLeft}); - ${dropdownTokens.groupLabelMarginTop}: var(${tokens.groupLabelMarginTop}); - ${dropdownTokens.groupLabelMarginRight}: var(${tokens.groupLabelMarginRight}); - ${dropdownTokens.groupLabelMarginBottom}: var(${tokens.groupLabelMarginBottom}); - ${dropdownTokens.groupLabelMarginLeft}: var(${tokens.groupLabelMarginLeft}); -`; - -export const base = mappingOverride; diff --git a/packages/plasma-new-hope/src/components/Select/ui/SelectGroup/SelectGroup.tsx b/packages/plasma-new-hope/src/components/Select/ui/SelectGroup/SelectGroup.tsx deleted file mode 100644 index f6bb4e8501..0000000000 --- a/packages/plasma-new-hope/src/components/Select/ui/SelectGroup/SelectGroup.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { dropdownGroupRoot } from '../../../Dropdown'; - -import { base as viewCSS } from './variations/_view/base'; -import { base as sizeCSS } from './variations/_size/base'; -import { base } from './SelectGroup.styles'; - -export const selectGroupRoot = dropdownGroupRoot; - -export const selectGroupConfig = { - name: 'SelectGroup', - tag: 'div', - layout: selectGroupRoot, - base, - variations: { - view: { - css: viewCSS, - }, - size: { - css: sizeCSS, - }, - }, - defaults: { - view: 'primary', - size: 'm', - }, -}; diff --git a/packages/plasma-new-hope/src/components/Select/ui/SelectGroup/SelectGroup.type.ts b/packages/plasma-new-hope/src/components/Select/ui/SelectGroup/SelectGroup.type.ts deleted file mode 100644 index aee06bfbbf..0000000000 --- a/packages/plasma-new-hope/src/components/Select/ui/SelectGroup/SelectGroup.type.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { DropdownGroupProps } from '../../../Dropdown/ui/DropdownGroup/DropdownGroup.type'; - -export type SelectGroupProps = DropdownGroupProps; diff --git a/packages/plasma-new-hope/src/components/Select/ui/SelectGroup/variations/_size/base.ts b/packages/plasma-new-hope/src/components/Select/ui/SelectGroup/variations/_size/base.ts deleted file mode 100644 index cd585b76c4..0000000000 --- a/packages/plasma-new-hope/src/components/Select/ui/SelectGroup/variations/_size/base.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { css } from '@linaria/core'; - -export const base = css``; diff --git a/packages/plasma-new-hope/src/components/Select/ui/SelectGroup/variations/_size/tokens.json b/packages/plasma-new-hope/src/components/Select/ui/SelectGroup/variations/_size/tokens.json deleted file mode 100644 index dbb4e55e6e..0000000000 --- a/packages/plasma-new-hope/src/components/Select/ui/SelectGroup/variations/_size/tokens.json +++ /dev/null @@ -1,20 +0,0 @@ -[ - "--plasma-select-group-width", - "--plasma-select-group-height", - "--plasma-select-group-padding-top", - "--plasma-select-group-padding-right", - "--plasma-select-group-padding-bottom", - "--plasma-select-group-padding-left", - "--plasma-select-group-margin-top", - "--plasma-select-group-margin-right", - "--plasma-select-group-margin-bottom", - "--plasma-select-group-margin-left", - "--plasma-select-group-label-padding-top", - "--plasma-select-group-label-padding-right", - "--plasma-select-group-label-padding-bottom", - "--plasma-select-group-label-padding-left", - "--plasma-select-group-label-margin-top", - "--plasma-select-group-label-margin-right", - "--plasma-select-group-label-margin-bottom", - "--plasma-select-group-label-margin-left" -] diff --git a/packages/plasma-new-hope/src/components/Select/ui/SelectGroup/variations/_view/base.ts b/packages/plasma-new-hope/src/components/Select/ui/SelectGroup/variations/_view/base.ts deleted file mode 100644 index cd585b76c4..0000000000 --- a/packages/plasma-new-hope/src/components/Select/ui/SelectGroup/variations/_view/base.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { css } from '@linaria/core'; - -export const base = css``; diff --git a/packages/plasma-new-hope/src/components/Select/ui/SelectGroup/variations/_view/tokens.json b/packages/plasma-new-hope/src/components/Select/ui/SelectGroup/variations/_view/tokens.json deleted file mode 100644 index d52e80a8ab..0000000000 --- a/packages/plasma-new-hope/src/components/Select/ui/SelectGroup/variations/_view/tokens.json +++ /dev/null @@ -1,10 +0,0 @@ -[ - "--plasma-select-group-background", - "--plasma-select-group-label-color", - "--plasma-select-group-label-font-family", - "--plasma-select-group-label-font-size", - "--plasma-select-group-label-font-style", - "--plasma-select-group-label-font-weight", - "--plasma-select-group-label-letter-spacing", - "--plasma-select-group-label-line-height" -] diff --git a/packages/plasma-new-hope/src/components/Select/ui/SelectHeader/SelectHeader.styles.ts b/packages/plasma-new-hope/src/components/Select/ui/SelectHeader/SelectHeader.styles.ts deleted file mode 100644 index 492031d9d0..0000000000 --- a/packages/plasma-new-hope/src/components/Select/ui/SelectHeader/SelectHeader.styles.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { css } from '@linaria/core'; - -import { tokens } from '../../Select.tokens'; -import { dropdownTokens } from '../../../Dropdown'; - -// NOTE: Необходимое переопределение токенов из компонента DropdownItem т.к. используются его части -export const mappingOverride = css` - ${dropdownTokens.headerBackground}: var(${tokens.headerBackground}); - ${dropdownTokens.headerWidth}: var(${tokens.headerWidth}); - ${dropdownTokens.headerHeight}: var(${tokens.headerHeight}); - ${dropdownTokens.headerPaddingTop}: var(${tokens.headerPaddingTop}); - ${dropdownTokens.headerPaddingRight}: var(${tokens.headerPaddingRight}); - ${dropdownTokens.headerPaddingBottom}: var(${tokens.headerPaddingBottom}); - ${dropdownTokens.headerPaddingLeft}: var(${tokens.headerPaddingLeft}); - ${dropdownTokens.headerMarginTop}: var(${tokens.headerMarginTop}); - ${dropdownTokens.headerMarginRight}: var(${tokens.headerMarginRight}); - ${dropdownTokens.headerMarginBottom}: var(${tokens.headerMarginBottom}); - ${dropdownTokens.headerMarginLeft}: var(${tokens.headerMarginLeft}); - ${dropdownTokens.headerFontFamily}: var(${tokens.headerFontFamily}); - ${dropdownTokens.headerFontSize}: var(${tokens.headerFontSize}); - ${dropdownTokens.headerFontStyle}: var(${tokens.headerFontStyle}); - ${dropdownTokens.headerFontWeightBold}: var(${tokens.headerFontWeightBold}); - ${dropdownTokens.headerFontLetterSpacing}: var(${tokens.headerFontLetterSpacing}); - ${dropdownTokens.headerFontLineHeight}: var(${tokens.headerFontLineHeight}); -`; - -export const base = mappingOverride; diff --git a/packages/plasma-new-hope/src/components/Select/ui/SelectHeader/SelectHeader.tsx b/packages/plasma-new-hope/src/components/Select/ui/SelectHeader/SelectHeader.tsx deleted file mode 100644 index ec3d7fb262..0000000000 --- a/packages/plasma-new-hope/src/components/Select/ui/SelectHeader/SelectHeader.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { dropdownHeaderRoot } from '../../../Dropdown'; - -import { base as viewCSS } from './variations/_view/base'; -import { base as sizeCSS } from './variations/_size/base'; -import { base } from './SelectHeader.styles'; - -export const selectHeaderRoot = dropdownHeaderRoot; - -export const selectHeaderConfig = { - name: 'SelectHeader', - tag: 'div', - layout: selectHeaderRoot, - base, - variations: { - view: { - css: viewCSS, - }, - size: { - css: sizeCSS, - }, - }, - defaults: { - view: 'primary', - size: 'm', - }, -}; diff --git a/packages/plasma-new-hope/src/components/Select/ui/SelectHeader/SelectHeader.type.ts b/packages/plasma-new-hope/src/components/Select/ui/SelectHeader/SelectHeader.type.ts deleted file mode 100644 index e7adebc284..0000000000 --- a/packages/plasma-new-hope/src/components/Select/ui/SelectHeader/SelectHeader.type.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { DropdownHeaderProps } from '../../../Dropdown/ui/DropdownHeader/DropdownHeader.type'; - -export type SelectHeaderProps = DropdownHeaderProps; diff --git a/packages/plasma-new-hope/src/components/Select/ui/SelectHeader/variations/_size/base.ts b/packages/plasma-new-hope/src/components/Select/ui/SelectHeader/variations/_size/base.ts deleted file mode 100644 index cd585b76c4..0000000000 --- a/packages/plasma-new-hope/src/components/Select/ui/SelectHeader/variations/_size/base.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { css } from '@linaria/core'; - -export const base = css``; diff --git a/packages/plasma-new-hope/src/components/Select/ui/SelectHeader/variations/_size/tokens.json b/packages/plasma-new-hope/src/components/Select/ui/SelectHeader/variations/_size/tokens.json deleted file mode 100644 index e29c7c5d35..0000000000 --- a/packages/plasma-new-hope/src/components/Select/ui/SelectHeader/variations/_size/tokens.json +++ /dev/null @@ -1,12 +0,0 @@ -[ - "--plasma-select-header-width", - "--plasma-select-header-height", - "--plasma-select-header-padding-top", - "--plasma-select-header-padding-right", - "--plasma-select-header-padding-bottom", - "--plasma-select-header-padding-left", - "--plasma-select-header-margin-top", - "--plasma-select-header-margin-right", - "--plasma-select-header-margin-bottom", - "--plasma-select-header-margin-left" -] diff --git a/packages/plasma-new-hope/src/components/Select/ui/SelectHeader/variations/_view/base.ts b/packages/plasma-new-hope/src/components/Select/ui/SelectHeader/variations/_view/base.ts deleted file mode 100644 index cd585b76c4..0000000000 --- a/packages/plasma-new-hope/src/components/Select/ui/SelectHeader/variations/_view/base.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { css } from '@linaria/core'; - -export const base = css``; diff --git a/packages/plasma-new-hope/src/components/Select/ui/SelectHeader/variations/_view/tokens.json b/packages/plasma-new-hope/src/components/Select/ui/SelectHeader/variations/_view/tokens.json deleted file mode 100644 index 2b08862ccd..0000000000 --- a/packages/plasma-new-hope/src/components/Select/ui/SelectHeader/variations/_view/tokens.json +++ /dev/null @@ -1,9 +0,0 @@ -[ - "--plasma-select-header-background", - "--plasma-select-header-font-family", - "--plasma-select-header-font-size", - "--plasma-select-header-font-style", - "--plasma-select-header-letter-spacing", - "--plasma-select-header-line-height", - "--plasma-select-header-font-weight" -] diff --git a/packages/plasma-new-hope/src/components/Select/ui/SelectItem/SelectItem.styles.ts b/packages/plasma-new-hope/src/components/Select/ui/SelectItem/SelectItem.styles.ts deleted file mode 100644 index 5b40d00829..0000000000 --- a/packages/plasma-new-hope/src/components/Select/ui/SelectItem/SelectItem.styles.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { css } from '@linaria/core'; - -import { tokens } from '../../Select.tokens'; -import { dropdownTokens } from '../../../Dropdown'; -import { baseContent as dropdownItemBase } from '../../../Dropdown/ui/DropdownItemOld/DropdownItem.styles'; - -// NOTE: Необходимое переопределение токенов из компонента DropdownItem т.к. используются его части -export const mappingOverride = ` - ${dropdownTokens.itemBackground}: var(${tokens.itemBackground}); - ${dropdownTokens.itemColor}: var(${tokens.itemColor}); - ${dropdownTokens.itemBackgroundHover}: var(${tokens.itemBackgroundHover}); - ${dropdownTokens.itemBackgroundSelected}: var(${tokens.itemBackgroundSelected}); - ${dropdownTokens.itemColorSelected}: var(${tokens.itemColorSelected}); - ${dropdownTokens.itemBackgroundSelectedHover}: var(${tokens.itemBackgroundSelectedHover}); - ${dropdownTokens.itemColorSelectedHover}: var(${tokens.itemColorSelectedHover}); - ${dropdownTokens.itemContentLeftColor}: var(${tokens.itemContentLeftColor}); - ${dropdownTokens.itemContentRightColor}: var(${tokens.itemContentRightColor}); - ${dropdownTokens.disabledOpacity}: var(${tokens.disabledOpacity}); - ${dropdownTokens.focusColor}: var(${tokens.focusColor}); - ${dropdownTokens.itemWidth}: var(${tokens.itemWidth}); - ${dropdownTokens.itemHeight}: var(${tokens.itemHeight}); - ${dropdownTokens.itemBorderRadius}: var(${tokens.itemBorderRadius}); - ${dropdownTokens.itemPaddingTop}: var(${tokens.itemPaddingTop}); - ${dropdownTokens.itemPaddingRight}: var(${tokens.itemPaddingRight}); - ${dropdownTokens.itemPaddingBottom}: var(${tokens.itemPaddingBottom}); - ${dropdownTokens.itemPaddingLeft}: var(${tokens.itemPaddingLeft}); - ${dropdownTokens.itemMarginTop}: var(${tokens.itemMarginTop}); - ${dropdownTokens.itemMarginRight}: var(${tokens.itemMarginRight}); - ${dropdownTokens.itemMarginBottom}: var(${tokens.itemMarginBottom}); - ${dropdownTokens.itemMarginLeft}: var(${tokens.itemMarginLeft}); - ${dropdownTokens.itemFontFamily}: var(${tokens.itemFontFamily}); - ${dropdownTokens.itemFontSize}: var(${tokens.itemFontSize}); - ${dropdownTokens.itemFontStyle}: var(${tokens.itemFontStyle}); - ${dropdownTokens.itemFontWeightBold}: var(${tokens.itemFontWeightBold}); - ${dropdownTokens.itemFontLetterSpacing}: var(${tokens.itemFontLetterSpacing}); - ${dropdownTokens.itemFontLineHeight}: var(${tokens.itemFontLineHeight}); - ${dropdownTokens.itemContentLeftWidth}: var(${tokens.itemContentLeftWidth}); - ${dropdownTokens.itemContentRightWidth}: var(${tokens.itemContentRightWidth}); -`; - -export const base = css` - ${dropdownItemBase}; - ${mappingOverride}; -`; diff --git a/packages/plasma-new-hope/src/components/Select/ui/SelectItem/SelectItem.tsx b/packages/plasma-new-hope/src/components/Select/ui/SelectItem/SelectItem.tsx deleted file mode 100644 index 08400baeed..0000000000 --- a/packages/plasma-new-hope/src/components/Select/ui/SelectItem/SelectItem.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import { dropdownItemOldRoot } from '../../../Dropdown'; - -import { base as viewCSS } from './variations/_view/base'; -import { base as sizeCSS } from './variations/_size/base'; -import { base } from './SelectItem.styles'; - -export const selectItemRoot = dropdownItemOldRoot; - -export const selectItemConfig = { - name: 'SelectItem', - tag: 'div', - layout: selectItemRoot, - base, - variations: { - view: { - css: viewCSS, - }, - size: { - css: sizeCSS, - }, - }, - defaults: { - view: 'primary', - size: 'm', - }, -}; diff --git a/packages/plasma-new-hope/src/components/Select/ui/SelectItem/SelectItem.type.ts b/packages/plasma-new-hope/src/components/Select/ui/SelectItem/SelectItem.type.ts deleted file mode 100644 index f486b8dcf4..0000000000 --- a/packages/plasma-new-hope/src/components/Select/ui/SelectItem/SelectItem.type.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { ComboboxItemProps } from '../../../Combobox/ui/ComboboxItem/ComboboxItem.type'; - -export type SelectItemProps = ComboboxItemProps; diff --git a/packages/plasma-new-hope/src/components/Select/ui/SelectItem/variations/_size/base.ts b/packages/plasma-new-hope/src/components/Select/ui/SelectItem/variations/_size/base.ts deleted file mode 100644 index cd585b76c4..0000000000 --- a/packages/plasma-new-hope/src/components/Select/ui/SelectItem/variations/_size/base.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { css } from '@linaria/core'; - -export const base = css``; diff --git a/packages/plasma-new-hope/src/components/Select/ui/SelectItem/variations/_size/tokens.json b/packages/plasma-new-hope/src/components/Select/ui/SelectItem/variations/_size/tokens.json deleted file mode 100644 index 8fa79cb7bf..0000000000 --- a/packages/plasma-new-hope/src/components/Select/ui/SelectItem/variations/_size/tokens.json +++ /dev/null @@ -1,19 +0,0 @@ -[ - "--plasma-select-item-width", - "--plasma-select-item-height", - "--plasma-select-item-padding-top", - "--plasma-select-item-padding-right", - "--plasma-select-item-padding-bottom", - "--plasma-select-item-padding-left", - "--plasma-select-item-margin-top", - "--plasma-select-item-margin-right", - "--plasma-select-item-margin-bottom", - "--plasma-select-item-margin-left", - "--plasma-select-item-border-radius", - "--plasma-select-item-font-family", - "--plasma-select-item-font-size", - "--plasma-select-item-font-style", - "--plasma-select-item-letter-spacing", - "--plasma-select-item-line-height", - "--plasma-select-item-font-weight" -] diff --git a/packages/plasma-new-hope/src/components/Select/ui/SelectItem/variations/_view/base.ts b/packages/plasma-new-hope/src/components/Select/ui/SelectItem/variations/_view/base.ts deleted file mode 100644 index cd585b76c4..0000000000 --- a/packages/plasma-new-hope/src/components/Select/ui/SelectItem/variations/_view/base.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { css } from '@linaria/core'; - -export const base = css``; diff --git a/packages/plasma-new-hope/src/components/Select/ui/SelectItem/variations/_view/tokens.json b/packages/plasma-new-hope/src/components/Select/ui/SelectItem/variations/_view/tokens.json deleted file mode 100644 index e07b1ed5ce..0000000000 --- a/packages/plasma-new-hope/src/components/Select/ui/SelectItem/variations/_view/tokens.json +++ /dev/null @@ -1,9 +0,0 @@ -[ - "--plasma-select-item-background", - "--plasma-select-item-color", - "--plasma-select-item-background-hover", - "--plasma-select-item-background-selected", - "--plasma-select-item-color-selected", - "--plasma-select-item-background-selected-hover", - "--plasma-select-item-color-selected-hover" -] diff --git a/packages/plasma-new-hope/src/components/Select/ui/SelectTarget/SelectTarget.styles.ts b/packages/plasma-new-hope/src/components/Select/ui/SelectTarget/SelectTarget.styles.ts deleted file mode 100644 index c0fe157655..0000000000 --- a/packages/plasma-new-hope/src/components/Select/ui/SelectTarget/SelectTarget.styles.ts +++ /dev/null @@ -1,190 +0,0 @@ -import { styled } from '@linaria/react'; - -import { IconChevronDown } from '../../../_Icon'; -import { addFocus, applyEllipsis } from '../../../../mixins'; -import { component, mergeConfig } from '../../../../engines'; -import { buttonConfig, buttonTokens } from '../../../Button'; -import { classes, tokens } from '../../Select.tokens'; -import type { TargetType } from '../../Select.types'; - -const { - hasChips, - hasNoFocus, - innerLabelUp, - arrowInverse, - selectTargetArrow, - selectTargeText, - selectTargetLabel, -} = classes; - -const mergedButtonConfig = mergeConfig(buttonConfig); -const Button = component(mergedButtonConfig); - -// NOTE: Необходимое переопределение токенов из компонента Button т.к. используются его части -export const StyledSelectTarget = styled(Button)<{ target?: TargetType; opened?: boolean }>` - ${buttonTokens.buttonDisabledOpacity}: var(${tokens.disabledOpacity}); - ${buttonTokens.buttonColor}: var(${tokens.targetColor}); - ${buttonTokens.buttonBackgroundColor}: ${({ opened }) => - opened ? `var(${tokens.targetBackgroundColorOpen})` : `var(${tokens.targetBackgroundColor})`}; - ${buttonTokens.buttonBackgroundColorHover}: ${({ opened }) => - opened ? `var(${tokens.targetBackgroundColorOpen})` : `var(${tokens.targetBackgroundColorHover})`}; - ${buttonTokens.buttonBackgroundColorActive}: ${({ opened }) => - opened ? `var(${tokens.targetBackgroundColorOpen})` : `var(${tokens.targetBackgroundColorActive})`}; - ${buttonTokens.buttonHeight}: var(${tokens.targetHeight}); - ${buttonTokens.buttonWidth}: var(${tokens.targetWidth}); - ${buttonTokens.buttonRadius}: var(${tokens.targetRadius}); - ${buttonTokens.buttonFontFamily}: var(${tokens.targetFontFamily}); - ${buttonTokens.buttonFontSize}: var(${tokens.targetFontSize}); - ${buttonTokens.buttonFontStyle}: var(${tokens.targetFontStyle}); - ${buttonTokens.buttonFontWeight}:var(${tokens.targetFontWeight}); - ${buttonTokens.buttonLetterSpacing}: var(${tokens.targetLetterSpacing}); - ${buttonTokens.buttonLineHeight}: var(${tokens.targetLineHeight}); - ${buttonTokens.buttonFocusColor}: var(${tokens.focusColor}); - - box-shadow: inset 0 0 0 0.0625rem - ${({ opened }) => (opened ? `var(${tokens.targetBorderColorOpen})` : `var(${tokens.targetBorderColor})`)}; - - &:hover:not([disabled]):not([readonly]) { - box-shadow: inset 0 0 0 0.0625rem - ${({ opened }) => - opened ? `var(${tokens.targetBorderColorOpen})` : `var(${tokens.targetBorderColorHover})`}; - } - - &:active:not([disabled]):not([readonly]) { - box-shadow: inset 0 0 0 0.0625rem - ${({ opened }) => - opened ? `var(${tokens.targetBorderColorOpen})` : `var(${tokens.targetBorderColorActive})`}; - } - - padding: ${({ target }) => - target === 'textField-like' ? `var(${tokens.targetPaddingWithInput})` : `var(${tokens.targetPadding})`}; - - display: flex; - justify-content: flex-start; - - &[readonly] { - cursor: default; - - .${String(selectTargetArrow)} { - opacity: 0.4; - } - } - - .${String(arrowInverse)} { - transform: rotate(-180deg); - } - - &.${String(hasChips)} { - padding: var(${tokens.targetPaddingHasChips}); - } - - &.${String(innerLabelUp)} { - .${String(selectTargeText)} { - top: var(${tokens.targetInnerTop}); - } - - .${String(selectTargetLabel)} { - top: var(${tokens.targetLabelInnerTop}); - font-family: var(${tokens.targetLabelInnerFontFamily}); - font-size: var(${tokens.targetLabelInnerFontSize}); - font-style: var(${tokens.targetLabelInnerFontStyle}); - font-weight: var(${tokens.targetLabelInnerFontWeight}); - letter-spacing: var(${tokens.targetLabelInnerLetterSpacing}); - line-height: var(${tokens.targetLabelInnerLineHeight}); - } - } - - &.${String(hasNoFocus)} { - --plasma_private-combobox-focus-size: 0.0625rem; - - ${addFocus({ - hasTransition: false, - outlineOffset: 'calc(-1 * var(--plasma_private-combobox-focus-size))', - outlineRadius: `calc(var(${tokens.targetRadius}) + var(--plasma_private-combobox-focus-size))`, - outlineSize: 'var(--plasma_private-combobox-focus-size)', - customFocusRules: ` - &:focus-within { - box-shadow: none; - background-color: var(${tokens.targetBackgroundColorOpen}); - - &::before { - box-shadow: inset 0 0 0 var(--plasma_private-combobox-focus-size) var(${tokens.targetBorderColorOpen}); - } - } - `, - })} - } -`; - -export const StyledArrow = styled(IconChevronDown)` - transition: color 0.3s ease-in, transform 0.15s ease-in; - pointer-events: none; - user-select: none; - - position: absolute; - right: var(${tokens.targetArrowRight}); - color: var(${tokens.targetArrowColor}); -`; - -export const StyledText = styled.span` - ${applyEllipsis()}; - - position: relative; - pointer-events: none; - user-select: none; - - color: var(${tokens.targetColor}); -`; - -export const StyledChipsWrapper = styled.div` - border-radius: var(${tokens.chipBorderRadius}); - - overflow: scroll; - position: relative; - width: 100%; - height: var(${tokens.chipHeight}); - display: flex; - align-items: center; - - ::-webkit-scrollbar { - display: none; - } - - scrollbar-width: none; - - overscroll-behavior: contain; -`; - -export const StyledChips = styled.div` - overflow: visible; - display: flex; - gap: var(${tokens.chipGap}); - - position: absolute; - user-select: none; -`; - -export const StyledLabel = styled.label` - ${applyEllipsis()}; - - box-sizing: border-box; - position: absolute; - pointer-events: none; - display: inline-flex; - align-items: center; - - transition: all 0.1s ease-in-out; - transform-origin: top left; - - width: 100%; - height: auto; - - color: var(${tokens.targetLabelColor}); - - font-family: var(${tokens.targetFontFamily}); - font-size: var(${tokens.targetFontSize}); - font-style: var(${tokens.targetFontStyle}); - font-weight: var(${tokens.targetFontWeight}); - letter-spacing: var(${tokens.targetLetterSpacing}); - line-height: var(${tokens.targetLineHeight}); -`; diff --git a/packages/plasma-new-hope/src/components/Select/ui/SelectTarget/SelectTarget.tsx b/packages/plasma-new-hope/src/components/Select/ui/SelectTarget/SelectTarget.tsx deleted file mode 100644 index a8102eaa74..0000000000 --- a/packages/plasma-new-hope/src/components/Select/ui/SelectTarget/SelectTarget.tsx +++ /dev/null @@ -1,169 +0,0 @@ -import React, { forwardRef, useCallback, useRef } from 'react'; - -import { classes } from '../../Select.tokens'; -import { cx } from '../../../../utils'; -import { SelectChip } from '../SelectChip/SelectChip'; -import type { SelectPrimitiveValue } from '../../Select.types'; -import { Keys } from '../../hooks/useKeyNavigation'; - -import { - StyledArrow, - StyledChips, - StyledChipsWrapper, - StyledLabel, - StyledSelectTarget, - StyledText, -} from './SelectTarget.styles'; -import type { SelectTargetProps } from './SelectTarget.types'; - -const { - hasNoFocus, - hasChips, - innerLabelUp, - arrowInverse, - selectTarget, - selectTargetArrow, - selectTargeText, - selectTargetLabel, -} = classes; - -/** - * Элемент для выпадающего списка - */ -export const SelectTarget = forwardRef( - ( - { - values, - target = 'textField-like', - label, - opened, - readOnly, - disabled, - enumerationType, - size, - id, - chipsRefs, - onChange, - onKeyDown, - ...rest - }, - ref, - ) => { - const hasText = Boolean(values?.some(([value]) => value)); - - const hasLabel = label && size !== 'xs' && target === 'textField-like'; - const textContent = values?.map(([, text]) => text).join(', '); - const contentRef = useRef(null); - - const withArrowInverse = opened ? arrowInverse : undefined; - const withInnerLabelUp = hasLabel && hasText ? innerLabelUp : undefined; - const withHasChips = - hasText && enumerationType === 'chip' && target === 'textField-like' ? hasChips : undefined; - - const withNoFocus = target === 'textField-like' ? hasNoFocus : undefined; - - const isLabelVisible = !hasText || (hasLabel && enumerationType === 'comma'); - - const onChipClick = useCallback((event: React.MouseEvent) => { - event.stopPropagation(); - }, []); - - const onChipClear = useCallback( - (value: SelectPrimitiveValue, text: SelectPrimitiveValue, index: number) => { - const newValue = values - ?.filter(([itemValue, itemText]) => !(itemValue === value && itemText === text)) - .map(([itemValue]) => itemValue); - - chipsRefs?.current.splice(index, 1); - onChange?.(newValue); - }, - [values, onChange], - ); - - const onChipKeyDown = useCallback( - ( - value: SelectPrimitiveValue, - text: SelectPrimitiveValue, - index: number, - event: React.KeyboardEvent, - ) => { - const { code, shiftKey } = event; - - if (code === Keys.Tab || (code === Keys.Tab && shiftKey)) { - event.preventDefault(); - } - - if (code === Keys.Backspace) { - onChipClear(value, text, index); - } - }, - [onChipClear], - ); - - const onWheel = useCallback((event: React.WheelEvent) => { - const { deltaY } = event; - - if (contentRef.current) { - contentRef.current.scrollLeft += Math.round(deltaY); - } - }, []); - - const getRef = useCallback((element: HTMLButtonElement | null, index: number) => { - if (element && chipsRefs && chipsRefs.current) { - chipsRefs.current[index] = element; - } - }, []); - - // INFO: Нужно очищать на каждый ререндер компонента для актуализации состояния рефов - if (chipsRefs) { - chipsRefs.current = []; - } - - return ( - - {hasText && - (enumerationType === 'comma' || target === 'button-like' ? ( - {textContent} - ) : ( - - - {values?.map(([value, text], index) => ( - getRef(element, index)} - key={`${value}_${text}`} - disabled={disabled} - readOnly={readOnly} - value={value} - text={text} - onClear={(v, t) => onChipClear(v, t, index)} - onClick={onChipClick} - onKeyDown={onChipKeyDown} - /> - ))} - - - ))} - {isLabelVisible && ( - - {label} - - )} - - - ); - }, -); diff --git a/packages/plasma-new-hope/src/components/Select/ui/SelectTarget/SelectTarget.types.ts b/packages/plasma-new-hope/src/components/Select/ui/SelectTarget/SelectTarget.types.ts deleted file mode 100644 index 7ea2196183..0000000000 --- a/packages/plasma-new-hope/src/components/Select/ui/SelectTarget/SelectTarget.types.ts +++ /dev/null @@ -1,61 +0,0 @@ -import { KeyboardEvent } from 'react'; - -import type { EnumerationType, SelectPrimitiveValue, TargetType } from '../../Select.types'; - -export interface SelectTargetProps { - /** - * Номер порядка получения фокуса при переходе между элементами. - */ - tabIndex?: number; - /** - * Уникальный идентификатор элемента. - */ - id?: string; - /** - * Тип перечисления выбранных значений. - * Варианты: comma, chips - */ - enumerationType?: EnumerationType; - /** - * Дропдаун открыт или нет. - * @default - * false - */ - opened?: boolean; - /** - * Вид элемента, рядом с которым появляется список. - */ - target?: TargetType; - /** - * Текст лейбла. - */ - label?: string; - /** - * Компонент неактивен. - */ - disabled?: boolean; - /** - * Элемент формы не может изменяться пользователем. - */ - readOnly?: boolean; - /** - * Размер компонента Select. - */ - size?: string; - /** - * Выбранные значения. - */ - values?: Array>; - /** - * Ref для компонент чипов. - */ - chipsRefs?: React.MutableRefObject>; - /** - * Обработчик изменения выбранного значения. - */ - onChange?: (value?: Array) => void; - /** - * Обработчик нажатия клавиши на target. - */ - onKeyDown?: (event: KeyboardEvent) => void; -} diff --git a/packages/plasma-new-hope/src/components/Select/ui/Target/Target.tsx b/packages/plasma-new-hope/src/components/Select/ui/Target/Target.tsx new file mode 100644 index 0000000000..f524c37762 --- /dev/null +++ b/packages/plasma-new-hope/src/components/Select/ui/Target/Target.tsx @@ -0,0 +1,62 @@ +import React from 'react'; + +import type { TargetProps } from './Target.types'; +import { Button, Textfield } from './ui'; + +export const Target: React.FC = ({ + value, + multiselect, + isTargetAmount, + target, + opened, + valueToItemMap, + onChipClick, + label, + placeholder, + onKeyDown, + focusedChipIndex, + labelPlacement, + size, + contentLeft, + disabled, + renderValue, + focusedPath, + focusedToValueMap, +}) => { + return target === 'button-like' ? ( + } - arrow={} - offset={[0, 6]} - closeOnEsc - closeOnOverlayClick - > - { + return displayDouble ? ( + + ) : ( + - + ); + }; + + const calendarMap = { + Days: getCalendarComponent({ type: 'Days', eventList: eventList.current, disabledList: disabledDays }), + Months: getCalendarComponent({ type: 'Months', eventMonthList: eventMonthList.current }), + Quarters: getCalendarComponent({ type: 'Quarters', eventQuarterList: eventQuarterList.current }), + Years: getCalendarComponent({ type: 'Years', eventYearList: eventYearList.current }), + }; + + return ( + <> + Тип календаря + + {Object.keys(calendarMap).map((state, i) => ( + setCurrentState(state)} + size="m" + > + {state} + + ))} + +
{calendarMap[currentState]}
+ ); }; -export const WithPopover: StoryObj = { +export const Range: StoryObj = { args: { size: 'm', - min: new Date(2023, 9, 1), - max: new Date(2023, 11, 24), - isDouble: false, + min: defaultMinDate, + max: defaultMaxDate, includeEdgeDates: false, + displayDouble: false, }, - render: (args) => , + render: (args) => , }; 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 26672eace6..8853b3379a 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 @@ -54,6 +54,19 @@ export const config = { ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.75rem; + ${calendarBaseTokens.calendarQuarterItemWidth}: 11.75rem; + ${calendarBaseTokens.calendarQuarterItemHeight}: 10.5rem; + + ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); + ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); + ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: 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; @@ -115,6 +128,19 @@ export const config = { ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.625rem; + ${calendarBaseTokens.calendarQuarterItemWidth}: 10rem; + ${calendarBaseTokens.calendarQuarterItemHeight}: 8.5rem; + + ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); + ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); + ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: 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; @@ -176,6 +202,19 @@ export const config = { ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.5rem; + ${calendarBaseTokens.calendarQuarterItemWidth}: 8.25rem; + ${calendarBaseTokens.calendarQuarterItemHeight}: 7rem; + + ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); + ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); + ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: 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; @@ -237,6 +276,19 @@ export const config = { ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; + ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.375rem; + ${calendarBaseTokens.calendarQuarterItemWidth}: 8.25rem; + ${calendarBaseTokens.calendarQuarterItemHeight}: 6.563rem; + + ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); + ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); + ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: 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; 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 8c7b1ca7cb..0bc64f131b 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 @@ -55,6 +55,19 @@ export const config = { ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.75rem; + ${calendarDoubleTokens.calendarQuarterItemWidth}: 11.75rem; + ${calendarDoubleTokens.calendarQuarterItemHeight}: 10.5rem; + + ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); + ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); + ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: 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; @@ -116,6 +129,19 @@ export const config = { ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.625rem; + ${calendarDoubleTokens.calendarQuarterItemWidth}: 10rem; + ${calendarDoubleTokens.calendarQuarterItemHeight}: 8.5rem; + + ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); + ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); + ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: 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; @@ -178,6 +204,19 @@ export const config = { ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.5rem; + ${calendarDoubleTokens.calendarQuarterItemWidth}: 8.25rem; + ${calendarDoubleTokens.calendarQuarterItemHeight}: 7rem; + + ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); + ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); + ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: 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; @@ -239,6 +278,19 @@ export const config = { ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; + ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.375rem; + ${calendarDoubleTokens.calendarQuarterItemWidth}: 8.25rem; + ${calendarDoubleTokens.calendarQuarterItemHeight}: 6.563rem; + + ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); + ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); + ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: 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; diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Chip/Chip.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Chip/Chip.stories.tsx index a25b510ca6..2b4f200a4d 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Chip/Chip.stories.tsx +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Chip/Chip.stories.tsx @@ -42,6 +42,7 @@ export const Default: Story = { text: 'Hello', view: 'default', size: 'm', + hasClear: true, disabled: false, focused: true, pilled: false, 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 index 4c525c7015..8c23d8c2be 100644 --- 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 @@ -139,6 +139,19 @@ export const config = { ${tokens.calendarMonthFontWeight}: var(--plasma-typo-body-l-font-weight); ${tokens.calendarMonthSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem; + ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; + ${tokens.calendarQuarterItemWidth}: 11.75rem; + ${tokens.calendarQuarterItemHeight}: 10.5rem; + + ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarDaysPadding}: 0.5rem 1rem 1.125rem 1rem; ${tokens.calendarDayItemBorderRadius}: 0.75rem; ${tokens.calendarDayItemWidth}: 3.5rem; @@ -234,6 +247,19 @@ export const config = { ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem; + ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; + ${tokens.calendarQuarterItemWidth}: 10rem; + ${tokens.calendarQuarterItemHeight}: 8.5rem; + + ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthsPadding}: 0.5rem 1rem 1.125rem 1rem; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; ${tokens.calendarMonthItemWidth}: 6.688rem; @@ -342,6 +368,19 @@ export const config = { ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem; + ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; + ${tokens.calendarQuarterItemWidth}: 8.25rem; + ${tokens.calendarQuarterItemHeight}: 7rem; + + ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthsPadding}: 0.5rem 1rem 0.875rem 1rem; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; ${tokens.calendarMonthItemWidth}: 5.5rem; @@ -450,6 +489,19 @@ export const config = { ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; + ${tokens.calendarQuarterItemBorderRadius}: 0.375rem; + ${tokens.calendarQuarterItemWidth}: 8.25rem; + ${tokens.calendarQuarterItemHeight}: 6.563rem; + + ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.calendarQuarterSelectedFontWeight}: 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; diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Dropdown/Dropdown.config.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Dropdown/Dropdown.config.ts index 7f043c327c..00f264beeb 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Dropdown/Dropdown.config.ts +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Dropdown/Dropdown.config.ts @@ -95,7 +95,7 @@ export const config = { ${dropdownTokens.disabledOpacity}: 0.4; ${dropdownTokens.focusColor}: var(--surface-accent); ${dropdownTokens.background}: var(--surface-solid-card); - ${dropdownTokens.boxShadow}: var(--shadow-down-soft-s); + ${dropdownTokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${dropdownTokens.disclosureIconColor}: var(--text-secondary); ${dropdownTokens.itemBackground}: var(--plasma-colors-transparent); ${dropdownTokens.itemBackgroundHover}: var(--surface-transparent-secondary); diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/EmptyState/EmptyState.config.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/EmptyState/EmptyState.config.ts new file mode 100644 index 0000000000..3887ba404d --- /dev/null +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/EmptyState/EmptyState.config.ts @@ -0,0 +1,69 @@ +import { css } from '@linaria/core'; + +import { emptyStateTokens as tokens } from '../../../../components/EmptyState'; + +export const config = { + defaults: { + size: 'l', + }, + variations: { + size: { + l: css` + ${tokens.borderRadius}: 0.875rem; + ${tokens.padding}: 2rem 1rem 1rem 1rem; + ${tokens.iconMargin}: 0 0 0.5rem 0; + ${tokens.descriptionMargin}: 0 0 1rem 0; + ${tokens.buttonMargin}: -1rem 0 0 0; + ${tokens.buttonHeight}: 3.5rem; + ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + `, + m: css` + ${tokens.borderRadius}: 0.75rem; + ${tokens.padding}: 1.625rem 1rem 0.875rem 1rem; + ${tokens.iconMargin}: 0 0 0.375rem 0; + ${tokens.descriptionMargin}: 0 0 0.875rem 0; + ${tokens.buttonMargin}: -0.875rem 0 0 0; + ${tokens.buttonHeight}: 3rem; + ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + `, + s: css` + ${tokens.borderRadius}: 0.625rem; + ${tokens.padding}: 1.375rem 0.875rem 0.625rem 0.875rem; + ${tokens.iconMargin}: 0 0 0.25rem 0; + ${tokens.descriptionMargin}: 0 0 0.625rem 0; + ${tokens.buttonMargin}: -0.625rem 0 0 0; + ${tokens.buttonHeight}: 2.5rem; + ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + `, + xs: css` + ${tokens.borderRadius}: 0.5rem; + ${tokens.padding}: 1rem 0.625rem 0.5rem 0.625rem; + ${tokens.iconMargin}: 0 0 0.25rem 0; + ${tokens.descriptionMargin}: 0 0 0.5rem 0; + ${tokens.buttonMargin}: -0.5rem 0 0 0; + ${tokens.buttonHeight}: 2rem; + ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height); + `, + }, + }, +}; diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/EmptyState/EmptyState.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_b2c/components/EmptyState/EmptyState.stories.tsx new file mode 100644 index 0000000000..8082ac3b3c --- /dev/null +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/EmptyState/EmptyState.stories.tsx @@ -0,0 +1,44 @@ +import type { ComponentProps } from 'react'; +import type { StoryObj, Meta } from '@storybook/react'; +import * as React from 'react'; +import { IconPlaceholder } from '@salutejs/plasma-sb-utils'; + +import { WithTheme } from '../../../_helpers'; + +import { EmptyState } from './EmptyState'; + +const sizes = ['l', 'm', 's', 'xs']; + +type StoryProps = ComponentProps & { + enableIcon: boolean; +}; + +const meta: Meta = { + title: 'plasma_b2c/EmptyState', + decorators: [WithTheme], + component: EmptyState, + args: { + description: 'Описание', + buttonText: 'Кнопка', + size: 'l', + enableIcon: true, + }, + argTypes: { + size: { + options: sizes, + control: { + type: 'inline-radio', + }, + }, + }, +}; + +export default meta; + +const DefaultStory = (args: StoryProps) => { + return : undefined} />; +}; + +export const Default: StoryObj = { + render: (args) => , +}; diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/EmptyState/EmptyState.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/EmptyState/EmptyState.ts new file mode 100644 index 0000000000..7ecc29466b --- /dev/null +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/EmptyState/EmptyState.ts @@ -0,0 +1,8 @@ +import { emptyStateConfig } from '../../../../components/EmptyState'; +import { component, mergeConfig } from '../../../../engines'; + +import { config } from './EmptyState.config'; + +export const mergedConfig = mergeConfig(emptyStateConfig, config); + +export const EmptyState = component(mergedConfig); diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Overlay/Overlay.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Overlay/Overlay.stories.tsx index 6c83cae7f7..623d5701db 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Overlay/Overlay.stories.tsx +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Overlay/Overlay.stories.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { styled } from '@linaria/react'; +import styled from 'styled-components'; import type { ComponentProps } from 'react'; import type { StoryObj, Meta } from '@storybook/react'; import { action } from '@storybook/addon-actions'; diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Pagination/Pagination.config.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Pagination/Pagination.config.ts index d90133eebd..b0c2537baa 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Pagination/Pagination.config.ts +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Pagination/Pagination.config.ts @@ -10,21 +10,44 @@ export const config = { }, variations: { view: { + default: css` + ${paginationTokens.buttonColor}: var(--inverse-text-primary); + ${paginationTokens.buttonColorHover}: var(--inverse-text-primary-hover); + ${paginationTokens.buttonColorActive}: var(--inverse-text-primary-active); + ${paginationTokens.buttonHoverColor}: var(--inverse-text-primary); + ${paginationTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${paginationTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); + ${paginationTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); + ${paginationTokens.buttonActiveColor}: var(--inverse-text-primary); + ${paginationTokens.buttonArrowColor}: var(--inverse-text-secondary); + ${paginationTokens.buttonArrowColorHover}: var(--inverse-text-secondary-hover); + ${paginationTokens.buttonArrowColorActive}: var(--inverse-text-secondary-hover); + + ${paginationTokens.buttonDisabledOpacity}: 0.4; + + ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); + ${paginationTokens.inputBorderColor}:transparent; + ${paginationTokens.selectBackgroundColor}: color-mix( + in srgb, + var(--inverse-text-primary), + var(--surface-solid-default) 85% + ); + + ${paginationTokens.paginationColor}: var(--text-primary); + ${paginationTokens.buttonFocusColor}: var(--surface-accent); + `, secondary: css` ${paginationTokens.buttonColor}: var(--text-primary); + ${paginationTokens.buttonColorHover}: var(--text-primary-hover); + ${paginationTokens.buttonColorActive}: var(--text-primary-active); ${paginationTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${paginationTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); + ${paginationTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); ${paginationTokens.buttonHoverColor}: var(--text-primary); - ${paginationTokens.buttonHoverBackgroundColor}: color-mix( - in srgb, - var(--inverse-text-primary), - var(--surface-transparent-secondary) 85% - ); ${paginationTokens.buttonActiveColor}: var(--text-primary); - ${paginationTokens.buttonActiveBackgroundColor}: color-mix( - in srgb, - var(--inverse-text-primary), - var(--surface-transparent-secondary) 80% - ); + ${paginationTokens.buttonArrowColor}: var(--text-secondary); + ${paginationTokens.buttonArrowColorHover}: var(--text-secondary-hover); + ${paginationTokens.buttonArrowColorActive}: var(--text-secondary-hover); ${paginationTokens.buttonDisabledOpacity}: 0.4; @@ -37,11 +60,16 @@ export const config = { `, clear: css` ${paginationTokens.buttonColor}: var(--text-primary); + ${paginationTokens.buttonColorHover}: var(--text-primary-hover); + ${paginationTokens.buttonColorActive}: var(--text-primary-active); ${paginationTokens.buttonBackgroundColor}: var(--surface-clear); + ${paginationTokens.buttonBackgroundColorHover}: var(--surface-clear); + ${paginationTokens.buttonBackgroundColorActive}: var(--surface-clear); ${paginationTokens.buttonHoverColor}: var(--text-primary); - ${paginationTokens.buttonHoverBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 95%); ${paginationTokens.buttonActiveColor}: var(--text-primary); - ${paginationTokens.buttonActiveBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 90%); + ${paginationTokens.buttonArrowColor}: var(--text-secondary); + ${paginationTokens.buttonArrowColorHover}: var(--text-secondary-hover); + ${paginationTokens.buttonArrowColorActive}: var(--text-secondary-hover); ${paginationTokens.buttonDisabledOpacity}: 0.4; @@ -49,35 +77,6 @@ export const config = { ${paginationTokens.selectBackgroundColor}: var(--surface-solid-card); ${paginationTokens.inputBorderColor}: transparent; - ${paginationTokens.paginationColor}: var(--text-primary); - ${paginationTokens.buttonFocusColor}: var(--surface-accent); - `, - default: css` - ${paginationTokens.buttonColor}: var(--inverse-text-primary); - ${paginationTokens.buttonBackgroundColor}: var(--surface-solid-default); - ${paginationTokens.buttonHoverColor}: var(--inverse-text-primary); - ${paginationTokens.buttonHoverBackgroundColor}: color-mix( - in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% - ); - ${paginationTokens.buttonActiveColor}: var(--inverse-text-primary); - ${paginationTokens.buttonActiveBackgroundColor}: color-mix( - in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 80% - ); - - ${paginationTokens.buttonDisabledOpacity}: 0.4; - - ${paginationTokens.inputBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.inputBorderColor}:transparent; - ${paginationTokens.selectBackgroundColor}: color-mix( - in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% - ); - ${paginationTokens.paginationColor}: var(--text-primary); ${paginationTokens.buttonFocusColor}: var(--surface-accent); `, @@ -140,28 +139,21 @@ export const config = { ${paginationTokens.buttonRadius}: 0.875rem; ${paginationTokens.paginationIconSize}: 1.2rem; ${paginationTokens.paginationIconDoubleSize}: 1.45rem; + ${paginationTokens.buttonArrowMargin}: 0 -0.125rem 0 0.5rem; - ${paginationTokens.selectWidth}: 100%; ${paginationTokens.selectHeight}: auto; ${paginationTokens.selectPaddingTop}: 0.125rem; ${paginationTokens.selectPaddingRight}: 0.125rem; ${paginationTokens.selectPaddingBottom}: 0.125rem; ${paginationTokens.selectPaddingLeft}: 0.125rem; - ${paginationTokens.selectItemWidth}: auto; ${paginationTokens.selectItemHeight}: 1.5rem; - ${paginationTokens.selectItemPaddingTop}: 1rem; - ${paginationTokens.selectItemPaddingRight}: 1rem; - ${paginationTokens.selectItemPaddingBottom}: 1rem; - ${paginationTokens.selectItemPaddingLeft}: 1rem; + ${paginationTokens.selectItemPadding}: 1rem 1rem 1rem 1rem; ${paginationTokens.selectItemContentLeftWidth}: 1.875rem; ${paginationTokens.selectItemBackground}: transparent; ${paginationTokens.selectTargetArrowRight}: 1rem; - ${paginationTokens.selectTargetWidth}: 100%; - ${paginationTokens.selectTargetPadding}: 0 3.5rem 0 1.5rem; - ${paginationTokens.selectTargetPaddingHasChips}: 0 3.625rem 0 0.375rem; - ${paginationTokens.selectTargetPaddingWithInput}: 0 3.625rem 0 0.625rem; + ${paginationTokens.selectTargetPadding}: 1.5rem 0 1.5rem; ${paginationTokens.selectTargetInnerTop}: 0.5rem; ${paginationTokens.selectTargetLabelInnerTop}: 0.375rem; @@ -186,28 +178,21 @@ export const config = { ${paginationTokens.buttonRadius}: 0.75rem; ${paginationTokens.paginationIconSize}: 1.05rem; ${paginationTokens.paginationIconDoubleSize}: 1.3rem; + ${paginationTokens.buttonArrowMargin}: 0 -0.125rem 0 0.375rem; - ${paginationTokens.selectWidth}: 100%; ${paginationTokens.selectHeight}: auto; ${paginationTokens.selectPaddingTop}: 0.125rem; ${paginationTokens.selectPaddingRight}: 0.125rem; ${paginationTokens.selectPaddingBottom}: 0.125rem; ${paginationTokens.selectPaddingLeft}: 0.125rem; - ${paginationTokens.selectItemWidth}: auto; ${paginationTokens.selectItemHeight}: 1.5rem; - ${paginationTokens.selectItemPaddingTop}: 0.75rem; - ${paginationTokens.selectItemPaddingRight}: 0.75rem; - ${paginationTokens.selectItemPaddingBottom}: 0.75rem; - ${paginationTokens.selectItemPaddingLeft}: 0.75rem; + ${paginationTokens.selectItemPadding}: 0.75rem 0.75rem 0.75rem 0.75rem; ${paginationTokens.selectItemContentLeftWidth}: 1.75rem; ${paginationTokens.selectItemBackground}: transparent; ${paginationTokens.selectTargetArrowRight}: 0.875rem; - ${paginationTokens.selectTargetWidth}: 100%; - ${paginationTokens.selectTargetPadding}: 0 3.25rem 0 1.25rem; - ${paginationTokens.selectTargetPaddingHasChips}: 0 3.375rem 0 0.375rem; - ${paginationTokens.selectTargetPaddingWithInput}: 0 3.375rem 0 0.625rem; + ${paginationTokens.selectTargetPadding}: 1.25rem 0 1.25rem; ${paginationTokens.selectTargetInnerTop}: 0.5rem; ${paginationTokens.selectTargetLabelInnerTop}: 0.375rem; @@ -232,28 +217,21 @@ export const config = { ${paginationTokens.buttonRadius}: 0.625rem; ${paginationTokens.paginationIconSize}: 0.9rem; ${paginationTokens.paginationIconDoubleSize}: 1.15rem; + ${paginationTokens.buttonArrowMargin}: 0 -0.125rem 0 0.25rem; - ${paginationTokens.selectWidth}: 100%; ${paginationTokens.selectHeight}: auto; ${paginationTokens.selectPaddingTop}: 0.125rem; ${paginationTokens.selectPaddingRight}: 0.125rem; ${paginationTokens.selectPaddingBottom}: 0.125rem; ${paginationTokens.selectPaddingLeft}: 0.125rem; - ${paginationTokens.selectItemWidth}: auto; ${paginationTokens.selectItemHeight}: 1.5rem; - ${paginationTokens.selectItemPaddingTop}: 0.5rem; - ${paginationTokens.selectItemPaddingRight}: 0.75rem; - ${paginationTokens.selectItemPaddingBottom}: 0.5rem; - ${paginationTokens.selectItemPaddingLeft}: 0.75rem; + ${paginationTokens.selectItemPadding}: 0.5rem 0.75rem 0.5rem 0.75rem; ${paginationTokens.selectItemContentLeftWidth}: 1.75rem; ${paginationTokens.selectItemBackground}: transparent; ${paginationTokens.selectTargetArrowRight}: 0.75rem; - ${paginationTokens.selectTargetWidth}: 100%; - ${paginationTokens.selectTargetPadding}: 0 3rem 0 1rem; - ${paginationTokens.selectTargetPaddingHasChips}: 0 3.125rem 0 0.375rem; - ${paginationTokens.selectTargetPaddingWithInput}: 0 3.125rem 0 0.625rem; + ${paginationTokens.selectTargetPadding}: 1rem 0 1rem; ${paginationTokens.selectTargetInnerTop}: 0.5rem; ${paginationTokens.selectTargetLabelInnerTop}: 0.375rem; @@ -278,28 +256,21 @@ export const config = { ${paginationTokens.buttonWidthShorter}: 1.5rem; ${paginationTokens.paginationIconSize}: 0.75rem; ${paginationTokens.paginationIconDoubleSize}: 1rem; + ${paginationTokens.buttonArrowMargin}: 0 -0.125rem 0 0.25rem; - ${paginationTokens.selectWidth}: 100%; ${paginationTokens.selectHeight}: auto; ${paginationTokens.selectPaddingTop}: 0.125rem; ${paginationTokens.selectPaddingRight}: 0.125rem; ${paginationTokens.selectPaddingBottom}: 0.125rem; ${paginationTokens.selectPaddingLeft}: 0.125rem; - ${paginationTokens.selectItemWidth}: auto; ${paginationTokens.selectItemHeight}: 1rem; - ${paginationTokens.selectItemPaddingTop}: 0.5rem; - ${paginationTokens.selectItemPaddingRight}: 0.5rem; - ${paginationTokens.selectItemPaddingBottom}: 0.5rem; - ${paginationTokens.selectItemPaddingLeft}: 0.5rem; + ${paginationTokens.selectItemPadding}: 0.5rem 0.5rem 0.5rem 0.5rem; ${paginationTokens.selectItemContentLeftWidth}: 1.25rem; ${paginationTokens.selectItemBackground}: transparent; ${paginationTokens.selectTargetArrowRight}: 0.5rem; - ${paginationTokens.selectTargetWidth}: 100%; - ${paginationTokens.selectTargetPadding}: 0 2.5rem 0 0.75rem; - ${paginationTokens.selectTargetPaddingHasChips}: 0 2.625rem 0 0.375rem; - ${paginationTokens.selectTargetPaddingWithInput}: 0 2.625rem 0 0.625rem; + ${paginationTokens.selectTargetPadding}: 0.75rem 0 0.75rem; ${paginationTokens.selectTargetInnerTop}: 0.5rem; ${paginationTokens.selectTargetLabelInnerTop}: 0.375rem; diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Pagination/Pagination.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Pagination/Pagination.stories.tsx index c094ced526..80adec17a0 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Pagination/Pagination.stories.tsx +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Pagination/Pagination.stories.tsx @@ -64,6 +64,7 @@ export const Default: Story = { hasPerPage: true, pilled: false, square: true, + listWidth: '5rem', }, }; diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Portal/Portal.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Portal/Portal.stories.tsx index 27496a1081..102477c981 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Portal/Portal.stories.tsx +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Portal/Portal.stories.tsx @@ -6,8 +6,7 @@ import { styled } from '@linaria/react'; import { Button } from '../Button/Button'; import { WithTheme } from '../../../_helpers'; import { Body } from '../../../typograpy/components/Body/Body'; - -import { Portal } from './Portal'; +import { Portal } from '../../../../components/Portal'; const meta: Meta = { title: 'plasma_b2c/Portal', diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Portal/Portal.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Portal/Portal.ts deleted file mode 100644 index a0beda4ca0..0000000000 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Portal/Portal.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { portalConfig } from '../../../../components/Portal'; -import { component, mergeConfig } from '../../../../engines'; - -const mergedConfig = mergeConfig(portalConfig); - -export const Portal = component(mergedConfig); diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Price/Price.config.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Price/Price.config.ts new file mode 100644 index 0000000000..5351ba7197 --- /dev/null +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Price/Price.config.ts @@ -0,0 +1,8 @@ +export const config = { + defaults: { + view: 'default', + }, + variations: { + view: {}, + }, +}; diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Price/Price.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Price/Price.stories.tsx new file mode 100644 index 0000000000..6ffa8b03d0 --- /dev/null +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Price/Price.stories.tsx @@ -0,0 +1,38 @@ +import React, { ComponentProps } from 'react'; +import type { StoryObj, Meta } from '@storybook/react'; +import { disableProps } from '@salutejs/plasma-sb-utils'; + +import { WithTheme } from '../../../_helpers'; + +import { Price } from './Price'; + +const currencies = ['rub', 'usd', 'eur', 'inr']; + +const meta: Meta = { + title: 'plasma_b2c/Price', + decorators: [WithTheme], + argTypes: { + currency: { + options: currencies, + control: { + type: 'inline-radio', + }, + }, + ...disableProps(['value', 'theme', 'as', 'forwardedAs']), + }, +}; + +export default meta; + +type StoryPriceProps = ComponentProps & { priceLabel: number }; + +export const Default: StoryObj = { + args: { + locale: 'ru', + currency: 'rub', + stroked: false, + minimumFractionDigits: 0, + priceLabel: 12345.67, + }, + render: ({ priceLabel, ...rest }) => {priceLabel}, +}; diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Price/Price.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Price/Price.ts new file mode 100644 index 0000000000..71457f6f97 --- /dev/null +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Price/Price.ts @@ -0,0 +1,10 @@ +import { priceConfig } from '../../../../components/Price'; +import { component, mergeConfig } from '../../../../engines'; + +import { config } from './Price.config'; + +export { priceClasses } from '../../../../components/Price'; + +const mergedConfig = mergeConfig(priceConfig, config); + +export const Price = component(mergedConfig); diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Select/Select.config.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Select/Select.config.ts index 0d3b75cdff..2f8bad8a91 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Select/Select.config.ts +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Select/Select.config.ts @@ -1,339 +1,390 @@ import { css } from '@linaria/core'; -import { selectTokens } from '../../../../components/Select'; +import { selectTokens } from '../../../..'; export const config = { defaults: { - target: 'button-like', view: 'default', + chipView: 'default', size: 'm', }, variations: { - target: { - 'textField-like': css` - ${selectTokens.targetColor}: var(--text-primary); - ${selectTokens.targetLabelColor}: var(--text-secondary); - ${selectTokens.targetArrowColor}: var(--text-secondary); - ${selectTokens.targetBackgroundColor}: var(--surface-transparent-primary); - ${selectTokens.targetBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${selectTokens.targetBackgroundColorActive}: var(--surface-transparent-primary-active); - ${selectTokens.targetBackgroundColorOpen}: var(--surface-transparent-secondary); - `, - 'button-like': css` - ${selectTokens.targetColor}: var(--text-primary); - ${selectTokens.targetLabelColor}: var(--text-primary); - ${selectTokens.targetArrowColor}: var(--text-secondary); - ${selectTokens.targetBackgroundColor}: var(--surface-transparent-secondary); - ${selectTokens.targetBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${selectTokens.targetBackgroundColorActive}: var(--surface-transparent-secondary-active); - ${selectTokens.targetBackgroundColorOpen}: var(--surface-transparent-secondary); - ${selectTokens.targetFontWeight}: 600 !important; /* TODO: Переделать когда появится возможность пересечения свойств */ - `, - }, size: { xs: css` - ${selectTokens.width}: 100%; - ${selectTokens.height}: auto; + ${selectTokens.padding}: 0.125rem; ${selectTokens.borderRadius}: 0.5rem; - ${selectTokens.paddingTop}: 0.125rem; - ${selectTokens.paddingRight}: 0.125rem; - ${selectTokens.paddingBottom}: 0.125rem; - ${selectTokens.paddingLeft}: 0.125rem; - - ${selectTokens.dividerColor}: var(--surface-transparent-tertiary); - ${selectTokens.dividerHeight}: 0.063rem; - ${selectTokens.dividerMarginTop}: 0; - ${selectTokens.dividerMarginRight}: 0.5rem; - ${selectTokens.dividerMarginBottom}: 0; - ${selectTokens.dividerMarginLeft}: 0.375rem; - - ${selectTokens.itemWidth}: auto; + ${selectTokens.focusOffset}: 0.125rem; + ${selectTokens.itemHeight}: 1rem; - ${selectTokens.itemPaddingTop}: 0.5rem; - ${selectTokens.itemPaddingRight}: 0.5rem; - ${selectTokens.itemPaddingBottom}: 0.5rem; - ${selectTokens.itemPaddingLeft}: 0.375rem; + ${selectTokens.itemPadding}: 0.5rem 0.5rem 0.5rem 0.375rem; + ${selectTokens.itemPaddingTight}: 0.25rem 0.5rem 0.25rem 0.375rem; ${selectTokens.itemBorderRadius}: 0.375rem; - ${selectTokens.itemContentLeftWidth}: 1.25rem; - ${selectTokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${selectTokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${selectTokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${selectTokens.itemFontWeightBold}: var(--plasma-typo-body-xs-font-weight); - ${selectTokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${selectTokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${selectTokens.itemIconSize}: 1rem; + ${selectTokens.itemIconSizeTight}: 1rem; + ${selectTokens.itemIconMargin}: 0 0.25rem 0 0; + + ${selectTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); + ${selectTokens.fontSize}: var(--plasma-typo-body-xs-font-size); + ${selectTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); + ${selectTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); + ${selectTokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${selectTokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${selectTokens.checkboxTriggerSize}: 0.875rem; + ${selectTokens.checkboxTriggerSizeTight}: 0.875rem; + ${selectTokens.checkboxTriggerBorderRadius}: 0.25rem; + ${selectTokens.checkboxTriggerBorderRadiusTight}: 0.25rem; + ${selectTokens.checkboxFillColor}: var(--text-accent); + ${selectTokens.checkboxIconColor}: var(--on-dark-text-primary); + ${selectTokens.checkboxTriggerBorderColor}: var(--text-secondary); + + ${selectTokens.indicatorSize}: 0.375rem; ${selectTokens.chipGap}: 0.25rem; ${selectTokens.chipBorderRadius}: 0.125rem; - ${selectTokens.chipWidth}: auto; ${selectTokens.chipHeight}: 1.25rem; ${selectTokens.chipPaddingRight}: 0.375rem; ${selectTokens.chipPaddingLeft}: 0.625rem; ${selectTokens.chipClearContentMarginLeft}: 0.25rem; ${selectTokens.chipClearContentMarginRight}: 0rem; ${selectTokens.chipCloseIconSize}: 0.75rem; - ${selectTokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${selectTokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${selectTokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${selectTokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${selectTokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${selectTokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${selectTokens.targetArrowRight}: 0.5rem; + + ${selectTokens.targetButtonArrowMargin}: 0 -0.125rem 0 0.25rem; + ${selectTokens.targetTextfieldArrowMargin}: 0 0 0 0.375rem; ${selectTokens.targetHeight}: 2rem; - ${selectTokens.targetWidth}: 100%; - ${selectTokens.targetRadius}: 0.5rem; - ${selectTokens.targetPadding}: 0 2.5rem 0 0.75rem; - ${selectTokens.targetPaddingHasChips}: 0 2.625rem 0 0.375rem; - ${selectTokens.targetPaddingWithInput}: 0 2.625rem 0 0.625rem; - ${selectTokens.targetInnerTop}: 0.5rem; - ${selectTokens.targetLabelInnerTop}: 0.375rem; - ${selectTokens.targetFontFamily}: var(--plasma-typo-body-xs-font-family); - ${selectTokens.targetFontSize}: var(--plasma-typo-body-xs-font-size); - ${selectTokens.targetFontStyle}: var(--plasma-typo-body-xs-font-style); - ${selectTokens.targetFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${selectTokens.targetLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${selectTokens.targetLineHeight}: var(--plasma-typo-body-xs-line-height); - ${selectTokens.targetLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${selectTokens.targetLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${selectTokens.targetLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${selectTokens.targetLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${selectTokens.targetLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${selectTokens.targetLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${selectTokens.targetButtonPadding}: 0.75rem 0 0.75rem; + ${selectTokens.targetTextfieldPadding}: 0.5rem 0 0.625rem; + ${selectTokens.targetTextfieldChipPadding}: 0.5rem 0 0.25rem; + + ${selectTokens.labelOffset}: 0.375rem; + + ${selectTokens.innerLabelGap}: 0; + + ${selectTokens.helperTextOffset}: 0.25rem; + + ${selectTokens.spinnerSize}: 1rem; + ${selectTokens.spinnerSizeTight}: 1rem; `, s: css` - ${selectTokens.width}: 100%; - ${selectTokens.height}: auto; + ${selectTokens.padding}: 0.125rem; ${selectTokens.borderRadius}: 0.625rem; - ${selectTokens.paddingTop}: 0.125rem; - ${selectTokens.paddingRight}: 0.125rem; - ${selectTokens.paddingBottom}: 0.125rem; - ${selectTokens.paddingLeft}: 0.125rem; - - ${selectTokens.dividerColor}: var(--surface-transparent-tertiary); - ${selectTokens.dividerHeight}: 0.063rem; - ${selectTokens.dividerMarginTop}: 0; - ${selectTokens.dividerMarginRight}: 0.75rem; - ${selectTokens.dividerMarginBottom}: 0; - ${selectTokens.dividerMarginLeft}: 0.75rem; - - ${selectTokens.itemWidth}: auto; + ${selectTokens.focusOffset}: 0.125rem; + ${selectTokens.itemHeight}: 1.5rem; - ${selectTokens.itemPaddingTop}: 0.5rem; - ${selectTokens.itemPaddingRight}: 0.75rem; - ${selectTokens.itemPaddingBottom}: 0.5rem; - ${selectTokens.itemPaddingLeft}: 0.75rem; + ${selectTokens.itemPadding}: 0.5rem 0.75rem 0.5rem 0.675rem; + ${selectTokens.itemPaddingTight}: 0.25rem 0.75rem 0.25rem 0.675rem; ${selectTokens.itemBorderRadius}: 0.5rem; - ${selectTokens.itemContentLeftWidth}: 1.75rem; - ${selectTokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${selectTokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${selectTokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${selectTokens.itemFontWeightBold}: var(--plasma-typo-body-s-font-weight); - ${selectTokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${selectTokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${selectTokens.itemIconSize}: 1.5rem; + ${selectTokens.itemIconSizeTight}: 1rem; + ${selectTokens.itemIconMargin}: 0 0.375rem 0 0; + + ${selectTokens.fontFamily}: var(--plasma-typo-body-s-font-family); + ${selectTokens.fontSize}: var(--plasma-typo-body-s-font-size); + ${selectTokens.fontStyle}: var(--plasma-typo-body-s-font-style); + ${selectTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); + ${selectTokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${selectTokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + + ${selectTokens.checkboxTriggerSize}: 1.25rem; + ${selectTokens.checkboxTriggerSizeTight}: 0.875rem; + ${selectTokens.checkboxTriggerBorderRadius}: 0.375rem; + ${selectTokens.checkboxTriggerBorderRadiusTight}: 0.25rem; + ${selectTokens.checkboxFillColor}: var(--text-accent); + ${selectTokens.checkboxIconColor}: var(--on-dark-text-primary); + ${selectTokens.checkboxTriggerBorderColor}: var(--text-secondary); + + ${selectTokens.indicatorSize}: 0.375rem; ${selectTokens.chipGap}: 0.25rem; ${selectTokens.chipBorderRadius}: 0.25rem; - ${selectTokens.chipWidth}: auto; ${selectTokens.chipHeight}: 1.75rem; ${selectTokens.chipPaddingRight}: 0.5rem; ${selectTokens.chipPaddingLeft}: 0.75rem; ${selectTokens.chipClearContentMarginLeft}: 0.375rem; ${selectTokens.chipClearContentMarginRight}: 0rem; ${selectTokens.chipCloseIconSize}: 0.75rem; - ${selectTokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${selectTokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${selectTokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${selectTokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${selectTokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${selectTokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); - - ${selectTokens.targetArrowRight}: 0.75rem; + + ${selectTokens.targetButtonArrowMargin}: 0 -0.125rem 0 0.25rem; + ${selectTokens.targetTextfieldArrowMargin}: 0 0 0 0.375rem; ${selectTokens.targetHeight}: 2.5rem; - ${selectTokens.targetWidth}: 100%; - ${selectTokens.targetRadius}: 0.625rem; - ${selectTokens.targetPadding}: 0 3rem 0 1rem; - ${selectTokens.targetPaddingHasChips}: 0 3.125rem 0 0.375rem; - ${selectTokens.targetPaddingWithInput}: 0 3.125rem 0 0.625rem; - ${selectTokens.targetInnerTop}: 0.5rem; - ${selectTokens.targetLabelInnerTop}: 0.375rem; - ${selectTokens.targetFontFamily}: var(--plasma-typo-body-s-font-family); - ${selectTokens.targetFontSize}: var(--plasma-typo-body-s-font-size); - ${selectTokens.targetFontStyle}: var(--plasma-typo-body-s-font-style); - ${selectTokens.targetFontWeight}: var(--plasma-typo-body-s-font-weight); - ${selectTokens.targetLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${selectTokens.targetLineHeight}: var(--plasma-typo-body-s-line-height); - ${selectTokens.targetLabelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${selectTokens.targetLabelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${selectTokens.targetLabelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${selectTokens.targetLabelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${selectTokens.targetLabelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${selectTokens.targetLabelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${selectTokens.targetButtonPadding}: 1rem 0 1rem; + ${selectTokens.targetTextfieldPadding}: 0.75rem 0 0.875rem; + ${selectTokens.targetTextfieldChipPadding}: 0.75rem 0 0.25rem; + + ${selectTokens.labelOffset}: 0.5rem; + + ${selectTokens.innerLabelGap}: 0; + + ${selectTokens.helperTextOffset}: 0.25rem; + + ${selectTokens.spinnerSize}: 1.5rem; + ${selectTokens.spinnerSizeTight}: 1rem; `, m: css` - ${selectTokens.width}: 100%; - ${selectTokens.height}: auto; + ${selectTokens.padding}: 0.125rem; ${selectTokens.borderRadius}: 0.75rem; - ${selectTokens.paddingTop}: 0.125rem; - ${selectTokens.paddingRight}: 0.125rem; - ${selectTokens.paddingBottom}: 0.125rem; - ${selectTokens.paddingLeft}: 0.125rem; - - ${selectTokens.dividerColor}: var(--surface-transparent-tertiary); - ${selectTokens.dividerHeight}: 0.063rem; - ${selectTokens.dividerMarginTop}: 0; - ${selectTokens.dividerMarginRight}: 0.875rem; - ${selectTokens.dividerMarginBottom}: 0; - ${selectTokens.dividerMarginLeft}: 0.875rem; - - ${selectTokens.itemWidth}: auto; + ${selectTokens.focusOffset}: 0.125rem; + ${selectTokens.itemHeight}: 1.5rem; - ${selectTokens.itemPaddingTop}: 0.75rem; - ${selectTokens.itemPaddingRight}: 0.875rem; - ${selectTokens.itemPaddingBottom}: 0.75rem; - ${selectTokens.itemPaddingLeft}: 0.875rem; + ${selectTokens.itemPadding}: 0.75rem 0.75rem 0.75rem 0.75rem; + ${selectTokens.itemPaddingTight}: 0.5rem 0.75rem 0.5rem 0.75rem; ${selectTokens.itemBorderRadius}: 0.625rem; - ${selectTokens.itemContentLeftWidth}: 1.75rem; - ${selectTokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${selectTokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${selectTokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${selectTokens.itemFontWeightBold}: var(--plasma-typo-body-m-font-weight); - ${selectTokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${selectTokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${selectTokens.itemIconMargin}: 0 0.375rem 0 0; + ${selectTokens.itemIconSize}: 1.5rem; + ${selectTokens.itemIconSizeTight}: 1.5rem; + + ${selectTokens.fontFamily}: var(--plasma-typo-body-m-font-family); + ${selectTokens.fontSize}: var(--plasma-typo-body-m-font-size); + ${selectTokens.fontStyle}: var(--plasma-typo-body-m-font-style); + ${selectTokens.fontWeight}: var(--plasma-typo-body-m-font-weight); + ${selectTokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${selectTokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + + ${selectTokens.checkboxTriggerSize}: 1.25rem; + ${selectTokens.checkboxTriggerSizeTight}: 1.25rem; + ${selectTokens.checkboxTriggerBorderRadius}: 0.375rem; + ${selectTokens.checkboxTriggerBorderRadiusTight}: 0.375rem; + ${selectTokens.checkboxFillColor}: var(--text-accent); + ${selectTokens.checkboxIconColor}: var(--on-dark-text-primary); + ${selectTokens.checkboxTriggerBorderColor}: var(--text-secondary); + + ${selectTokens.indicatorSize}: 0.375rem; ${selectTokens.chipGap}: 0.25rem; ${selectTokens.chipBorderRadius}: 0.375rem; - ${selectTokens.chipWidth}: auto; ${selectTokens.chipHeight}: 2.25rem; ${selectTokens.chipPaddingRight}: 0.875rem; ${selectTokens.chipPaddingLeft}: 0.625rem; ${selectTokens.chipClearContentMarginLeft}: 0.5rem; ${selectTokens.chipClearContentMarginRight}: 0rem; ${selectTokens.chipCloseIconSize}: 1rem; - ${selectTokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${selectTokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${selectTokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${selectTokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${selectTokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${selectTokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); - - ${selectTokens.targetArrowRight}: 0.875rem; + + ${selectTokens.targetButtonArrowMargin}: 0 -0.125rem 0 0.375rem; + ${selectTokens.targetTextfieldArrowMargin}: 0 0 0 0.625rem; ${selectTokens.targetHeight}: 3rem; - ${selectTokens.targetWidth}: 100%; - ${selectTokens.targetRadius}: 0.75rem; - ${selectTokens.targetPadding}: 0 3.25rem 0 1.25rem; - ${selectTokens.targetPaddingHasChips}: 0 3.375rem 0 0.375rem; - ${selectTokens.targetPaddingWithInput}: 0 3.375rem 0 0.625rem; - ${selectTokens.targetInnerTop}: 0.5rem; - ${selectTokens.targetLabelInnerTop}: 0.375rem; - ${selectTokens.targetFontFamily}: var(--plasma-typo-body-m-font-family); - ${selectTokens.targetFontSize}: var(--plasma-typo-body-m-font-size); - ${selectTokens.targetFontStyle}: var(--plasma-typo-body-m-font-style); - ${selectTokens.targetFontWeight}: var(--plasma-typo-body-m-font-weight); - ${selectTokens.targetLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${selectTokens.targetLineHeight}: var(--plasma-typo-body-m-line-height); - ${selectTokens.targetLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${selectTokens.targetLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${selectTokens.targetLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${selectTokens.targetLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${selectTokens.targetLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${selectTokens.targetLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${selectTokens.targetButtonPadding}: 1.25rem 0 1.25rem; + ${selectTokens.targetTextfieldPadding}: 0.875rem 0 1rem; + ${selectTokens.targetTextfieldChipPadding}: 0.875rem 0 0.25rem; + + ${selectTokens.labelOffset}: 0.625rem; + + ${selectTokens.innerLabelGap}: 0.125rem; + + ${selectTokens.helperTextOffset}: 0.25rem; + + ${selectTokens.spinnerSize}: 1.5rem; + ${selectTokens.spinnerSizeTight}: 1.5rem; `, l: css` - ${selectTokens.width}: 100%; - ${selectTokens.height}: auto; + ${selectTokens.padding}: 0.125rem; ${selectTokens.borderRadius}: 0.875rem; - ${selectTokens.paddingTop}: 0.125rem; - ${selectTokens.paddingRight}: 0.125rem; - ${selectTokens.paddingBottom}: 0.125rem; - ${selectTokens.paddingLeft}: 0.125rem; - - ${selectTokens.dividerColor}: var(--surface-transparent-tertiary); - ${selectTokens.dividerHeight}: 0.063rem; - ${selectTokens.dividerMarginTop}: 0; - ${selectTokens.dividerMarginRight}: 1rem; - ${selectTokens.dividerMarginBottom}: 0; - ${selectTokens.dividerMarginLeft}: 1rem; - - ${selectTokens.itemWidth}: auto; + ${selectTokens.focusOffset}: 0.125rem; + ${selectTokens.itemHeight}: 1.5rem; - ${selectTokens.itemPaddingTop}: 1rem; - ${selectTokens.itemPaddingRight}: 1rem; - ${selectTokens.itemPaddingBottom}: 1rem; - ${selectTokens.itemPaddingLeft}: 1rem; + ${selectTokens.itemPadding}: 1rem 1rem 1rem 0.875rem; + ${selectTokens.itemPaddingTight}: 0.75rem 1rem 0.75rem 0.875rem; ${selectTokens.itemBorderRadius}: 0.75rem; - ${selectTokens.itemContentLeftWidth}: 1.875rem; - ${selectTokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${selectTokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${selectTokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${selectTokens.itemFontWeightBold}: var(--plasma-typo-body-l-font-weight); - ${selectTokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${selectTokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${selectTokens.itemIconMargin}: 0 0.5rem 0 0; + ${selectTokens.itemIconSize}: 1.5rem; + ${selectTokens.itemIconSizeTight}: 1.5rem; + + ${selectTokens.fontFamily}: var(--plasma-typo-body-l-font-family); + ${selectTokens.fontSize}: var(--plasma-typo-body-l-font-size); + ${selectTokens.fontStyle}: var(--plasma-typo-body-l-font-style); + ${selectTokens.fontWeight}: var(--plasma-typo-body-l-font-weight); + ${selectTokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${selectTokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + + ${selectTokens.checkboxTriggerSize}: 1.25rem; + ${selectTokens.checkboxTriggerSizeTight}: 1.25rem; + ${selectTokens.checkboxTriggerBorderRadius}: 0.375rem; + ${selectTokens.checkboxTriggerBorderRadiusTight}: 0.375rem; + ${selectTokens.checkboxFillColor}: var(--text-accent); + ${selectTokens.checkboxIconColor}: var(--on-dark-text-primary); + ${selectTokens.checkboxTriggerBorderColor}: var(--text-secondary); + + ${selectTokens.indicatorSize}: 0.375rem; ${selectTokens.chipGap}: 0.25rem; ${selectTokens.chipBorderRadius}: 0.5rem; - ${selectTokens.chipWidth}: auto; ${selectTokens.chipHeight}: 2.75rem; ${selectTokens.chipPaddingRight}: 0.75rem; ${selectTokens.chipPaddingLeft}: 1rem; ${selectTokens.chipClearContentMarginLeft}: 0.625rem; ${selectTokens.chipClearContentMarginRight}: 0rem; ${selectTokens.chipCloseIconSize}: 1rem; - ${selectTokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${selectTokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${selectTokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${selectTokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${selectTokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${selectTokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); - - ${selectTokens.targetArrowRight}: 1rem; + + ${selectTokens.targetButtonArrowMargin}: 0 -0.125rem 0 0.5rem; + ${selectTokens.targetTextfieldArrowMargin}: 0 0 0 0.75rem; ${selectTokens.targetHeight}: 3.5rem; - ${selectTokens.targetWidth}: 100%; - ${selectTokens.targetRadius}: 0.875rem; - ${selectTokens.targetPadding}: 0 3.5rem 0 1.5rem; - ${selectTokens.targetPaddingHasChips}: 0 3.625rem 0 0.375rem; - ${selectTokens.targetPaddingWithInput}: 0 3.625rem 0 0.625rem; - ${selectTokens.targetInnerTop}: 0.5rem; - ${selectTokens.targetLabelInnerTop}: 0.375rem; - ${selectTokens.targetFontFamily}: var(--plasma-typo-body-l-font-family); - ${selectTokens.targetFontSize}: var(--plasma-typo-body-l-font-size); - ${selectTokens.targetFontStyle}: var(--plasma-typo-body-l-font-style); - ${selectTokens.targetFontWeight}: var(--plasma-typo-body-l-font-weight); - ${selectTokens.targetLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${selectTokens.targetLineHeight}: var(--plasma-typo-body-l-line-height); - ${selectTokens.targetLabelInnerFontFamily}: var(--plasma-typo-body-s-font-family); - ${selectTokens.targetLabelInnerFontSize}: var(--plasma-typo-body-s-font-size); - ${selectTokens.targetLabelInnerFontStyle}: var(--plasma-typo-body-s-font-style); - ${selectTokens.targetLabelInnerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${selectTokens.targetLabelInnerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${selectTokens.targetLabelInnerLineHeight}: var(--plasma-typo-body-s-line-height); + ${selectTokens.targetButtonPadding}: 1.5rem 0 1.5rem; + ${selectTokens.targetTextfieldPadding}: 1rem 0 1.125rem; + ${selectTokens.targetTextfieldChipPadding}: 1rem 0 0.25rem; + + ${selectTokens.labelOffset}: 0.75rem; + + ${selectTokens.innerLabelGap}: 0.125rem; + + ${selectTokens.helperTextOffset}: 0.25rem; + + ${selectTokens.spinnerSize}: 1.5rem; + ${selectTokens.spinnerSizeTight}: 1.5rem; `, }, view: { default: css` - ${selectTokens.background}: var(--surface-solid-card); - ${selectTokens.boxShadow}: var(--shadow-down-soft-s); - - ${selectTokens.itemBackground}: var(--plasma-colors-transparent); - ${selectTokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${selectTokens.itemBackgroundSelectedHover}: var(--surface-transparent-secondary); - ${selectTokens.itemColor}: var(--text-primary); - ${selectTokens.itemContentLeftColor}: var(--text-accent); - - ${selectTokens.chipCloseIconColor}: var(--text-secondary); + ${selectTokens.helperTextColor}: var(--text-secondary); + ${selectTokens.targetButtonColor}: var(--inverse-text-primary); + ${selectTokens.targetButtonColorHover}: var(--inverse-text-primary-hover); + ${selectTokens.targetButtonColorActive}: var(--inverse-text-primary-active); + ${selectTokens.targetButtonArrowColor}: var(--inverse-text-secondary); + ${selectTokens.targetButtonArrowColorHover}: var(--inverse-text-secondary-hover); + ${selectTokens.targetButtonArrowColorActive}: var(--inverse-text-secondary-hover); + ${selectTokens.targetTextfieldArrowColor}: var(--text-secondary); + ${selectTokens.targetTextfieldArrowColorHover}: var(--text-secondary-hover); + ${selectTokens.targetTextfieldArrowColorActive}: var(--text-secondary-hover); + ${selectTokens.targetButtonBackgroundColor}: var(--surface-solid-default); + ${selectTokens.targetButtonBackgroundColorHover}: var(--surface-solid-default-hover); + ${selectTokens.targetButtonBackgroundColorActive}: var(--surface-solid-default-hover); + ${selectTokens.targetTextfieldBackgroundColor}: var(--surface-transparent-primary); + ${selectTokens.targetTextfieldBackgroundColorOpened}: var(--surface-transparent-secondary); + `, + positive: css` + ${selectTokens.helperTextColor}: var(--text-positive); + ${selectTokens.targetButtonColor}: var(--on-dark-text-primary); + ${selectTokens.targetButtonColorHover}: var(--on-dark-text-primary-hover); + ${selectTokens.targetButtonColorActive}: var(--on-dark-text-primary-active); + ${selectTokens.targetButtonArrowColor}: var(--on-dark-text-secondary); + ${selectTokens.targetButtonArrowColorHover}: var(--on-dark-text-secondary-hover); + ${selectTokens.targetButtonArrowColorActive}: var(--on-dark-text-secondary-hover); + ${selectTokens.targetTextfieldArrowColor}: var(--text-secondary); + ${selectTokens.targetTextfieldArrowColorHover}: var(--text-secondary-hover); + ${selectTokens.targetTextfieldArrowColorActive}: var(--text-secondary-hover); + ${selectTokens.targetButtonBackgroundColor}:var(--surface-positive); + ${selectTokens.targetButtonBackgroundColorHover}:var(--surface-positive-hover); + ${selectTokens.targetButtonBackgroundColorActive}:var(--surface-positive-active); + ${selectTokens.targetTextfieldBackgroundColor}: var(--surface-transparent-positive); + ${selectTokens.targetTextfieldBackgroundColorOpened}: var(--surface-transparent-positive-active); + `, + warning: css` + ${selectTokens.helperTextColor}: var(--text-warning); + ${selectTokens.targetButtonColor}: var(--on-dark-text-primary); + ${selectTokens.targetButtonColorHover}: var(--on-dark-text-primary-hover); + ${selectTokens.targetButtonColorActive}: var(--on-dark-text-primary-active); + ${selectTokens.targetButtonArrowColor}: var(--on-dark-text-secondary); + ${selectTokens.targetButtonArrowColorHover}: var(--on-dark-text-secondary-hover); + ${selectTokens.targetButtonArrowColorActive}: var(--on-dark-text-secondary-hover); + ${selectTokens.targetTextfieldArrowColor}: var(--text-secondary); + ${selectTokens.targetTextfieldArrowColorHover}: var(--text-secondary-hover); + ${selectTokens.targetTextfieldArrowColorActive}: var(--text-secondary-hover); + ${selectTokens.targetButtonBackgroundColor}:var(--surface-warning); + ${selectTokens.targetButtonBackgroundColorHover}:var(--surface-warning-hover); + ${selectTokens.targetButtonBackgroundColorActive}:var(--surface-warning-active); + ${selectTokens.targetTextfieldBackgroundColor}: var(--surface-transparent-warning); + ${selectTokens.targetTextfieldBackgroundColorOpened}: var(--surface-transparent-warning-active); + `, + negative: css` + ${selectTokens.helperTextColor}: var(--text-negative); + ${selectTokens.targetButtonColor}: var(--on-dark-text-primary); + ${selectTokens.targetButtonColorHover}: var(--on-dark-text-primary-hover); + ${selectTokens.targetButtonColorActive}: var(--on-dark-text-primary-active); + ${selectTokens.targetButtonArrowColor}: var(--on-dark-text-secondary); + ${selectTokens.targetButtonArrowColorHover}: var(--on-dark-text-secondary-hover); + ${selectTokens.targetButtonArrowColorActive}: var(--on-dark-text-secondary-hover); + ${selectTokens.targetTextfieldArrowColor}: var(--text-secondary); + ${selectTokens.targetTextfieldArrowColorHover}: var(--text-secondary-hover); + ${selectTokens.targetTextfieldArrowColorActive}: var(--text-secondary-hover); + ${selectTokens.targetButtonBackgroundColor}:var(--surface-negative); + ${selectTokens.targetButtonBackgroundColorHover}: var(--surface-negative-hover); + ${selectTokens.targetButtonBackgroundColorActive}:var(--surface-negative-active); + ${selectTokens.targetTextfieldBackgroundColor}: var(--surface-transparent-negative); + ${selectTokens.targetTextfieldBackgroundColorOpened}: var(--surface-transparent-negative-active); + `, + accent: css` + ${selectTokens.targetButtonColor}: var(--on-dark-text-primary); + ${selectTokens.targetButtonColorHover}: var(--on-dark-text-primary-hover); + ${selectTokens.targetButtonColorActive}: var(--on-dark-text-primary-active); + ${selectTokens.targetButtonArrowColor}: var(--on-dark-text-secondary); + ${selectTokens.targetButtonArrowColorHover}: var(--on-dark-text-secondary-hover); + ${selectTokens.targetButtonArrowColorActive}: var(--on-dark-text-secondary-hover); + ${selectTokens.targetButtonBackgroundColor}: var(--surface-accent); + ${selectTokens.targetButtonBackgroundColorHover}: var(--surface-accent-hover); + ${selectTokens.targetButtonBackgroundColorActive}: var(--surface-accent-active); + `, + secondary: css` + ${selectTokens.targetButtonColor}: var(--text-primary); + ${selectTokens.targetButtonColorHover}: var(--text-primary-hover); + ${selectTokens.targetButtonColorActive}: var(--text-primary-active); + ${selectTokens.targetButtonArrowColor}: var(--text-secondary); + ${selectTokens.targetButtonArrowColorHover}: var(--text-secondary-hover); + ${selectTokens.targetButtonArrowColorActive}: var(--text-secondary-hover); + ${selectTokens.targetButtonBackgroundColor}: var(--surface-transparent-secondary); + ${selectTokens.targetButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); + ${selectTokens.targetButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + `, + clear: css` + ${selectTokens.targetButtonColor}: var(--text-primary); + ${selectTokens.targetButtonColorHover}: var(--text-primary-hover); + ${selectTokens.targetButtonColorActive}: var(--text-primary-active); + ${selectTokens.targetButtonArrowColor}: var(--text-secondary); + ${selectTokens.targetButtonArrowColorHover}: var(--text-secondary-hover); + ${selectTokens.targetButtonArrowColorActive}: var(--text-secondary-active); + ${selectTokens.targetButtonBackgroundColor}: var(--surface-clear); + ${selectTokens.targetButtonBackgroundColorHover}: var(--surface-clear); + ${selectTokens.targetButtonBackgroundColorActive}: var(--surface-clear); + `, + dark: css` + ${selectTokens.targetButtonColor}: var(--on-dark-text-primary); + ${selectTokens.targetButtonColorHover}: var(--on-dark-text-primary-hover); + ${selectTokens.targetButtonColorActive}: var(--on-dark-text-primary-active); + ${selectTokens.targetButtonArrowColor}: var(--on-dark-text-secondary); + ${selectTokens.targetButtonArrowColorHover}: var(--on-dark-text-secondary-hover); + ${selectTokens.targetButtonArrowColorActive}: var(--on-dark-text-secondary-active); + ${selectTokens.targetButtonBackgroundColor}:var(--on-light-surface-transparent-deep); + ${selectTokens.targetButtonBackgroundColorHover}:var(--on-light-surface-transparent-deep-hover); + ${selectTokens.targetButtonBackgroundColorActive}:var(--on-light-surface-transparent-deep-active); + `, + black: css` + ${selectTokens.targetButtonColor}: var(--on-dark-text-primary); + ${selectTokens.targetButtonColorHover}: var(--on-dark-text-primary-hover); + ${selectTokens.targetButtonColorActive}: var(--on-dark-text-primary-active); + ${selectTokens.targetButtonArrowColor}: var(--on-dark-text-secondary); + ${selectTokens.targetButtonArrowColorHover}: var(--on-dark-text-secondary-hover); + ${selectTokens.targetButtonArrowColorActive}: var(--on-dark-text-secondary-active); + ${selectTokens.targetButtonBackgroundColor}:var(--on-light-surface-solid-default); + ${selectTokens.targetButtonBackgroundColorHover}:var(--on-light-surface-solid-default-hover); + ${selectTokens.targetButtonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + `, + white: css` + ${selectTokens.targetButtonColor}: var(--on-light-text-primary); + ${selectTokens.targetButtonColorHover}: var(--on-light-text-primary-hover); + ${selectTokens.targetButtonColorActive}: var(--on-light-text-primary-active); + ${selectTokens.targetButtonArrowColor}: var(--on-light-text-secondary); + ${selectTokens.targetButtonArrowColorHover}: var(--on-light-text-secondary-hover); + ${selectTokens.targetButtonArrowColorActive}: var(--on-light-text-secondary-active); + ${selectTokens.targetButtonBackgroundColor}:var(--on-dark-surface-solid-default); + ${selectTokens.targetButtonBackgroundColorHover}:var(--on-dark-surface-solid-default-hover); + ${selectTokens.targetButtonBackgroundColorActive}:var(--on-dark-surface-solid-default-active); + `, + }, + chipView: { + default: css` + ${selectTokens.chipColor}: var(--inverse-text-primary); + ${selectTokens.chipBackground}: var(--surface-solid-default); + ${selectTokens.chipBackgroundHover}: var(--surface-solid-default-hover); + ${selectTokens.chipBackgroundActive}: var(--surface-solid-default-active); + `, + secondary: css` ${selectTokens.chipColor}: var(--text-primary); ${selectTokens.chipBackground}: var(--surface-transparent-secondary); - ${selectTokens.chipColorHover}: var(--text-primary); ${selectTokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${selectTokens.chipColorActive}: var(--text-primary); ${selectTokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); - ${selectTokens.chipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${selectTokens.chipColorReadOnly}: var(--text-primary); - ${selectTokens.chipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${selectTokens.chipColorReadOnlyHover}: var(--text-primary); - ${selectTokens.chipOpacityReadonly}: 0.72; - - ${selectTokens.disabledOpacity}: 0.4; - ${selectTokens.focusColor}: var(--surface-accent); + `, + accent: css` + ${selectTokens.chipColor}: var(--on-dark-text-primary); + ${selectTokens.chipBackground}: var(--surface-accent); + ${selectTokens.chipBackgroundHover}: var(--surface-accent-hover); + ${selectTokens.chipBackgroundActive}: var(--surface-accent-active); `, }, }, diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Select/Select.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Select/Select.stories.tsx index dafe24f56e..aa48e30a6a 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Select/Select.stories.tsx +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Select/Select.stories.tsx @@ -1,276 +1,825 @@ import React, { useState } from 'react'; import type { ComponentProps } from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import { action } from '@storybook/addon-actions'; -import { mergeConfig } from '../../../../engines'; -import { Checkbox } from '../Checkbox/Checkbox'; -import { Button } from '../Button/Button'; -import { SelectPrimitiveValue, selectConfig } from '../../../../components/Select'; -import { WithTheme, argTypesFromConfig } from '../../../_helpers'; -import { IconDone, IconClose } from '../../../../components/_Icon'; +import './style.css'; -import { Select, SelectDivider, SelectItem } from './Select'; -import { config } from './Select.config'; +import { WithTheme } from '../../../_helpers'; +import { IconDone } from '../../../../components/_Icon'; -const placements: Array = ['top', 'bottom', 'right', 'left', 'auto']; -const enumerations: Array = ['comma', 'chip']; +import { Select } from './Select'; -type StorySelectPropsCustom = { - skidding?: number; - distance?: number; +type StorySelectProps = ComponentProps & { + enableContentLeft?: boolean; }; -type StorySelectProps = ComponentProps & StorySelectPropsCustom; +const view = ['default', 'accent', 'secondary', 'clear', 'positive', 'warning', 'negative', 'dark', 'black', 'white']; +const size = ['xs', 's', 'm', 'l']; +const labelPlacement = ['inner', 'outer']; +const chip = ['default', 'secondary', 'accent']; +const variant = ['normal', 'tight']; const meta: Meta = { title: 'plasma_b2c/Select', decorators: [WithTheme], component: Select, argTypes: { - placement: { - options: placements, + target: { + options: ['button-like', 'textfield-like'], control: { type: 'select', }, }, - enumerationType: { - options: enumerations, + size: { + options: size, + control: { + type: 'select', + }, + }, + view: { + options: view, + control: { + type: 'select', + }, + }, + labelPlacement: { + options: labelPlacement, + control: { + type: 'select', + }, + }, + chipView: { + options: chip, + control: { + type: 'select', + }, + }, + variant: { + options: variant, control: { type: 'select', }, }, - ...argTypesFromConfig(mergeConfig(selectConfig, config)), }, args: { - usePortal: false, - disabled: false, - readOnly: false, + multiselect: false, + target: 'textfield-like', label: 'Label', - target: 'button-like', - enumerationType: 'comma', + labelPlacement: 'outer', + placeholder: 'Placeholder', + helperText: 'Helper text', size: 'm', view: 'default', - placement: 'bottom', + chipView: 'default', + enableContentLeft: false, + isTargetAmount: false, + variant: 'normal', + disabled: false, + separator: '', }, }; export default meta; -const onChangeAction = action('onChange'); - -const iconDoneToSelectSizeMap: Record = { - xs: 'xs', - s: 's', - m: 's', - l: 's', -}; - -const checkboxToSelectSizeMap: Record = { - xs: 's', - s: 'm', - m: 'm', - l: 'm', -}; - -const getSelectItems = (slug: string, elemCount: number) => - [...Array(elemCount).keys()].map((num) => ({ - value: `${slug}_${num}`, - child: `${slug} ${num}`, - })); - -const StorySingle = (args: StorySelectProps) => { - const { usePortal, placement, label, readOnly, disabled, size = 'm', view, target } = args; - - const [value, setValue] = useState('item_0'); +const items = [ + { + value: 'north_america', + label: 'Северная Америка', + }, + { + value: 'south_america', + label: 'Южная Америка', + items: [ + { + value: 'brazil', + label: 'Бразилия', + items: [ + { + value: 'rio_de_janeiro', + label: 'Рио-де-Жанейро', + }, + { + value: 'sao_paulo', + label: 'Сан-Паулу', + }, + ], + }, + { + value: 'argentina', + label: 'Аргентина', + items: [ + { + value: 'buenos_aires', + label: 'Буэнос-Айрес', + }, + { + value: 'cordoba', + label: 'Кордова', + }, + ], + }, + { + value: 'colombia', + label: 'Колумбия', + items: [ + { + value: 'bogota', + label: 'Богота', + }, + { + value: 'medellin', + label: 'Медельин', + }, + ], + }, + ], + }, + { + value: 'europe', + label: 'Европа', + items: [ + { + value: 'france', + label: 'Франция', + items: [ + { + value: 'paris', + label: 'Париж', + }, + { + value: 'lyon', + label: 'Лион', + }, + ], + }, + { + value: 'germany', + label: 'Германия', + items: [ + { + value: 'berlin', + label: 'Берлин', + }, + { + value: 'munich', + label: 'Мюнхен', + }, + ], + }, + { + value: 'italy', + label: 'Италия', + items: [ + { + value: 'rome', + label: 'Рим', + }, + { + value: 'milan', + label: 'Милан', + }, + ], + }, + { + value: 'spain', + label: 'Испания', + items: [ + { + value: 'madrid', + label: 'Мадрид', + }, + { + value: 'barcelona', + label: 'Барселона', + }, + ], + }, + { + value: 'united_kingdom', + label: 'Великобритания', + items: [ + { + value: 'london', + label: 'Лондон', + }, + { + value: 'manchester', + label: 'Манчестер', + }, + ], + }, + ], + }, + { + value: 'asia', + label: 'Азия', + items: [ + { + value: 'china', + label: 'Китай', + items: [ + { + value: 'beijing', + label: 'Пекин', + }, + { + value: 'shanghai', + label: 'Шанхай', + }, + ], + }, + { + value: 'japan', + label: 'Япония', + items: [ + { + value: 'tokyo', + label: 'Токио', + }, + { + value: 'osaka', + label: 'Осака', + }, + ], + }, + { + value: 'india', + label: 'Индия', + items: [ + { + value: 'delhi', + label: 'Дели', + }, + { + value: 'mumbai', + label: 'Мумбаи', + }, + ], + }, + { + value: 'south_korea', + label: 'Южная Корея', + items: [ + { + value: 'seoul', + label: 'Сеул', + }, + { + value: 'busan', + label: 'Пусан', + }, + ], + }, + { + value: 'thailand', + label: 'Таиланд', + items: [ + { + value: 'bangkok', + label: 'Бангкок', + }, + { + value: 'phuket', + label: 'Пхукет', + }, + ], + }, + ], + }, + { + value: 'africa', + label: 'Африка', + isDisabled: true, + }, +]; - const onChangeValue = (newValue?: SelectPrimitiveValue) => { - setValue(newValue); - onChangeAction(newValue); - }; +const SingleStory = (args: StorySelectProps) => { + const [value, setValue] = useState(''); return ( -
+
+ onChange={setValue} + contentLeft={args.enableContentLeft ? : undefined} + />
); }; export const Single: StoryObj = { - render: (args) => , + render: (args) => , }; -const StoryMultiple = (args: StorySelectProps) => { - const { usePortal, placement, label, readOnly, disabled, enumerationType, size = 'm', view, target } = args; - - const [value, setValue] = useState | undefined>(['item_2', 'item_3']); - - const onChangeValue = (newValue?: Array) => { - setValue(newValue); - onChangeAction(newValue); - }; +const MultiselectStory = (args: StorySelectProps) => { + const [value, setValue] = useState>([]); return ( -
+
+ onChange={setValue} + contentLeft={args.enableContentLeft ? : undefined} + />
); }; -export const Multiple: StoryObj = { - render: (args) => , +export const Multiselect: StoryObj = { + args: { + multiselect: true, + }, + render: (args) => , }; -const StoryNative = (args: StorySelectProps) => { - const { usePortal, placement, label, readOnly, disabled, size = 'm', view, target } = args; +const PredefinedStory = (args: StorySelectProps) => { + const [valueSingle, setValueSingle] = useState('paris'); + const [valueMultiple, setValueMultiple] = useState(['paris', 'north_america']); - const [value, setValue] = useState('item_0'); + return ( +
+ - {getSelectItems('item', 6).map((item) => ( - - ))} - + {...args} + multiselect + items={items} + value={valueMultiple} + onChange={setValueMultiple} + contentLeft={args.enableContentLeft ? : undefined} + />
); }; -export const Native: StoryObj = { - render: (args) => , +export const Predefined: StoryObj = { + parameters: { + controls: { + exclude: ['multiselect'], + }, + }, + render: (args) => , }; -const StoryControlledOpen = (args: StorySelectProps) => { - const { usePortal, placement, label, readOnly, disabled, size = 'm', view, target } = args; - - const [opened, setOpened] = useState(true); - const [iconColor, setIconColor] = useState('green'); - const [value, setV] = useState('item_0'); +const CommonStory = (args: StorySelectProps) => { + const [value, setValue] = useState(''); + const [valueMultiple, setValueMultiple] = useState>([]); - const onChangeValue = (newValue?: SelectPrimitiveValue) => { - setV(newValue); - onChangeAction(newValue); - }; - const onToggle = (openValue: boolean) => setOpened(openValue); - const onOpen = () => setOpened((v) => !v); - const onMouseEnter = () => setIconColor('red'); - const onMouseLeave = () => setIconColor('green'); + const { enableContentLeft } = args; return ( - <> - -
- -
- +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
View ↓Single ButtonMultiple ButtonSingle TextfieldMultiple Textfield
Default +
+
+
+
+
+
+
+
Accent +
+
+
+
+ +
Secondary +
+
+
+
+ +
Clear +
+
+
+
+ +
Positive +
+
+
+
+
+
+
+
Warning +
+
+
+
+
+
+
+
Negative +
+
+
+
+
+
+
+
Dark +
+
+
+
+ +
Black +
+
+
+
+ +
White +
+
+
+
+ +
+
); }; -export const ControlledOpen: StoryObj = { - render: (args) => , +export const Common: StoryObj = { + parameters: { + controls: { + include: [ + 'size', + 'enableContentLeft', + 'chipView', + 'label', + 'labelPlacement', + 'placeholder', + 'helperText', + 'isTargetAmount', + 'variant', + 'disabled', + 'separator', + ], + }, + }, + argTypes: { + size: { + options: size, + control: { + type: 'select', + }, + }, + }, + args: { + size: 'm', + }, + render: (args) => , }; diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Select/Select.ts b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Select/Select.ts index 375d0a2232..f97d9451ae 100644 --- a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Select/Select.ts +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Select/Select.ts @@ -1,29 +1,9 @@ -import { - selectConfig, - selectItemConfig, - selectDividerConfig, - selectFooterConfig, - selectGroupConfig, - selectHeaderConfig, -} from '../../../../components/Select'; import { component, mergeConfig } from '../../../../engines'; +import { selectConfig } from '../../../..'; import { config } from './Select.config'; const mergedConfig = mergeConfig(selectConfig, config); -export const Select = component(mergedConfig); +const Select = component(mergedConfig); -const mergedItemConfig = mergeConfig(selectItemConfig); -export const SelectItem = component(mergedItemConfig); - -const mergedDividerConfig = mergeConfig(selectDividerConfig); -export const SelectDivider = component(mergedDividerConfig); - -const mergedFooterConfig = mergeConfig(selectFooterConfig); -export const SelectFooter = component(mergedFooterConfig); - -const mergedGroupConfig = mergeConfig(selectGroupConfig); -export const SelectGroup = component(mergedGroupConfig); - -const mergedHeaderConfig = mergeConfig(selectHeaderConfig); -export const SelectHeader = component(mergedHeaderConfig); +export { Select }; diff --git a/packages/plasma-new-hope/src/examples/plasma_b2c/components/Select/style.css b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Select/style.css new file mode 100644 index 0000000000..d3e5e3e40c --- /dev/null +++ b/packages/plasma-new-hope/src/examples/plasma_b2c/components/Select/style.css @@ -0,0 +1,36 @@ +.container { + width: 100%; +} + +table { + border-collapse: collapse; + box-shadow: 0 0 20px rgba(0,0,0,0.1); +} + +th, +td { + padding: 15px; +} + +th { + text-align: left; +} + +table, th, td { + border: 1px solid lightgray; + border-collapse: collapse; +} + +thead { + th { + background-color: #55608f; + color: #fff; + } +} + +tbody { + td { + position: relative; + + } +} diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Accordion/Accordion.config.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/Accordion/Accordion.config.ts index 8282213aa6..f8044d45dc 100644 --- a/packages/plasma-new-hope/src/examples/plasma_web/components/Accordion/Accordion.config.ts +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Accordion/Accordion.config.ts @@ -18,7 +18,9 @@ export const config = { ${accordionTokens.accordionItemTextColor}: var(--text-primary); ${accordionTokens.accordionItemFocus}: var(--surface-accent); ${accordionTokens.accordionBackground}: var(--surface-clear); + ${accordionTokens.accordionItemBorder}: none; ${accordionTokens.accordionItemBorderBottom}: 0; + ${accordionTokens.accordionItemPaddingHorizontalLeft}: var(${accordionTokens.accordionItemPaddingHorizontal}); `, clear: css` ${accordionTokens.accordionGap}: 0.125rem; @@ -30,7 +32,9 @@ export const config = { ${accordionTokens.accordionItemFocus}: var(--surface-accent); ${accordionTokens.accordionItemBorderRadius}: 0rem !important; ${accordionTokens.accordionBackground}: var(--surface-clear); + ${accordionTokens.accordionItemBorder}: none; ${accordionTokens.accordionItemBorderBottom}: 0.125rem solid var(--surface-solid-tertiary); + ${accordionTokens.accordionItemPaddingHorizontalLeft}: 0; `, }, size: { diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Accordion/Accordion.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_web/components/Accordion/Accordion.stories.tsx index 002dcc3fe4..6fec8c82fa 100644 --- a/packages/plasma-new-hope/src/examples/plasma_web/components/Accordion/Accordion.stories.tsx +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Accordion/Accordion.stories.tsx @@ -16,6 +16,7 @@ type AccordionItemCustomProps = { title: string; body: ReactNode; pin?: Pin; + alignWithTitle?: boolean; }; type AccordionProps = ComponentProps & AccordionItemCustomProps; @@ -33,6 +34,7 @@ const meta: Meta = { type: 'arrow', pin: undefined, title: 'Как оплатить заправку бонусами СберСпасибо?', + alignWithTitle: true, body: 'После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива', }, @@ -76,13 +78,13 @@ export const Default: StoryObj = { return ( - + {args.body} - + {args.body} - + {args.body} diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Autocomplete/Autocomplete.config.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/Autocomplete/Autocomplete.config.ts new file mode 100644 index 0000000000..97db6772ea --- /dev/null +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Autocomplete/Autocomplete.config.ts @@ -0,0 +1,338 @@ +import { css } from '@linaria/core'; + +import { autocompleteTokens as tokens } from '../../../../components/Autocomplete'; + +export const config = { + defaults: { + view: 'default', + size: 'l', + labelPlacement: 'outer', + }, + variations: { + view: { + default: css` + ${tokens.textFieldColor}: var(--text-primary); + ${tokens.textFieldBackgroundColor}: var(--surface-clear); + ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldPlaceholderColor}: var(--text-secondary); + ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); + ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldLabelColor}: var(--text-primary); + ${tokens.textFieldLeftHelperColor}: var(--text-secondary); + ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldBorderColor}: var(--surface-transparent-tertiary); + ${tokens.textFieldBorderColorHover}: var(--plasma-colors-secondary); + ${tokens.textFieldBorderColorFocus}: var(--surface-accent); + + ${tokens.background}: var(--surface-solid-card); + ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); + ${tokens.itemBackground}: var(--plasma-colors-transparent); + ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.itemColor}: var(--text-primary); + ${tokens.focusColor}: var(--surface-accent); + + ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + `, + positive: css` + ${tokens.textFieldColor}: var(--text-primary); + ${tokens.textFieldBackgroundColor}: var(--surface-clear); + ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldPlaceholderColor}: var(--text-secondary); + ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); + ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldLabelColor}: var(--text-primary); + ${tokens.textFieldLeftHelperColor}: var(--text-positive); + ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldBorderColor}: var(--surface-positive); + ${tokens.textFieldBorderColorHover}: var(--surface-positive); + ${tokens.textFieldBorderColorFocus}: var(--surface-accent); + + ${tokens.background}: var(--surface-solid-card); + ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); + ${tokens.itemBackground}: var(--plasma-colors-transparent); + ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.itemColor}: var(--text-primary); + ${tokens.focusColor}: var(--surface-accent); + + ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + `, + warning: css` + ${tokens.textFieldColor}: var(--text-primary); + ${tokens.textFieldBackgroundColor}: var(--surface-clear); + ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); + ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldPlaceholderColor}: var(--text-secondary); + ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); + ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldLabelColor}: var(--text-primary); + ${tokens.textFieldLeftHelperColor}: var(--text-warning); + ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldBorderColor}: var(--surface-warning); + ${tokens.textFieldBorderColorHover}: var(--surface-warning); + ${tokens.textFieldBorderColorFocus}: var(--surface-accent); + + ${tokens.background}: var(--surface-solid-card); + ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); + ${tokens.itemBackground}: var(--plasma-colors-transparent); + ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.itemColor}: var(--text-primary); + ${tokens.focusColor}: var(--surface-accent); + + ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + `, + negative: css` + ${tokens.textFieldColor}: var(--text-primary); + ${tokens.textFieldBackgroundColor}: var(--surface-clear); + ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); + ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldPlaceholderColor}: var(--text-secondary); + ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); + ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldLabelColor}: var(--text-primary); + ${tokens.textFieldLeftHelperColor}: var(--text-negative); + ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldBorderColor}: var(--surface-negative); + ${tokens.textFieldBorderColorHover}: var(--surface-negative); + ${tokens.textFieldBorderColorFocus}: var(--surface-accent); + + ${tokens.background}: var(--surface-solid-card); + ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); + ${tokens.itemBackground}: var(--plasma-colors-transparent); + ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.itemColor}: var(--text-primary); + ${tokens.focusColor}: var(--surface-accent); + + ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + `, + }, + size: { + l: css` + ${tokens.textFieldHeight}: 3.5rem; + ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; + ${tokens.textFieldBorderRadius}: 0.875rem; + ${tokens.textFieldBorderWidth}: 0.0625rem; + ${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.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); + ${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.textFieldLabelOffset}: 0.75rem; + ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldLeftHelperOffset}: 0.25rem; + ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0; + ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; + + ${tokens.borderRadius}: 0.875rem; + ${tokens.padding}: 0.125rem; + ${tokens.itemPadding}: 1.0625rem 1rem; + ${tokens.itemBorderRadius}: 0.75rem; + + ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.itemFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + + ${tokens.emptyStatePadding}: 2rem 1rem 1rem 1rem; + ${tokens.emptyStateGap}: 0.5rem; + + ${tokens.infiniteLoaderSpinnerSize}: 1.5rem; + ${tokens.infiniteLoaderGap}: 0.5rem; + `, + m: css` + ${tokens.textFieldHeight}: 3rem; + ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; + ${tokens.textFieldBorderRadius}: 0.75rem; + ${tokens.textFieldBorderWidth}: 0.0625rem; + ${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.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); + ${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.textFieldLabelOffset}: 0.625rem; + ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLeftHelperOffset}: 0.25rem; + ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; + ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; + + ${tokens.borderRadius}: 0.75rem; + ${tokens.padding}: 0.125rem; + ${tokens.itemPadding}: 0.875rem 0.875rem 0.875rem 0.875rem; + ${tokens.itemBorderRadius}: 0.625rem; + + ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.itemFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); + + ${tokens.emptyStatePadding}: 1.625rem 0.875rem 0.875rem 0.875rem; + ${tokens.emptyStateGap}: 0.375rem; + + ${tokens.infiniteLoaderSpinnerSize}: 1.5rem; + ${tokens.infiniteLoaderGap}: 0.375rem; + `, + s: css` + ${tokens.textFieldHeight}: 2.5rem; + ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; + ${tokens.textFieldBorderRadius}: 0.625rem; + ${tokens.textFieldBorderWidth}: 0.0625rem; + ${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.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); + ${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.textFieldLabelOffset}: 0.5rem; + ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLeftHelperOffset}: 0.25rem; + ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; + ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; + + ${tokens.borderRadius}: 0.625rem; + ${tokens.padding}: 0.125rem; + ${tokens.itemPadding}: 0.6875rem 0.75rem; + ${tokens.itemBorderRadius}: 0.5rem; + + ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.itemFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); + + ${tokens.emptyStatePadding}: 1.375rem 0.625rem 0.625rem 0.625rem; + ${tokens.emptyStateGap}: 0.25rem; + + ${tokens.infiniteLoaderSpinnerSize}: 1.5rem; + ${tokens.infiniteLoaderGap}: 0.25rem; + `, + xs: css` + ${tokens.textFieldHeight}: 2rem; + ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; + ${tokens.textFieldBorderRadius}: 0.5rem; + ${tokens.textFieldBorderWidth}: 0.0625rem; + ${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.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); + ${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.textFieldLabelOffset}: 0.375rem; + ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperOffset}: 0.25rem; + ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; + ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; + + ${tokens.borderRadius}: 0.5rem; + ${tokens.padding}: 0.125rem; + ${tokens.itemPadding}: 0.5625rem 0.5rem; + ${tokens.itemBorderRadius}: 0.5rem; + + ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.itemFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.emptyStatePadding}: 1rem 0.5rem 0.5rem 0.5rem; + ${tokens.emptyStateGap}: 0.25rem; + + ${tokens.infiniteLoaderSpinnerSize}: 1rem; + ${tokens.infiniteLoaderGap}: 0.25rem; + `, + }, + labelPlacement: { + inner: css` + ${tokens.textFieldPlaceholderColor}: var(--plasma-input-label-color, var(--plasma-input-placeholder-color, var(--plasma-colors-secondary))); + ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + `, + outer: css``, + }, + disabled: { + true: css` + ${tokens.textFieldDisabledOpacity}: 0.4; + `, + }, + readOnly: { + true: css` + ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-clear); + ${tokens.textFieldBorderColorReadOnly}: var(--surface-transparent-tertiary); + ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); + ${tokens.textFieldLabelColorReadOnly}: var(--text-secondary); + `, + }, + }, +}; diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Autocomplete/Autocomplete.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_web/components/Autocomplete/Autocomplete.stories.tsx new file mode 100644 index 0000000000..4b2a27296d --- /dev/null +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Autocomplete/Autocomplete.stories.tsx @@ -0,0 +1,134 @@ +import type { ComponentProps } from 'react'; +import * as React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; +import { IconPlaceholder } from '@salutejs/plasma-sb-utils'; + +import { WithTheme } from '../../../_helpers'; + +import { Autocomplete } from './Autocomplete'; + +const sizes = ['l', 'm', 's', 'xs']; +const views = ['default', 'positive', 'warning', 'negative']; +const labelPlacements = ['outer', 'inner']; + +const suggestions = [ + { label: 'Алексей Смирнов' }, + { label: 'Екатерина Иванова' }, + { label: 'Дмитрий Петров' }, + { label: 'Ольга Васильева' }, + { label: 'Сергей Сидоров' }, + { label: 'Мария Кузнецова' }, + { label: 'Андрей Попов' }, + { label: 'Анна Николаева' }, + { label: 'Иван Федоров' }, + { label: 'Наталья Морозова' }, + { label: 'Михаил Павлов' }, + { label: 'Елена Романова' }, + { label: 'Владимир Киселев' }, + { label: 'Татьяна Захарова' }, + { label: 'Николай Семенов' }, + { label: 'Юлия Белова' }, + { label: 'Александр Гусев' }, + { label: 'Оксана Яковлева' }, + { label: 'Игорь Егорова' }, + { label: 'Вера Тихомирова' }, + { label: 'Артем Григорьев' }, + { label: 'Евгения Козлова' }, + { label: 'Максим Лебедев' }, + { label: 'Виктория Калашникова' }, + { label: 'Константин Абрамов' }, + { label: 'Светлана Новикова' }, + { label: 'Юрий Волков' }, + { label: 'Валентина Воробьева' }, + { label: 'Павел Сергеев' }, + { label: 'Людмила Виноградова' }, + { label: 'Антон Соловьев' }, + { label: 'Маргарита Цветкова' }, + { label: 'Роман Трофимов' }, + { label: 'Лариса Зайцева' }, + { label: 'Евгений Никитин' }, + { label: 'Галина Михайлова' }, + { label: 'Владислав Антонов' }, + { label: 'Дарья Филатова' }, + { label: 'Олег Буров' }, + { label: 'Инна Медведева' }, + { label: 'Вячеслав Крылов' }, + { label: 'Тамара Беляева' }, + { label: 'Кирилл Марков' }, + { label: 'Марина Пономарева' }, + { label: 'Борис Захаров' }, + { label: 'Жанна Савельева' }, + { label: 'Федор Жуков' }, + { label: 'Елизавета Логинова' }, + { label: 'Виктор Рыбаков' }, + { label: 'Лилия Макарова' }, +]; + +type StoryProps = ComponentProps & { + enableContentLeft: boolean; + enableContentRight: boolean; +}; + +const meta: Meta = { + title: 'plasma_web/Autocomplete', + decorators: [WithTheme], + component: Autocomplete, + argTypes: { + view: { + options: views, + control: { + type: 'select', + }, + }, + size: { + options: sizes, + control: { + type: 'inline-radio', + }, + }, + labelPlacement: { + options: labelPlacements, + control: { + type: 'inline-radio', + }, + }, + }, + args: { + view: 'default', + size: 'l', + labelPlacement: 'outer', + disabled: false, + readOnly: false, + label: 'Label', + textBefore: '', + textAfter: '', + placeholder: 'Заполните поле', + leftHelper: 'Введите имя Алексей', + listWidth: '100%', + listMaxHeight: '200px', + threshold: 2, + enableContentLeft: true, + enableContentRight: true, + }, +}; + +export default meta; + +const DefaultStory = (args: StoryProps) => { + const { enableContentLeft, enableContentRight } = args; + + const iconSize = args.size === 'xs' ? 'xs' : 's'; + + return ( + : undefined} + contentRight={enableContentRight ? : undefined} + /> + ); +}; + +export const Default: StoryObj = { + render: (args) => , +}; diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Autocomplete/Autocomplete.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/Autocomplete/Autocomplete.ts new file mode 100644 index 0000000000..ef75223390 --- /dev/null +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Autocomplete/Autocomplete.ts @@ -0,0 +1,7 @@ +import { component, mergeConfig } from '../../../../engines'; +import { autocompleteConfig } from '../../../../components/Autocomplete'; + +import { config } from './Autocomplete.config'; + +const mergedConfig = mergeConfig(autocompleteConfig, config); +export const Autocomplete = component(mergedConfig); 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 544544de71..39ce7050a5 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 @@ -1,12 +1,12 @@ -import React, { useCallback, useMemo, useState } from 'react'; +import React, { useCallback, useRef, useState } from 'react'; import type { ComponentProps } from 'react'; import type { StoryObj, Meta } from '@storybook/react'; import { action } from '@storybook/addon-actions'; -import { styled } from '@linaria/react'; +import { Heading } from '../../../typograpy/components/Heading/Heading'; import { WithTheme } from '../../../_helpers'; -import { Popover } from '../Popover/Popover'; -import { Button } from '../Button/Button'; +import { Tabs } from '../Tabs/Tabs'; +import { TabItem } from '../Tabs/TabItem'; import { Calendar, CalendarBase, CalendarBaseRange, CalendarDouble, CalendarDoubleRange } from './Calendar'; @@ -39,50 +39,40 @@ export default meta; type CalendarProps = ComponentProps; type CalendarBaseProps = ComponentProps; -type CalendarDoubleProps = ComponentProps; type CalendarBaseRangeProps = ComponentProps; -const StyledCalendar = styled(Calendar)` - background-color: var(--background-primary); - box-shadow: 0 0.063rem 0.25rem -0.063rem rgba(0, 0, 0, 0.04), 0 0.375rem 0.75rem -0.125rem rgba(8, 8, 8, 0.1); - border-radius: 0.75rem; -`; - -const StyledArrow = styled.div` - visibility: hidden; - - &, - &::before { - position: absolute; - width: 0.5rem; - height: 0.5rem; - background: var(--surface-solid-tertiary); - } - - &::before { - visibility: visible; - content: ''; - transform: rotate(45deg); - } -`; - -const baseEvents = [ - { - date: new Date(2023, 10, 6), - }, - { - date: new Date(2023, 10, 16), - color: 'red', - }, - { - date: new Date(2023, 10, 16), - color: 'green', - }, - { - date: new Date(2023, 10, 16), - color: 'blue', - }, -]; +const eventColors = ['red', 'green', 'blue', 'purple']; +const defaultMinDate = new Date(2016, 6, 1); +const defaultMaxDate = new Date(2030, 11, 24); + +const getBaseEvents = (type: 'days' | 'months' | 'quarters' | 'years', datesNumber = 2) => { + const baseDate = { + day: 10, + monthIndex: 6, + year: 2023, + }; + + const colorIndex = Math.floor(Math.random() * eventColors.length); + + const events = [...new Array(datesNumber)].map((_, index) => { + const eventNumber = Math.floor(Math.random() * 3 + 1); + const day = type === 'days' ? baseDate.day + index : 1; + const month = + // eslint-disable-next-line no-nested-ternary + type === 'months' || type === 'quarters' + ? baseDate.monthIndex + index + : type === 'days' + ? baseDate.monthIndex + : 0; + const year = type === 'years' ? baseDate.year + index : baseDate.year; + + return [...new Array(eventNumber)].map(() => { + return { date: new Date(year, month, day), color: eventColors[colorIndex] }; + }); + }); + + return events.flat(); +}; const StoryDefault = (args: CalendarProps) => { const { isRange, isDouble, min, max, date, includeEdgeDates, size } = args; @@ -97,15 +87,6 @@ const StoryDefault = (args: CalendarProps) => { setValueRange(newValue); }, []); - const eventsRange = [...new Array(10)].map((_, day) => ({ - date: new Date(2023, 10, 10 + day), - color: 'purple', - })); - - const disabledDays = [...new Array(5)].map((_, day) => ({ - date: new Date(2023, 10, 23 + day), - })); - return ( { isDouble={isDouble} date={date} value={(isRange ? valueRange : value) as Date & [Date, Date?]} - eventList={[...baseEvents, ...eventsRange]} - disabledList={disabledDays} min={min} max={max} includeEdgeDates={includeEdgeDates} @@ -135,254 +114,170 @@ export const Default: StoryObj = { render: (args) => , }; -const StoryBase = (args: CalendarBaseProps) => { - const { min, max, type, includeEdgeDates, size } = args; - const [value, setValue] = useState(new Date(2023, 10, 16)); +const StoryBase = (args: CalendarBaseProps & { displayDouble: boolean }) => { + const { min, max, includeEdgeDates, size, displayDouble } = args; + const [value, setValue] = useState(new Date(2023, 6, 7)); + const [currentState, setCurrentState] = useState('Days'); - const handleOnChange = useCallback((newValue: Date) => { - setValue(newValue); - onChangeValue(newValue); - }, []); - - const eventsRange = [...new Array(10)].map((_, day) => ({ - date: new Date(2023, 10, 10 + day), - color: 'purple', - })); - - const disabledDays = [...new Array(5)].map((_, day) => ({ - date: new Date(2023, 10, 23 + day), - })); - - return ( - - ); -}; - -export const Base: StoryObj = { - argTypes: { - type: { - options: ['Days', 'Months', 'Years'], - control: { - type: 'select', - }, - }, - }, - args: { - size: 'm', - min: new Date(2023, 10, 1), - max: new Date(2023, 11, 24), - includeEdgeDates: false, - type: 'Days', - }, - render: (args) => , -}; - -const StoryDouble = (args: CalendarDoubleProps) => { - const { min, max, includeEdgeDates, size } = args; - const [value, setValue] = useState(new Date(2023, 10, 16)); - const handleOnChange = useCallback((newValue: Date) => { - setValue(newValue); - onChangeValue(newValue); - }, []); - - const eventsRange = [...new Array(15)].map((_, day) => ({ - date: new Date(2023, 10, 10 + day), - color: 'purple', - })); - - const disabledDays = [...new Array(5)].map((_, day) => ({ - date: new Date(2023, 10, 23 + day), - })); - - return ( - - ); -}; - -export const Double: StoryObj = { - args: { - size: 'm', - min: new Date(2023, 10, 1), - max: new Date(2023, 11, 24), - includeEdgeDates: false, - }, - render: (args) => , -}; - -const StoryRange = (args: CalendarBaseRangeProps) => { - 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); + const handleOnChange = useCallback((newValue: Date, dateInfo?: unknown) => { setValue(newValue); + onChangeValue(newValue, dateInfo); }, []); - const eventsRange = [...new Array(10)].map((_, day) => ({ - date: new Date(2023, 10, 16 + day), - color: 'purple', - })); + const eventList = useRef(getBaseEvents('days', 5)); + const eventMonthList = useRef(getBaseEvents('months', 5)); + const eventQuarterList = useRef(getBaseEvents('quarters')); + const eventYearList = useRef(getBaseEvents('years')); const disabledDays = [...new Array(5)].map((_, day) => ({ - date: new Date(2023, 10, 1 + day), + date: new Date(2023, 6, 23 + day), })); - const eventList = useMemo(() => [...baseEvents, ...eventsRange], [eventsRange]); - const disabledList = useMemo(() => [{ date: new Date(2023, 10, 1) }, ...disabledDays], [disabledDays]); - - return ( - - ); -}; - -export const Range: StoryObj = { - argTypes: { - type: { - options: ['Days', 'Months', 'Years'], - control: { - type: 'select', - }, - }, - }, - args: { - size: 'm', - min: new Date(2023, 10, 1), - max: new Date(2023, 11, 24), - includeEdgeDates: false, - type: 'Days', - }, - render: (args) => , -}; - -const StoryRangeDouble = (args: CalendarBaseRangeProps) => { - 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); - setValue(newValue); - }, []); - - const eventsRange = [...new Array(10)].map((_, day) => ({ - date: new Date(2023, 10, 16 + day), - color: 'purple', - })); - - const disabledDays = [...new Array(5)].map((_, day) => ({ - date: new Date(2023, 10, 1 + day), - })); + const getCalendarComponent = ({ type, ...rest }) => { + return displayDouble ? ( + + ) : ( + + ); + }; - const eventList = useMemo(() => [...baseEvents, ...eventsRange], [eventsRange]); - const disabledList = useMemo(() => [{ date: new Date(2023, 10, 1) }, ...disabledDays], [disabledDays]); + const calendarMap = { + Days: getCalendarComponent({ type: 'Days', eventList: eventList.current, disabledList: disabledDays }), + Months: getCalendarComponent({ type: 'Months', eventMonthList: eventMonthList.current }), + Quarters: getCalendarComponent({ type: 'Quarters', eventQuarterList: eventQuarterList.current }), + Years: getCalendarComponent({ type: 'Years', eventYearList: eventYearList.current }), + }; return ( - + <> + Тип календаря + + {Object.keys(calendarMap).map((state, i) => ( + setCurrentState(state)} + size="m" + > + {state} + + ))} + +
{calendarMap[currentState]}
+ ); }; -export const RangeDouble: StoryObj = { +export const Base: StoryObj = { args: { size: 'm', - min: new Date(2023, 10, 1), - max: new Date(2023, 11, 24), + min: defaultMinDate, + max: defaultMaxDate, includeEdgeDates: false, + displayDouble: false, }, - render: (args) => , + render: (args) => , }; -const StoryWithPopover = (args: CalendarProps) => { - 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)); +const StoryRange = (args: CalendarBaseRangeProps & { displayDouble: boolean }) => { + const { min, max, includeEdgeDates, size, displayDouble } = args; + const [values, setValue] = useState<[Date, Date?]>([new Date(2023, 6, 1), new Date(2023, 6, 16)]); + const [currentState, setCurrentState] = useState('Days'); - const handleOnChange = useCallback((newValue: Date) => { + const handleOnChange = (newValue: [Date, Date?], dateInfo) => { + onChangeValue(newValue, dateInfo); setValue(newValue); - setTextValue(new Date(newValue).toLocaleDateString('en-CA')); - setIsOpen(false); - onChangeValue(newValue); - }, []); + }; - const eventsRange = [...new Array(10)].map((_, day) => ({ - date: new Date(2023, 10, 10 + day), - color: 'purple', - })); + const eventList = useRef(getBaseEvents('days', 5)); + const eventMonthList = useRef(getBaseEvents('months', 5)); + const eventQuarterList = useRef(getBaseEvents('quarters')); + const eventYearList = useRef(getBaseEvents('years')); const disabledDays = [...new Array(5)].map((_, day) => ({ - date: new Date(2023, 10, 23 + day), + date: new Date(2023, 6, 23 + day), })); - return ( - setIsOpen(is)} - role="presentation" - id="popover" - target={} - arrow={} - offset={[0, 6]} - closeOnEsc - closeOnOverlayClick - > - { + return displayDouble ? ( + + ) : ( + - + ); + }; + + const calendarMap = { + Days: getCalendarComponent({ type: 'Days', eventList: eventList.current, disabledList: disabledDays }), + Months: getCalendarComponent({ type: 'Months', eventMonthList: eventMonthList.current }), + Quarters: getCalendarComponent({ type: 'Quarters', eventQuarterList: eventQuarterList.current }), + Years: getCalendarComponent({ type: 'Years', eventYearList: eventYearList.current }), + }; + + return ( + <> + Тип календаря + + {Object.keys(calendarMap).map((state, i) => ( + setCurrentState(state)} + size="m" + > + {state} + + ))} + +
{calendarMap[currentState]}
+ ); }; -export const WithPopover: StoryObj = { +export const Range: StoryObj = { args: { size: 'm', - min: new Date(2023, 9, 1), - max: new Date(2023, 11, 24), - isDouble: false, + min: defaultMinDate, + max: defaultMaxDate, includeEdgeDates: false, + displayDouble: false, }, - render: (args) => , + render: (args) => , }; 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 26672eace6..8853b3379a 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 @@ -54,6 +54,19 @@ export const config = { ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.75rem; + ${calendarBaseTokens.calendarQuarterItemWidth}: 11.75rem; + ${calendarBaseTokens.calendarQuarterItemHeight}: 10.5rem; + + ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); + ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); + ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: 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; @@ -115,6 +128,19 @@ export const config = { ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.625rem; + ${calendarBaseTokens.calendarQuarterItemWidth}: 10rem; + ${calendarBaseTokens.calendarQuarterItemHeight}: 8.5rem; + + ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); + ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); + ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: 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; @@ -176,6 +202,19 @@ export const config = { ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.5rem; + ${calendarBaseTokens.calendarQuarterItemWidth}: 8.25rem; + ${calendarBaseTokens.calendarQuarterItemHeight}: 7rem; + + ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); + ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); + ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: 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; @@ -237,6 +276,19 @@ export const config = { ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; + ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.375rem; + ${calendarBaseTokens.calendarQuarterItemWidth}: 8.25rem; + ${calendarBaseTokens.calendarQuarterItemHeight}: 6.563rem; + + ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); + ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); + ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: 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; 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 8c7b1ca7cb..0bc64f131b 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 @@ -55,6 +55,19 @@ export const config = { ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.75rem; + ${calendarDoubleTokens.calendarQuarterItemWidth}: 11.75rem; + ${calendarDoubleTokens.calendarQuarterItemHeight}: 10.5rem; + + ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); + ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); + ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: 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; @@ -116,6 +129,19 @@ export const config = { ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.625rem; + ${calendarDoubleTokens.calendarQuarterItemWidth}: 10rem; + ${calendarDoubleTokens.calendarQuarterItemHeight}: 8.5rem; + + ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); + ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); + ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: 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; @@ -178,6 +204,19 @@ export const config = { ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.5rem; + ${calendarDoubleTokens.calendarQuarterItemWidth}: 8.25rem; + ${calendarDoubleTokens.calendarQuarterItemHeight}: 7rem; + + ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); + ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); + ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: 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; @@ -239,6 +278,19 @@ export const config = { ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; + ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.375rem; + ${calendarDoubleTokens.calendarQuarterItemWidth}: 8.25rem; + ${calendarDoubleTokens.calendarQuarterItemHeight}: 6.563rem; + + ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); + ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); + ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: 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; diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Chip/Chip.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_web/components/Chip/Chip.stories.tsx index f1eadb009d..34fe786e17 100644 --- a/packages/plasma-new-hope/src/examples/plasma_web/components/Chip/Chip.stories.tsx +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Chip/Chip.stories.tsx @@ -42,6 +42,7 @@ export const Default: Story = { text: 'Hello', view: 'default', size: 'm', + hasClear: true, disabled: false, focused: true, pilled: false, 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 index 6c37996569..3bb6af18f3 100644 --- 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 @@ -131,6 +131,19 @@ export const config = { ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem; + ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; + ${tokens.calendarQuarterItemWidth}: 11.75rem; + ${tokens.calendarQuarterItemHeight}: 10.5rem; + + ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthsPadding}: 0.5rem 1rem 1.125rem 1rem; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; ${tokens.calendarMonthItemWidth}: 7.8125rem; @@ -241,6 +254,19 @@ export const config = { ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem; + ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; + ${tokens.calendarQuarterItemWidth}: 10rem; + ${tokens.calendarQuarterItemHeight}: 8.5rem; + + ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthsPadding}: 0.5rem 1rem 1.125rem 1rem; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; ${tokens.calendarMonthItemWidth}: 6.688rem; @@ -351,6 +377,19 @@ export const config = { ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem; + ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; + ${tokens.calendarQuarterItemWidth}: 8.25rem; + ${tokens.calendarQuarterItemHeight}: 7rem; + + ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthsPadding}: 0.5rem 1rem 0.875rem 1rem; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; ${tokens.calendarMonthItemWidth}: 5.5rem; @@ -462,6 +501,19 @@ export const config = { ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; + ${tokens.calendarQuarterItemBorderRadius}: 0.375rem; + ${tokens.calendarQuarterItemWidth}: 8.25rem; + ${tokens.calendarQuarterItemHeight}: 6.563rem; + + ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.calendarQuarterSelectedFontWeight}: 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; diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Dropdown/Dropdown.config.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/Dropdown/Dropdown.config.ts index 7f043c327c..00f264beeb 100644 --- a/packages/plasma-new-hope/src/examples/plasma_web/components/Dropdown/Dropdown.config.ts +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Dropdown/Dropdown.config.ts @@ -95,7 +95,7 @@ export const config = { ${dropdownTokens.disabledOpacity}: 0.4; ${dropdownTokens.focusColor}: var(--surface-accent); ${dropdownTokens.background}: var(--surface-solid-card); - ${dropdownTokens.boxShadow}: var(--shadow-down-soft-s); + ${dropdownTokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${dropdownTokens.disclosureIconColor}: var(--text-secondary); ${dropdownTokens.itemBackground}: var(--plasma-colors-transparent); ${dropdownTokens.itemBackgroundHover}: var(--surface-transparent-secondary); diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/EmptyState/EmptyState.config.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/EmptyState/EmptyState.config.ts new file mode 100644 index 0000000000..3887ba404d --- /dev/null +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/EmptyState/EmptyState.config.ts @@ -0,0 +1,69 @@ +import { css } from '@linaria/core'; + +import { emptyStateTokens as tokens } from '../../../../components/EmptyState'; + +export const config = { + defaults: { + size: 'l', + }, + variations: { + size: { + l: css` + ${tokens.borderRadius}: 0.875rem; + ${tokens.padding}: 2rem 1rem 1rem 1rem; + ${tokens.iconMargin}: 0 0 0.5rem 0; + ${tokens.descriptionMargin}: 0 0 1rem 0; + ${tokens.buttonMargin}: -1rem 0 0 0; + ${tokens.buttonHeight}: 3.5rem; + ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + `, + m: css` + ${tokens.borderRadius}: 0.75rem; + ${tokens.padding}: 1.625rem 1rem 0.875rem 1rem; + ${tokens.iconMargin}: 0 0 0.375rem 0; + ${tokens.descriptionMargin}: 0 0 0.875rem 0; + ${tokens.buttonMargin}: -0.875rem 0 0 0; + ${tokens.buttonHeight}: 3rem; + ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + `, + s: css` + ${tokens.borderRadius}: 0.625rem; + ${tokens.padding}: 1.375rem 0.875rem 0.625rem 0.875rem; + ${tokens.iconMargin}: 0 0 0.25rem 0; + ${tokens.descriptionMargin}: 0 0 0.625rem 0; + ${tokens.buttonMargin}: -0.625rem 0 0 0; + ${tokens.buttonHeight}: 2.5rem; + ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + `, + xs: css` + ${tokens.borderRadius}: 0.5rem; + ${tokens.padding}: 1rem 0.625rem 0.5rem 0.625rem; + ${tokens.iconMargin}: 0 0 0.25rem 0; + ${tokens.descriptionMargin}: 0 0 0.5rem 0; + ${tokens.buttonMargin}: -0.5rem 0 0 0; + ${tokens.buttonHeight}: 2rem; + ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height); + `, + }, + }, +}; diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/EmptyState/EmptyState.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_web/components/EmptyState/EmptyState.stories.tsx new file mode 100644 index 0000000000..e920b62196 --- /dev/null +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/EmptyState/EmptyState.stories.tsx @@ -0,0 +1,44 @@ +import type { ComponentProps } from 'react'; +import type { StoryObj, Meta } from '@storybook/react'; +import * as React from 'react'; +import { IconPlaceholder } from '@salutejs/plasma-sb-utils'; + +import { WithTheme } from '../../../_helpers'; + +import { EmptyState } from './EmptyState'; + +const sizes = ['l', 'm', 's', 'xs']; + +type StoryProps = ComponentProps & { + enableIcon: boolean; +}; + +const meta: Meta = { + title: 'plasma_web/EmptyState', + decorators: [WithTheme], + component: EmptyState, + args: { + description: 'Описание', + buttonText: 'Кнопка', + size: 'l', + enableIcon: true, + }, + argTypes: { + size: { + options: sizes, + control: { + type: 'inline-radio', + }, + }, + }, +}; + +export default meta; + +const DefaultStory = (args: StoryProps) => { + return : undefined} />; +}; + +export const Default: StoryObj = { + render: (args) => , +}; diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/EmptyState/EmptyState.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/EmptyState/EmptyState.ts new file mode 100644 index 0000000000..7ecc29466b --- /dev/null +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/EmptyState/EmptyState.ts @@ -0,0 +1,8 @@ +import { emptyStateConfig } from '../../../../components/EmptyState'; +import { component, mergeConfig } from '../../../../engines'; + +import { config } from './EmptyState.config'; + +export const mergedConfig = mergeConfig(emptyStateConfig, config); + +export const EmptyState = component(mergedConfig); diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Overlay/Overlay.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_web/components/Overlay/Overlay.stories.tsx index c03cd23b33..26a36f2fc4 100644 --- a/packages/plasma-new-hope/src/examples/plasma_web/components/Overlay/Overlay.stories.tsx +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Overlay/Overlay.stories.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { styled } from '@linaria/react'; +import styled from 'styled-components'; import type { ComponentProps } from 'react'; import type { StoryObj, Meta } from '@storybook/react'; import { action } from '@storybook/addon-actions'; diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Pagination/Pagination.config.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/Pagination/Pagination.config.ts index 5b5b26e1a4..d604814f3c 100644 --- a/packages/plasma-new-hope/src/examples/plasma_web/components/Pagination/Pagination.config.ts +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Pagination/Pagination.config.ts @@ -10,73 +10,72 @@ export const config = { }, variations: { view: { - secondary: css` - ${paginationTokens.buttonColor}: var(--text-primary); - ${paginationTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.buttonHoverColor}: var(--text-primary); - ${paginationTokens.buttonHoverBackgroundColor}: color-mix( - in srgb, - var(--inverse-text-primary), - var(--surface-transparent-secondary) 85% - ); - ${paginationTokens.buttonActiveColor}: var(--text-primary); - ${paginationTokens.buttonActiveBackgroundColor}: color-mix( - in srgb, - var(--inverse-text-primary), - var(--surface-transparent-secondary) 80% - ); + default: css` + ${paginationTokens.buttonColor}: var(--inverse-text-primary); + ${paginationTokens.buttonColorHover}: var(--inverse-text-primary-hover); + ${paginationTokens.buttonColorActive}: var(--inverse-text-primary-active); + ${paginationTokens.buttonHoverColor}: var(--inverse-text-primary); + ${paginationTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${paginationTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); + ${paginationTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); + ${paginationTokens.buttonActiveColor}: var(--inverse-text-primary); + ${paginationTokens.buttonArrowColor}: var(--inverse-text-secondary); + ${paginationTokens.buttonArrowColorHover}: var(--inverse-text-secondary-hover); + ${paginationTokens.buttonArrowColorActive}: var(--inverse-text-secondary-hover); ${paginationTokens.buttonDisabledOpacity}: 0.4; ${paginationTokens.inputBackgroundColor}: var(--surface-clear); - ${paginationTokens.selectBackgroundColor}: var(--surface-solid-secondary); ${paginationTokens.inputBorderColor}: var(--surface-transparent-secondary); + ${paginationTokens.selectBackgroundColor}: color-mix( + in srgb, + var(--inverse-text-primary), + var(--surface-solid-default) 85% + ); ${paginationTokens.paginationColor}: var(--text-primary); ${paginationTokens.buttonFocusColor}: var(--surface-accent); `, - clear: css` + secondary: css` ${paginationTokens.buttonColor}: var(--text-primary); - ${paginationTokens.buttonBackgroundColor}: var(--surface-clear); + ${paginationTokens.buttonColorHover}: var(--text-primary-hover); + ${paginationTokens.buttonColorActive}: var(--text-primary-active); + ${paginationTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${paginationTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); + ${paginationTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); ${paginationTokens.buttonHoverColor}: var(--text-primary); - ${paginationTokens.buttonHoverBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 95%); ${paginationTokens.buttonActiveColor}: var(--text-primary); - ${paginationTokens.buttonActiveBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 90%); + ${paginationTokens.buttonArrowColor}: var(--text-secondary); + ${paginationTokens.buttonArrowColorHover}: var(--text-secondary-hover); + ${paginationTokens.buttonArrowColorActive}: var(--text-secondary-hover); ${paginationTokens.buttonDisabledOpacity}: 0.4; ${paginationTokens.inputBackgroundColor}: var(--surface-clear); - ${paginationTokens.selectBackgroundColor}: var(--surface-solid-card); + ${paginationTokens.selectBackgroundColor}: var(--surface-solid-secondary); ${paginationTokens.inputBorderColor}: var(--surface-transparent-secondary); ${paginationTokens.paginationColor}: var(--text-primary); ${paginationTokens.buttonFocusColor}: var(--surface-accent); `, - default: css` - ${paginationTokens.buttonColor}: var(--inverse-text-primary); - ${paginationTokens.buttonBackgroundColor}: var(--surface-solid-default); - ${paginationTokens.buttonHoverColor}: var(--inverse-text-primary); - ${paginationTokens.buttonHoverBackgroundColor}: color-mix( - in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% - ); - ${paginationTokens.buttonActiveColor}: var(--inverse-text-primary); - ${paginationTokens.buttonActiveBackgroundColor}: color-mix( - in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 80% - ); + clear: css` + ${paginationTokens.buttonColor}: var(--text-primary); + ${paginationTokens.buttonColorHover}: var(--text-primary-hover); + ${paginationTokens.buttonColorActive}: var(--text-primary-active); + ${paginationTokens.buttonBackgroundColor}: var(--surface-clear); + ${paginationTokens.buttonBackgroundColorHover}: var(--surface-clear); + ${paginationTokens.buttonBackgroundColorActive}: var(--surface-clear); + ${paginationTokens.buttonHoverColor}: var(--text-primary); + ${paginationTokens.buttonActiveColor}: var(--text-primary); + ${paginationTokens.buttonArrowColor}: var(--text-secondary); + ${paginationTokens.buttonArrowColorHover}: var(--text-secondary-hover); + ${paginationTokens.buttonArrowColorActive}: var(--text-secondary-hover); ${paginationTokens.buttonDisabledOpacity}: 0.4; ${paginationTokens.inputBackgroundColor}: var(--surface-clear); + ${paginationTokens.selectBackgroundColor}: var(--surface-solid-card); ${paginationTokens.inputBorderColor}: var(--surface-transparent-secondary); - ${paginationTokens.selectBackgroundColor}: color-mix( - in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% - ); ${paginationTokens.paginationColor}: var(--text-primary); ${paginationTokens.buttonFocusColor}: var(--surface-accent); @@ -136,31 +135,25 @@ export const config = { ${paginationTokens.buttonHeight}: 3.5rem; ${paginationTokens.buttonWidth}: 3rem; ${paginationTokens.buttonWidthShorter}: 2.25rem; + ${paginationTokens.paginationInputWidth}: 4rem; ${paginationTokens.buttonRadius}: 0.875rem; ${paginationTokens.paginationIconSize}: 1.2rem; ${paginationTokens.paginationIconDoubleSize}: 1.45rem; + ${paginationTokens.buttonArrowMargin}: 0 -0.125rem 0 0.5rem; - ${paginationTokens.selectWidth}: 6.375rem; ${paginationTokens.selectHeight}: auto; ${paginationTokens.selectPaddingTop}: 0.125rem; ${paginationTokens.selectPaddingRight}: 0.125rem; ${paginationTokens.selectPaddingBottom}: 0.125rem; ${paginationTokens.selectPaddingLeft}: 0.125rem; - ${paginationTokens.selectItemWidth}: 6.375rem; ${paginationTokens.selectItemHeight}: 1.5rem; - ${paginationTokens.selectItemPaddingTop}: 1rem; - ${paginationTokens.selectItemPaddingRight}: 1rem; - ${paginationTokens.selectItemPaddingBottom}: 1rem; - ${paginationTokens.selectItemPaddingLeft}: 1rem; + ${paginationTokens.selectItemPadding}: 1rem 1rem 1rem 1rem; ${paginationTokens.selectItemContentLeftWidth}: 1.875rem; ${paginationTokens.selectItemBackground}: transparent; ${paginationTokens.selectTargetArrowRight}: 1rem; - ${paginationTokens.selectTargetWidth}: 6.375rem; - ${paginationTokens.selectTargetPadding}: 0 3.5rem 0 1.5rem; - ${paginationTokens.selectTargetPaddingHasChips}: 0 3.625rem 0 0.375rem; - ${paginationTokens.selectTargetPaddingWithInput}: 0 3.625rem 0 0.625rem; + ${paginationTokens.selectTargetPadding}: 1.5rem 0 1.5rem; ${paginationTokens.selectTargetInnerTop}: 0.5rem; ${paginationTokens.selectTargetLabelInnerTop}: 0.375rem; @@ -181,31 +174,25 @@ export const config = { ${paginationTokens.buttonHeight}: 3rem; ${paginationTokens.buttonWidth}: 3rem; ${paginationTokens.buttonWidthShorter}: 2rem; + ${paginationTokens.paginationInputWidth}: 3.5rem; ${paginationTokens.buttonRadius}: 0.75rem; ${paginationTokens.paginationIconSize}: 1.05rem; ${paginationTokens.paginationIconDoubleSize}: 1.3rem; + ${paginationTokens.buttonArrowMargin}: 0 -0.125rem 0 0.375rem; - ${paginationTokens.selectWidth}: 5.875rem; ${paginationTokens.selectHeight}: auto; ${paginationTokens.selectPaddingTop}: 0.125rem; ${paginationTokens.selectPaddingRight}: 0.125rem; ${paginationTokens.selectPaddingBottom}: 0.125rem; ${paginationTokens.selectPaddingLeft}: 0.125rem; - ${paginationTokens.selectItemWidth}: 5.875rem; ${paginationTokens.selectItemHeight}: 1.5rem; - ${paginationTokens.selectItemPaddingTop}: 0.75rem; - ${paginationTokens.selectItemPaddingRight}: 0.75rem; - ${paginationTokens.selectItemPaddingBottom}: 0.75rem; - ${paginationTokens.selectItemPaddingLeft}: 0.75rem; + ${paginationTokens.selectItemPadding}: 0.75rem 0.75rem 0.75rem 0.75rem; ${paginationTokens.selectItemContentLeftWidth}: 1.75rem; ${paginationTokens.selectItemBackground}: transparent; ${paginationTokens.selectTargetArrowRight}: 0.875rem; - ${paginationTokens.selectTargetWidth}: 5.875rem; - ${paginationTokens.selectTargetPadding}: 0 3.25rem 0 1.25rem; - ${paginationTokens.selectTargetPaddingHasChips}: 0 3.375rem 0 0.375rem; - ${paginationTokens.selectTargetPaddingWithInput}: 0 3.375rem 0 0.625rem; + ${paginationTokens.selectTargetPadding}: 1.25rem 0 1.25rem; ${paginationTokens.selectTargetInnerTop}: 0.5rem; ${paginationTokens.selectTargetLabelInnerTop}: 0.375rem; @@ -230,28 +217,21 @@ export const config = { ${paginationTokens.buttonRadius}: 0.625rem; ${paginationTokens.paginationIconSize}: 0.9rem; ${paginationTokens.paginationIconDoubleSize}: 1.15rem; + ${paginationTokens.buttonArrowMargin}: 0 -0.125rem 0 0.25rem; - ${paginationTokens.selectWidth}: 5.375rem; ${paginationTokens.selectHeight}: auto; ${paginationTokens.selectPaddingTop}: 0.125rem; ${paginationTokens.selectPaddingRight}: 0.125rem; ${paginationTokens.selectPaddingBottom}: 0.125rem; ${paginationTokens.selectPaddingLeft}: 0.125rem; - ${paginationTokens.selectItemWidth}: 5.375rem; ${paginationTokens.selectItemHeight}: 1.5rem; - ${paginationTokens.selectItemPaddingTop}: 0.5rem; - ${paginationTokens.selectItemPaddingRight}: 0.75rem; - ${paginationTokens.selectItemPaddingBottom}: 0.5rem; - ${paginationTokens.selectItemPaddingLeft}: 0.75rem; + ${paginationTokens.selectItemPadding}: 0.5rem 0.75rem 0.5rem 0.75rem; ${paginationTokens.selectItemContentLeftWidth}: 1.75rem; ${paginationTokens.selectItemBackground}: transparent; ${paginationTokens.selectTargetArrowRight}: 0.75rem; - ${paginationTokens.selectTargetWidth}: 5.375rem; - ${paginationTokens.selectTargetPadding}: 0 3rem 0 1rem; - ${paginationTokens.selectTargetPaddingHasChips}: 0 3.125rem 0 0.375rem; - ${paginationTokens.selectTargetPaddingWithInput}: 0 3.125rem 0 0.625rem; + ${paginationTokens.selectTargetPadding}: 1rem 0 1rem; ${paginationTokens.selectTargetInnerTop}: 0.5rem; ${paginationTokens.selectTargetLabelInnerTop}: 0.375rem; @@ -276,28 +256,21 @@ export const config = { ${paginationTokens.buttonWidthShorter}: 1.5rem; ${paginationTokens.paginationIconSize}: 0.75rem; ${paginationTokens.paginationIconDoubleSize}: 1rem; + ${paginationTokens.buttonArrowMargin}: 0 -0.125rem 0 0.25rem; - ${paginationTokens.selectWidth}: 4.625rem; ${paginationTokens.selectHeight}: auto; ${paginationTokens.selectPaddingTop}: 0.125rem; ${paginationTokens.selectPaddingRight}: 0.125rem; ${paginationTokens.selectPaddingBottom}: 0.125rem; ${paginationTokens.selectPaddingLeft}: 0.125rem; - ${paginationTokens.selectItemWidth}: 4.625rem; ${paginationTokens.selectItemHeight}: 1rem; - ${paginationTokens.selectItemPaddingTop}: 0.5rem; - ${paginationTokens.selectItemPaddingRight}: 0.5rem; - ${paginationTokens.selectItemPaddingBottom}: 0.5rem; - ${paginationTokens.selectItemPaddingLeft}: 0.5rem; + ${paginationTokens.selectItemPadding}: 0.5rem 0.5rem 0.5rem 0.5rem; ${paginationTokens.selectItemContentLeftWidth}: 1.25rem; ${paginationTokens.selectItemBackground}: transparent; ${paginationTokens.selectTargetArrowRight}: 0.5rem; - ${paginationTokens.selectTargetWidth}: 4.625rem; - ${paginationTokens.selectTargetPadding}: 0 2.5rem 0 0.75rem; - ${paginationTokens.selectTargetPaddingHasChips}: 0 2.625rem 0 0.375rem; - ${paginationTokens.selectTargetPaddingWithInput}: 0 2.625rem 0 0.625rem; + ${paginationTokens.selectTargetPadding}: 0.75rem 0 0.75rem; ${paginationTokens.selectTargetInnerTop}: 0.5rem; ${paginationTokens.selectTargetLabelInnerTop}: 0.375rem; diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Portal/Portal.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_web/components/Portal/Portal.stories.tsx index 9260371f73..db24fb2445 100644 --- a/packages/plasma-new-hope/src/examples/plasma_web/components/Portal/Portal.stories.tsx +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Portal/Portal.stories.tsx @@ -6,8 +6,7 @@ import { styled } from '@linaria/react'; import { Button } from '../Button/Button'; import { WithTheme } from '../../../_helpers'; import { Body } from '../../../typograpy/components/Body/Body'; - -import { Portal } from './Portal'; +import { Portal } from '../../../../components/Portal'; const meta: Meta = { title: 'plasma_web/Portal', diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Portal/Portal.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/Portal/Portal.ts deleted file mode 100644 index a0beda4ca0..0000000000 --- a/packages/plasma-new-hope/src/examples/plasma_web/components/Portal/Portal.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { portalConfig } from '../../../../components/Portal'; -import { component, mergeConfig } from '../../../../engines'; - -const mergedConfig = mergeConfig(portalConfig); - -export const Portal = component(mergedConfig); diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Price/Price.config.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/Price/Price.config.ts new file mode 100644 index 0000000000..5351ba7197 --- /dev/null +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Price/Price.config.ts @@ -0,0 +1,8 @@ +export const config = { + defaults: { + view: 'default', + }, + variations: { + view: {}, + }, +}; diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Price/Price.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_web/components/Price/Price.stories.tsx new file mode 100644 index 0000000000..4f21967e7d --- /dev/null +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Price/Price.stories.tsx @@ -0,0 +1,38 @@ +import React, { ComponentProps } from 'react'; +import type { StoryObj, Meta } from '@storybook/react'; +import { disableProps } from '@salutejs/plasma-sb-utils'; + +import { WithTheme } from '../../../_helpers'; + +import { Price } from './Price'; + +const currencies = ['rub', 'usd', 'eur', 'inr']; + +const meta: Meta = { + title: 'plasma_web/Price', + decorators: [WithTheme], + argTypes: { + currency: { + options: currencies, + control: { + type: 'inline-radio', + }, + }, + ...disableProps(['value', 'theme', 'as', 'forwardedAs']), + }, +}; + +export default meta; + +type StoryPriceProps = ComponentProps & { priceLabel: number }; + +export const Default: StoryObj = { + args: { + locale: 'ru', + currency: 'rub', + stroked: false, + minimumFractionDigits: 0, + priceLabel: 12345.67, + }, + render: ({ priceLabel, ...rest }) => {priceLabel}, +}; diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Price/Price.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/Price/Price.ts new file mode 100644 index 0000000000..71457f6f97 --- /dev/null +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Price/Price.ts @@ -0,0 +1,10 @@ +import { priceConfig } from '../../../../components/Price'; +import { component, mergeConfig } from '../../../../engines'; + +import { config } from './Price.config'; + +export { priceClasses } from '../../../../components/Price'; + +const mergedConfig = mergeConfig(priceConfig, config); + +export const Price = component(mergedConfig); diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Select/Select.config.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/Select/Select.config.ts index 4e31152fb0..41a8279d3e 100644 --- a/packages/plasma-new-hope/src/examples/plasma_web/components/Select/Select.config.ts +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Select/Select.config.ts @@ -1,339 +1,394 @@ import { css } from '@linaria/core'; -import { selectTokens } from '../../../../components/Select'; +import { selectTokens } from '../../../..'; export const config = { defaults: { - target: 'button-like', view: 'default', + chipView: 'default', size: 'm', }, variations: { - target: { - 'textField-like': css` - ${selectTokens.targetColor}: var(--text-primary); - ${selectTokens.targetLabelColor}: var(--text-secondary); - ${selectTokens.targetArrowColor}: var(--text-secondary); - ${selectTokens.targetBorderColor}: var(--text-tertiary); - ${selectTokens.targetBorderColorHover}: var(--text-tertiary-hover); - ${selectTokens.targetBorderColorActive}: var(--text-tertiary-active); - ${selectTokens.targetBorderColorOpen}: var(--text-accent); - `, - 'button-like': css` - ${selectTokens.targetColor}: var(--text-primary); - ${selectTokens.targetLabelColor}: var(--text-primary); - ${selectTokens.targetArrowColor}: var(--text-secondary); - ${selectTokens.targetBackgroundColor}: var(--surface-transparent-secondary); - ${selectTokens.targetBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${selectTokens.targetBackgroundColorActive}: var(--surface-transparent-secondary-active); - ${selectTokens.targetBackgroundColorOpen}: var(--surface-transparent-secondary); - ${selectTokens.targetFontWeight}: 600 !important; /* TODO: Переделать когда появится возможность пересечения свойств */ - `, - }, size: { xs: css` - ${selectTokens.width}: 100%; - ${selectTokens.height}: auto; + ${selectTokens.padding}: 0.125rem; ${selectTokens.borderRadius}: 0.5rem; - ${selectTokens.paddingTop}: 0.125rem; - ${selectTokens.paddingRight}: 0.125rem; - ${selectTokens.paddingBottom}: 0.125rem; - ${selectTokens.paddingLeft}: 0.125rem; - - ${selectTokens.dividerColor}: var(--surface-transparent-tertiary); - ${selectTokens.dividerHeight}: 0.063rem; - ${selectTokens.dividerMarginTop}: 0; - ${selectTokens.dividerMarginRight}: 0.5rem; - ${selectTokens.dividerMarginBottom}: 0; - ${selectTokens.dividerMarginLeft}: 0.375rem; - - ${selectTokens.itemWidth}: auto; + ${selectTokens.focusOffset}: 0.125rem; + ${selectTokens.itemHeight}: 1rem; - ${selectTokens.itemPaddingTop}: 0.5rem; - ${selectTokens.itemPaddingRight}: 0.5rem; - ${selectTokens.itemPaddingBottom}: 0.5rem; - ${selectTokens.itemPaddingLeft}: 0.375rem; + ${selectTokens.itemPadding}: 0.5rem 0.5rem 0.5rem 0.375rem; + ${selectTokens.itemPaddingTight}: 0.25rem 0.5rem 0.25rem 0.375rem; ${selectTokens.itemBorderRadius}: 0.375rem; - ${selectTokens.itemContentLeftWidth}: 1.25rem; - ${selectTokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${selectTokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${selectTokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${selectTokens.itemFontWeightBold}: var(--plasma-typo-body-xs-font-weight); - ${selectTokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${selectTokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${selectTokens.itemIconSize}: 1rem; + ${selectTokens.itemIconSizeTight}: 1rem; + ${selectTokens.itemIconMargin}: 0 0.25rem 0 0; + + ${selectTokens.fontFamily}: var(--plasma-typo-body-xs-font-family); + ${selectTokens.fontSize}: var(--plasma-typo-body-xs-font-size); + ${selectTokens.fontStyle}: var(--plasma-typo-body-xs-font-style); + ${selectTokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); + ${selectTokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${selectTokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${selectTokens.checkboxTriggerSize}: 0.875rem; + ${selectTokens.checkboxTriggerSizeTight}: 0.875rem; + ${selectTokens.checkboxTriggerBorderRadius}: 0.25rem; + ${selectTokens.checkboxTriggerBorderRadiusTight}: 0.25rem; + ${selectTokens.checkboxFillColor}: var(--text-accent); + ${selectTokens.checkboxIconColor}: var(--on-dark-text-primary); + ${selectTokens.checkboxTriggerBorderColor}: var(--text-secondary); + + ${selectTokens.indicatorSize}: 0.375rem; ${selectTokens.chipGap}: 0.25rem; ${selectTokens.chipBorderRadius}: 0.125rem; - ${selectTokens.chipWidth}: auto; ${selectTokens.chipHeight}: 1.25rem; ${selectTokens.chipPaddingRight}: 0.375rem; ${selectTokens.chipPaddingLeft}: 0.625rem; ${selectTokens.chipClearContentMarginLeft}: 0.25rem; ${selectTokens.chipClearContentMarginRight}: 0rem; ${selectTokens.chipCloseIconSize}: 0.75rem; - ${selectTokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${selectTokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${selectTokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${selectTokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${selectTokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${selectTokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${selectTokens.targetArrowRight}: 0.5rem; + + ${selectTokens.targetButtonArrowMargin}: 0 -0.125rem 0 0.25rem; + ${selectTokens.targetTextfieldArrowMargin}: 0 0 0 0.375rem; ${selectTokens.targetHeight}: 2rem; - ${selectTokens.targetWidth}: 100%; - ${selectTokens.targetRadius}: 0.5rem; - ${selectTokens.targetPadding}: 0 2.5rem 0 0.75rem; - ${selectTokens.targetPaddingHasChips}: 0 2.625rem 0 0.375rem; - ${selectTokens.targetPaddingWithInput}: 0 2.625rem 0 0.625rem; - ${selectTokens.targetInnerTop}: 0.5rem; - ${selectTokens.targetLabelInnerTop}: 0.375rem; - ${selectTokens.targetFontFamily}: var(--plasma-typo-body-xs-font-family); - ${selectTokens.targetFontSize}: var(--plasma-typo-body-xs-font-size); - ${selectTokens.targetFontStyle}: var(--plasma-typo-body-xs-font-style); - ${selectTokens.targetFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${selectTokens.targetLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${selectTokens.targetLineHeight}: var(--plasma-typo-body-xs-line-height); - ${selectTokens.targetLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${selectTokens.targetLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${selectTokens.targetLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${selectTokens.targetLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${selectTokens.targetLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${selectTokens.targetLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${selectTokens.targetButtonPadding}: 0.75rem 0 0.75rem; + ${selectTokens.targetTextfieldPadding}: 0.5rem 0 0.625rem; + ${selectTokens.targetTextfieldChipPadding}: 0.5rem 0 0.25rem; + + ${selectTokens.labelOffset}: 0.375rem; + + ${selectTokens.innerLabelGap}: 0; + + ${selectTokens.helperTextOffset}: 0.25rem; + + ${selectTokens.spinnerSize}: 1rem; + ${selectTokens.spinnerSizeTight}: 1rem; `, s: css` - ${selectTokens.width}: 100%; - ${selectTokens.height}: auto; + ${selectTokens.padding}: 0.125rem; ${selectTokens.borderRadius}: 0.625rem; - ${selectTokens.paddingTop}: 0.125rem; - ${selectTokens.paddingRight}: 0.125rem; - ${selectTokens.paddingBottom}: 0.125rem; - ${selectTokens.paddingLeft}: 0.125rem; - - ${selectTokens.dividerColor}: var(--surface-transparent-tertiary); - ${selectTokens.dividerHeight}: 0.063rem; - ${selectTokens.dividerMarginTop}: 0; - ${selectTokens.dividerMarginRight}: 0.75rem; - ${selectTokens.dividerMarginBottom}: 0; - ${selectTokens.dividerMarginLeft}: 0.75rem; - - ${selectTokens.itemWidth}: auto; + ${selectTokens.focusOffset}: 0.125rem; + ${selectTokens.itemHeight}: 1.5rem; - ${selectTokens.itemPaddingTop}: 0.5rem; - ${selectTokens.itemPaddingRight}: 0.75rem; - ${selectTokens.itemPaddingBottom}: 0.5rem; - ${selectTokens.itemPaddingLeft}: 0.75rem; + ${selectTokens.itemPadding}: 0.5rem 0.75rem 0.5rem 0.675rem; + ${selectTokens.itemPaddingTight}: 0.25rem 0.75rem 0.25rem 0.675rem; ${selectTokens.itemBorderRadius}: 0.5rem; - ${selectTokens.itemContentLeftWidth}: 1.75rem; - ${selectTokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${selectTokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${selectTokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${selectTokens.itemFontWeightBold}: var(--plasma-typo-body-s-font-weight); - ${selectTokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${selectTokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${selectTokens.itemIconSize}: 1.5rem; + ${selectTokens.itemIconSizeTight}: 1rem; + ${selectTokens.itemIconMargin}: 0 0.375rem 0 0; + + ${selectTokens.fontFamily}: var(--plasma-typo-body-s-font-family); + ${selectTokens.fontSize}: var(--plasma-typo-body-s-font-size); + ${selectTokens.fontStyle}: var(--plasma-typo-body-s-font-style); + ${selectTokens.fontWeight}: var(--plasma-typo-body-s-font-weight); + ${selectTokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${selectTokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + + ${selectTokens.checkboxTriggerSize}: 1.25rem; + ${selectTokens.checkboxTriggerSizeTight}: 0.875rem; + ${selectTokens.checkboxTriggerBorderRadius}: 0.375rem; + ${selectTokens.checkboxTriggerBorderRadiusTight}: 0.25rem; + ${selectTokens.checkboxFillColor}: var(--text-accent); + ${selectTokens.checkboxIconColor}: var(--on-dark-text-primary); + ${selectTokens.checkboxTriggerBorderColor}: var(--text-secondary); + + ${selectTokens.indicatorSize}: 0.375rem; ${selectTokens.chipGap}: 0.25rem; ${selectTokens.chipBorderRadius}: 0.25rem; - ${selectTokens.chipWidth}: auto; ${selectTokens.chipHeight}: 1.75rem; ${selectTokens.chipPaddingRight}: 0.5rem; ${selectTokens.chipPaddingLeft}: 0.75rem; ${selectTokens.chipClearContentMarginLeft}: 0.375rem; ${selectTokens.chipClearContentMarginRight}: 0rem; ${selectTokens.chipCloseIconSize}: 0.75rem; - ${selectTokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${selectTokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${selectTokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${selectTokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${selectTokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${selectTokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); - - ${selectTokens.targetArrowRight}: 0.75rem; + + ${selectTokens.targetButtonArrowMargin}: 0 -0.125rem 0 0.25rem; + ${selectTokens.targetTextfieldArrowMargin}: 0 0 0 0.375rem; ${selectTokens.targetHeight}: 2.5rem; - ${selectTokens.targetWidth}: 100%; - ${selectTokens.targetRadius}: 0.625rem; - ${selectTokens.targetPadding}: 0 3rem 0 1rem; - ${selectTokens.targetPaddingHasChips}: 0 3.125rem 0 0.375rem; - ${selectTokens.targetPaddingWithInput}: 0 3.125rem 0 0.625rem; - ${selectTokens.targetInnerTop}: 0.5rem; - ${selectTokens.targetLabelInnerTop}: 0.375rem; - ${selectTokens.targetFontFamily}: var(--plasma-typo-body-s-font-family); - ${selectTokens.targetFontSize}: var(--plasma-typo-body-s-font-size); - ${selectTokens.targetFontStyle}: var(--plasma-typo-body-s-font-style); - ${selectTokens.targetFontWeight}: var(--plasma-typo-body-s-font-weight); - ${selectTokens.targetLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${selectTokens.targetLineHeight}: var(--plasma-typo-body-s-line-height); - ${selectTokens.targetLabelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${selectTokens.targetLabelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${selectTokens.targetLabelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${selectTokens.targetLabelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${selectTokens.targetLabelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${selectTokens.targetLabelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${selectTokens.targetButtonPadding}: 1rem 0 1rem; + ${selectTokens.targetTextfieldPadding}: 0.75rem 0 0.875rem; + ${selectTokens.targetTextfieldChipPadding}: 0.75rem 0 0.25rem; + + ${selectTokens.labelOffset}: 0.5rem; + + ${selectTokens.innerLabelGap}: 0; + + ${selectTokens.helperTextOffset}: 0.25rem; + + ${selectTokens.spinnerSize}: 1.5rem; + ${selectTokens.spinnerSizeTight}: 1rem; `, m: css` - ${selectTokens.width}: 100%; - ${selectTokens.height}: auto; + ${selectTokens.padding}: 0.125rem; ${selectTokens.borderRadius}: 0.75rem; - ${selectTokens.paddingTop}: 0.125rem; - ${selectTokens.paddingRight}: 0.125rem; - ${selectTokens.paddingBottom}: 0.125rem; - ${selectTokens.paddingLeft}: 0.125rem; - - ${selectTokens.dividerColor}: var(--surface-transparent-tertiary); - ${selectTokens.dividerHeight}: 0.063rem; - ${selectTokens.dividerMarginTop}: 0; - ${selectTokens.dividerMarginRight}: 0.875rem; - ${selectTokens.dividerMarginBottom}: 0; - ${selectTokens.dividerMarginLeft}: 0.875rem; - - ${selectTokens.itemWidth}: auto; + ${selectTokens.focusOffset}: 0.125rem; + ${selectTokens.itemHeight}: 1.5rem; - ${selectTokens.itemPaddingTop}: 0.75rem; - ${selectTokens.itemPaddingRight}: 0.875rem; - ${selectTokens.itemPaddingBottom}: 0.75rem; - ${selectTokens.itemPaddingLeft}: 0.875rem; + ${selectTokens.itemPadding}: 0.75rem 0.75rem 0.75rem 0.75rem; + ${selectTokens.itemPaddingTight}: 0.5rem 0.75rem 0.5rem 0.75rem; ${selectTokens.itemBorderRadius}: 0.625rem; - ${selectTokens.itemContentLeftWidth}: 1.75rem; - ${selectTokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${selectTokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${selectTokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${selectTokens.itemFontWeightBold}: var(--plasma-typo-body-m-font-weight); - ${selectTokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${selectTokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${selectTokens.itemIconMargin}: 0 0.375rem 0 0; + ${selectTokens.itemIconSize}: 1.5rem; + ${selectTokens.itemIconSizeTight}: 1.5rem; + + ${selectTokens.fontFamily}: var(--plasma-typo-body-m-font-family); + ${selectTokens.fontSize}: var(--plasma-typo-body-m-font-size); + ${selectTokens.fontStyle}: var(--plasma-typo-body-m-font-style); + ${selectTokens.fontWeight}: var(--plasma-typo-body-m-font-weight); + ${selectTokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${selectTokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + + ${selectTokens.checkboxTriggerSize}: 1.25rem; + ${selectTokens.checkboxTriggerSizeTight}: 1.25rem; + ${selectTokens.checkboxTriggerBorderRadius}: 0.375rem; + ${selectTokens.checkboxTriggerBorderRadiusTight}: 0.375rem; + ${selectTokens.checkboxFillColor}: var(--text-accent); + ${selectTokens.checkboxIconColor}: var(--on-dark-text-primary); + ${selectTokens.checkboxTriggerBorderColor}: var(--text-secondary); + + ${selectTokens.indicatorSize}: 0.375rem; ${selectTokens.chipGap}: 0.25rem; ${selectTokens.chipBorderRadius}: 0.375rem; - ${selectTokens.chipWidth}: auto; ${selectTokens.chipHeight}: 2.25rem; ${selectTokens.chipPaddingRight}: 0.875rem; ${selectTokens.chipPaddingLeft}: 0.625rem; ${selectTokens.chipClearContentMarginLeft}: 0.5rem; ${selectTokens.chipClearContentMarginRight}: 0rem; ${selectTokens.chipCloseIconSize}: 1rem; - ${selectTokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${selectTokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${selectTokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${selectTokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${selectTokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${selectTokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); - - ${selectTokens.targetArrowRight}: 0.875rem; + + ${selectTokens.targetButtonArrowMargin}: 0 -0.125rem 0 0.375rem; + ${selectTokens.targetTextfieldArrowMargin}: 0 0 0 0.625rem; ${selectTokens.targetHeight}: 3rem; - ${selectTokens.targetWidth}: 100%; - ${selectTokens.targetRadius}: 0.75rem; - ${selectTokens.targetPadding}: 0 3.25rem 0 1.25rem; - ${selectTokens.targetPaddingHasChips}: 0 3.375rem 0 0.375rem; - ${selectTokens.targetPaddingWithInput}: 0 3.375rem 0 0.625rem; - ${selectTokens.targetInnerTop}: 0.5rem; - ${selectTokens.targetLabelInnerTop}: 0.375rem; - ${selectTokens.targetFontFamily}: var(--plasma-typo-body-m-font-family); - ${selectTokens.targetFontSize}: var(--plasma-typo-body-m-font-size); - ${selectTokens.targetFontStyle}: var(--plasma-typo-body-m-font-style); - ${selectTokens.targetFontWeight}: var(--plasma-typo-body-m-font-weight); - ${selectTokens.targetLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${selectTokens.targetLineHeight}: var(--plasma-typo-body-m-line-height); - ${selectTokens.targetLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${selectTokens.targetLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${selectTokens.targetLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${selectTokens.targetLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${selectTokens.targetLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${selectTokens.targetLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + ${selectTokens.targetButtonPadding}: 1.25rem 0 1.25rem; + ${selectTokens.targetTextfieldPadding}: 0.875rem 0 1rem; + ${selectTokens.targetTextfieldChipPadding}: 0.875rem 0 0.25rem; + + ${selectTokens.labelOffset}: 0.625rem; + + ${selectTokens.innerLabelGap}: 0.125rem; + + ${selectTokens.helperTextOffset}: 0.25rem; + + ${selectTokens.spinnerSize}: 1.5rem; + ${selectTokens.spinnerSizeTight}: 1.5rem; `, l: css` - ${selectTokens.width}: 100%; - ${selectTokens.height}: auto; + ${selectTokens.padding}: 0.125rem; ${selectTokens.borderRadius}: 0.875rem; - ${selectTokens.paddingTop}: 0.125rem; - ${selectTokens.paddingRight}: 0.125rem; - ${selectTokens.paddingBottom}: 0.125rem; - ${selectTokens.paddingLeft}: 0.125rem; - - ${selectTokens.dividerColor}: var(--surface-transparent-tertiary); - ${selectTokens.dividerHeight}: 0.063rem; - ${selectTokens.dividerMarginTop}: 0; - ${selectTokens.dividerMarginRight}: 1rem; - ${selectTokens.dividerMarginBottom}: 0; - ${selectTokens.dividerMarginLeft}: 1rem; - - ${selectTokens.itemWidth}: auto; + ${selectTokens.focusOffset}: 0.125rem; + ${selectTokens.itemHeight}: 1.5rem; - ${selectTokens.itemPaddingTop}: 1rem; - ${selectTokens.itemPaddingRight}: 1rem; - ${selectTokens.itemPaddingBottom}: 1rem; - ${selectTokens.itemPaddingLeft}: 1rem; + ${selectTokens.itemPadding}: 1rem 1rem 1rem 0.875rem; + ${selectTokens.itemPaddingTight}: 0.75rem 1rem 0.75rem 0.875rem; ${selectTokens.itemBorderRadius}: 0.75rem; - ${selectTokens.itemContentLeftWidth}: 1.875rem; - ${selectTokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${selectTokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${selectTokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${selectTokens.itemFontWeightBold}: var(--plasma-typo-body-l-font-weight); - ${selectTokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${selectTokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${selectTokens.itemIconMargin}: 0 0.5rem 0 0; + ${selectTokens.itemIconSize}: 1.5rem; + ${selectTokens.itemIconSizeTight}: 1.5rem; + + ${selectTokens.fontFamily}: var(--plasma-typo-body-l-font-family); + ${selectTokens.fontSize}: var(--plasma-typo-body-l-font-size); + ${selectTokens.fontStyle}: var(--plasma-typo-body-l-font-style); + ${selectTokens.fontWeight}: var(--plasma-typo-body-l-font-weight); + ${selectTokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${selectTokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + + ${selectTokens.checkboxTriggerSize}: 1.25rem; + ${selectTokens.checkboxTriggerSizeTight}: 1.25rem; + ${selectTokens.checkboxTriggerBorderRadius}: 0.375rem; + ${selectTokens.checkboxTriggerBorderRadiusTight}: 0.375rem; + ${selectTokens.checkboxFillColor}: var(--text-accent); + ${selectTokens.checkboxIconColor}: var(--on-dark-text-primary); + ${selectTokens.checkboxTriggerBorderColor}: var(--text-secondary); + + ${selectTokens.indicatorSize}: 0.375rem; ${selectTokens.chipGap}: 0.25rem; ${selectTokens.chipBorderRadius}: 0.5rem; - ${selectTokens.chipWidth}: auto; ${selectTokens.chipHeight}: 2.75rem; ${selectTokens.chipPaddingRight}: 0.75rem; ${selectTokens.chipPaddingLeft}: 1rem; ${selectTokens.chipClearContentMarginLeft}: 0.625rem; ${selectTokens.chipClearContentMarginRight}: 0rem; ${selectTokens.chipCloseIconSize}: 1rem; - ${selectTokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${selectTokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${selectTokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${selectTokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${selectTokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${selectTokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); - - ${selectTokens.targetArrowRight}: 1rem; + + ${selectTokens.targetButtonArrowMargin}: 0 -0.125rem 0 0.5rem; + ${selectTokens.targetTextfieldArrowMargin}: 0 0 0 0.75rem; ${selectTokens.targetHeight}: 3.5rem; - ${selectTokens.targetWidth}: 100%; - ${selectTokens.targetRadius}: 0.875rem; - ${selectTokens.targetPadding}: 0 3.5rem 0 1.5rem; - ${selectTokens.targetPaddingHasChips}: 0 3.625rem 0 0.375rem; - ${selectTokens.targetPaddingWithInput}: 0 3.625rem 0 0.625rem; - ${selectTokens.targetInnerTop}: 0.5rem; - ${selectTokens.targetLabelInnerTop}: 0.375rem; - ${selectTokens.targetFontFamily}: var(--plasma-typo-body-l-font-family); - ${selectTokens.targetFontSize}: var(--plasma-typo-body-l-font-size); - ${selectTokens.targetFontStyle}: var(--plasma-typo-body-l-font-style); - ${selectTokens.targetFontWeight}: var(--plasma-typo-body-l-font-weight); - ${selectTokens.targetLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${selectTokens.targetLineHeight}: var(--plasma-typo-body-l-line-height); - ${selectTokens.targetLabelInnerFontFamily}: var(--plasma-typo-body-s-font-family); - ${selectTokens.targetLabelInnerFontSize}: var(--plasma-typo-body-s-font-size); - ${selectTokens.targetLabelInnerFontStyle}: var(--plasma-typo-body-s-font-style); - ${selectTokens.targetLabelInnerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${selectTokens.targetLabelInnerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${selectTokens.targetLabelInnerLineHeight}: var(--plasma-typo-body-s-line-height); + ${selectTokens.targetButtonPadding}: 1.5rem 0 1.5rem; + ${selectTokens.targetTextfieldPadding}: 1rem 0 1.125rem; + ${selectTokens.targetTextfieldChipPadding}: 1rem 0 0.25rem; + + ${selectTokens.labelOffset}: 0.75rem; + + ${selectTokens.innerLabelGap}: 0.125rem; + + ${selectTokens.helperTextOffset}: 0.25rem; + + ${selectTokens.spinnerSize}: 1.5rem; + ${selectTokens.spinnerSizeTight}: 1.5rem; `, }, view: { default: css` - ${selectTokens.background}: var(--surface-solid-card); - ${selectTokens.boxShadow}: var(--shadow-down-soft-s); - - ${selectTokens.itemBackground}: var(--plasma-colors-transparent); - ${selectTokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${selectTokens.itemBackgroundSelectedHover}: var(--surface-transparent-secondary); - ${selectTokens.itemColor}: var(--text-primary); - ${selectTokens.itemContentLeftColor}: var(--text-accent); - - ${selectTokens.chipCloseIconColor}: var(--text-secondary); + ${selectTokens.helperTextColor}: var(--text-secondary); + ${selectTokens.targetButtonColor}: var(--inverse-text-primary); + ${selectTokens.targetButtonColorHover}: var(--inverse-text-primary-hover); + ${selectTokens.targetButtonColorActive}: var(--inverse-text-primary-active); + ${selectTokens.targetButtonArrowColor}: var(--inverse-text-secondary); + ${selectTokens.targetButtonArrowColorHover}: var(--inverse-text-secondary-hover); + ${selectTokens.targetButtonArrowColorActive}: var(--inverse-text-secondary-hover); + ${selectTokens.targetTextfieldArrowColor}: var(--text-secondary); + ${selectTokens.targetTextfieldArrowColorHover}: var(--text-secondary-hover); + ${selectTokens.targetTextfieldArrowColorActive}: var(--text-secondary-hover); + ${selectTokens.targetButtonBackgroundColor}: var(--surface-solid-default); + ${selectTokens.targetButtonBackgroundColorHover}: var(--surface-solid-default-hover); + ${selectTokens.targetButtonBackgroundColorActive}: var(--surface-solid-default-hover); + ${selectTokens.targetTextfieldBackgroundColor}: var(--surface-clear); + ${selectTokens.targetTextfieldBackgroundColorOpened}: var(--surface-clear); + ${selectTokens.targetTextfieldBorderColor}: var(--surface-transparent-tertiary); + `, + positive: css` + ${selectTokens.helperTextColor}: var(--text-positive); + ${selectTokens.targetButtonColor}: var(--on-dark-text-primary); + ${selectTokens.targetButtonColorHover}: var(--on-dark-text-primary-hover); + ${selectTokens.targetButtonColorActive}: var(--on-dark-text-primary-active); + ${selectTokens.targetButtonArrowColor}: var(--on-dark-text-secondary); + ${selectTokens.targetButtonArrowColorHover}: var(--on-dark-text-secondary-hover); + ${selectTokens.targetButtonArrowColorActive}: var(--on-dark-text-secondary-hover); + ${selectTokens.targetTextfieldArrowColor}: var(--text-secondary); + ${selectTokens.targetTextfieldArrowColorHover}: var(--text-secondary-hover); + ${selectTokens.targetTextfieldArrowColorActive}: var(--text-secondary-hover); + ${selectTokens.targetButtonBackgroundColor}:var(--surface-positive); + ${selectTokens.targetButtonBackgroundColorHover}:var(--surface-positive-hover); + ${selectTokens.targetButtonBackgroundColorActive}:var(--surface-positive-active); + ${selectTokens.targetTextfieldBackgroundColor}: var(--surface-clear); + ${selectTokens.targetTextfieldBackgroundColorOpened}: var(--surface-clear); + ${selectTokens.targetTextfieldBorderColor}: var(--surface-positive); + `, + warning: css` + ${selectTokens.helperTextColor}: var(--text-warning); + ${selectTokens.targetButtonColor}: var(--on-dark-text-primary); + ${selectTokens.targetButtonColorHover}: var(--on-dark-text-primary-hover); + ${selectTokens.targetButtonColorActive}: var(--on-dark-text-primary-active); + ${selectTokens.targetButtonArrowColor}: var(--on-dark-text-secondary); + ${selectTokens.targetButtonArrowColorHover}: var(--on-dark-text-secondary-hover); + ${selectTokens.targetButtonArrowColorActive}: var(--on-dark-text-secondary-hover); + ${selectTokens.targetTextfieldArrowColor}: var(--text-secondary); + ${selectTokens.targetTextfieldArrowColorHover}: var(--text-secondary-hover); + ${selectTokens.targetTextfieldArrowColorActive}: var(--text-secondary-hover); + ${selectTokens.targetButtonBackgroundColor}:var(--surface-warning); + ${selectTokens.targetButtonBackgroundColorHover}:var(--surface-warning-hover); + ${selectTokens.targetButtonBackgroundColorActive}:var(--surface-warning-active); + ${selectTokens.targetTextfieldBackgroundColor}: var(--surface-clear); + ${selectTokens.targetTextfieldBackgroundColorOpened}: var(--surface-clear); + ${selectTokens.targetTextfieldBorderColor}: var(--surface-warning); + `, + negative: css` + ${selectTokens.helperTextColor}: var(--text-negative); + ${selectTokens.targetButtonColor}: var(--on-dark-text-primary); + ${selectTokens.targetButtonColorHover}: var(--on-dark-text-primary-hover); + ${selectTokens.targetButtonColorActive}: var(--on-dark-text-primary-active); + ${selectTokens.targetButtonArrowColor}: var(--on-dark-text-secondary); + ${selectTokens.targetButtonArrowColorHover}: var(--on-dark-text-secondary-hover); + ${selectTokens.targetButtonArrowColorActive}: var(--on-dark-text-secondary-hover); + ${selectTokens.targetTextfieldArrowColor}: var(--text-secondary); + ${selectTokens.targetTextfieldArrowColorHover}: var(--text-secondary-hover); + ${selectTokens.targetTextfieldArrowColorActive}: var(--text-secondary-hover); + ${selectTokens.targetButtonBackgroundColor}:var(--surface-negative); + ${selectTokens.targetButtonBackgroundColorHover}: var(--surface-negative-hover); + ${selectTokens.targetButtonBackgroundColorActive}:var(--surface-negative-active); + ${selectTokens.targetTextfieldBackgroundColor}: var(--surface-clear); + ${selectTokens.targetTextfieldBackgroundColorOpened}: var(--surface-clear); + ${selectTokens.targetTextfieldBorderColor}: var(--surface-negative); + `, + accent: css` + ${selectTokens.targetButtonColor}: var(--on-dark-text-primary); + ${selectTokens.targetButtonColorHover}: var(--on-dark-text-primary-hover); + ${selectTokens.targetButtonColorActive}: var(--on-dark-text-primary-active); + ${selectTokens.targetButtonArrowColor}: var(--on-dark-text-secondary); + ${selectTokens.targetButtonArrowColorHover}: var(--on-dark-text-secondary-hover); + ${selectTokens.targetButtonArrowColorActive}: var(--on-dark-text-secondary-hover); + ${selectTokens.targetButtonBackgroundColor}: var(--surface-accent); + ${selectTokens.targetButtonBackgroundColorHover}: var(--surface-accent-hover); + ${selectTokens.targetButtonBackgroundColorActive}: var(--surface-accent-active); + `, + secondary: css` + ${selectTokens.targetButtonColor}: var(--text-primary); + ${selectTokens.targetButtonColorHover}: var(--text-primary-hover); + ${selectTokens.targetButtonColorActive}: var(--text-primary-active); + ${selectTokens.targetButtonArrowColor}: var(--text-secondary); + ${selectTokens.targetButtonArrowColorHover}: var(--text-secondary-hover); + ${selectTokens.targetButtonArrowColorActive}: var(--text-secondary-hover); + ${selectTokens.targetButtonBackgroundColor}: var(--surface-transparent-secondary); + ${selectTokens.targetButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover); + ${selectTokens.targetButtonBackgroundColorActive}: var(--surface-transparent-secondary-active); + `, + clear: css` + ${selectTokens.targetButtonColor}: var(--text-primary); + ${selectTokens.targetButtonColorHover}: var(--text-primary-hover); + ${selectTokens.targetButtonColorActive}: var(--text-primary-active); + ${selectTokens.targetButtonArrowColor}: var(--text-secondary); + ${selectTokens.targetButtonArrowColorHover}: var(--text-secondary-hover); + ${selectTokens.targetButtonArrowColorActive}: var(--text-secondary-active); + ${selectTokens.targetButtonBackgroundColor}: var(--surface-clear); + ${selectTokens.targetButtonBackgroundColorHover}: var(--surface-clear); + ${selectTokens.targetButtonBackgroundColorActive}: var(--surface-clear); + `, + dark: css` + ${selectTokens.targetButtonColor}: var(--on-dark-text-primary); + ${selectTokens.targetButtonColorHover}: var(--on-dark-text-primary-hover); + ${selectTokens.targetButtonColorActive}: var(--on-dark-text-primary-active); + ${selectTokens.targetButtonArrowColor}: var(--on-dark-text-secondary); + ${selectTokens.targetButtonArrowColorHover}: var(--on-dark-text-secondary-hover); + ${selectTokens.targetButtonArrowColorActive}: var(--on-dark-text-secondary-active); + ${selectTokens.targetButtonBackgroundColor}:var(--on-light-surface-transparent-deep); + ${selectTokens.targetButtonBackgroundColorHover}:var(--on-light-surface-transparent-deep-hover); + ${selectTokens.targetButtonBackgroundColorActive}:var(--on-light-surface-transparent-deep-active); + `, + black: css` + ${selectTokens.targetButtonColor}: var(--on-dark-text-primary); + ${selectTokens.targetButtonColorHover}: var(--on-dark-text-primary-hover); + ${selectTokens.targetButtonColorActive}: var(--on-dark-text-primary-active); + ${selectTokens.targetButtonArrowColor}: var(--on-dark-text-secondary); + ${selectTokens.targetButtonArrowColorHover}: var(--on-dark-text-secondary-hover); + ${selectTokens.targetButtonArrowColorActive}: var(--on-dark-text-secondary-active); + ${selectTokens.targetButtonBackgroundColor}:var(--on-light-surface-solid-default); + ${selectTokens.targetButtonBackgroundColorHover}:var(--on-light-surface-solid-default-hover); + ${selectTokens.targetButtonBackgroundColorActive}: var(--on-light-surface-solid-default-active); + `, + white: css` + ${selectTokens.targetButtonColor}: var(--on-light-text-primary); + ${selectTokens.targetButtonColorHover}: var(--on-light-text-primary-hover); + ${selectTokens.targetButtonColorActive}: var(--on-light-text-primary-active); + ${selectTokens.targetButtonArrowColor}: var(--on-light-text-secondary); + ${selectTokens.targetButtonArrowColorHover}: var(--on-light-text-secondary-hover); + ${selectTokens.targetButtonArrowColorActive}: var(--on-light-text-secondary-active); + ${selectTokens.targetButtonBackgroundColor}:var(--on-dark-surface-solid-default); + ${selectTokens.targetButtonBackgroundColorHover}:var(--on-dark-surface-solid-default-hover); + ${selectTokens.targetButtonBackgroundColorActive}:var(--on-dark-surface-solid-default-active); + `, + }, + chipView: { + default: css` + ${selectTokens.chipColor}: var(--inverse-text-primary); + ${selectTokens.chipBackground}: var(--surface-solid-default); + ${selectTokens.chipBackgroundHover}: var(--surface-solid-default-hover); + ${selectTokens.chipBackgroundActive}: var(--surface-solid-default-active); + `, + secondary: css` ${selectTokens.chipColor}: var(--text-primary); ${selectTokens.chipBackground}: var(--surface-transparent-secondary); - ${selectTokens.chipColorHover}: var(--text-primary); ${selectTokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${selectTokens.chipColorActive}: var(--text-primary); ${selectTokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); - ${selectTokens.chipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${selectTokens.chipColorReadOnly}: var(--text-primary); - ${selectTokens.chipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${selectTokens.chipColorReadOnlyHover}: var(--text-primary); - ${selectTokens.chipOpacityReadonly}: 0.72; - - ${selectTokens.disabledOpacity}: 0.4; - ${selectTokens.focusColor}: var(--surface-accent); + `, + accent: css` + ${selectTokens.chipColor}: var(--on-dark-text-primary); + ${selectTokens.chipBackground}: var(--surface-accent); + ${selectTokens.chipBackgroundHover}: var(--surface-accent-hover); + ${selectTokens.chipBackgroundActive}: var(--surface-accent-active); `, }, }, diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Select/Select.stories.tsx b/packages/plasma-new-hope/src/examples/plasma_web/components/Select/Select.stories.tsx index 964b2c72fc..33b83d2c74 100644 --- a/packages/plasma-new-hope/src/examples/plasma_web/components/Select/Select.stories.tsx +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Select/Select.stories.tsx @@ -1,272 +1,825 @@ import React, { useState } from 'react'; import type { ComponentProps } from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import { action } from '@storybook/addon-actions'; -import { mergeConfig } from '../../../../engines'; -import { Checkbox } from '../Checkbox/Checkbox'; -import { Button } from '../Button/Button'; -import { SelectPrimitiveValue, selectConfig } from '../../../../components/Select'; -import { WithTheme, argTypesFromConfig } from '../../../_helpers'; -import { IconDone, IconClose } from '../../../../components/_Icon'; +import './style.css'; -import { Select, SelectDivider, SelectItem } from './Select'; -import { config } from './Select.config'; +import { WithTheme } from '../../../_helpers'; +import { IconDone } from '../../../../components/_Icon'; -const placements: Array = ['top', 'bottom', 'right', 'left', 'auto']; -const enumerations: Array = ['comma', 'chip']; +import { Select } from './Select'; -type StorySelectPropsCustom = { - skidding?: number; - distance?: number; +type StorySelectProps = ComponentProps & { + enableContentLeft?: boolean; }; -type StorySelectProps = ComponentProps & StorySelectPropsCustom; +const view = ['default', 'accent', 'secondary', 'clear', 'positive', 'warning', 'negative', 'dark', 'black', 'white']; +const size = ['xs', 's', 'm', 'l']; +const labelPlacement = ['inner', 'outer']; +const chip = ['default', 'secondary', 'accent']; +const variant = ['normal', 'tight']; const meta: Meta = { title: 'plasma_web/Select', decorators: [WithTheme], component: Select, argTypes: { - placement: { - options: placements, + target: { + options: ['button-like', 'textfield-like'], control: { type: 'select', }, }, - enumerationType: { - options: enumerations, + size: { + options: size, + control: { + type: 'select', + }, + }, + view: { + options: view, + control: { + type: 'select', + }, + }, + labelPlacement: { + options: labelPlacement, + control: { + type: 'select', + }, + }, + chipView: { + options: chip, + control: { + type: 'select', + }, + }, + variant: { + options: variant, control: { type: 'select', }, }, - ...argTypesFromConfig(mergeConfig(selectConfig, config)), }, args: { - usePortal: false, - disabled: false, - readOnly: false, + multiselect: false, + target: 'textfield-like', label: 'Label', - target: 'button-like', - enumerationType: 'comma', + labelPlacement: 'outer', + placeholder: 'Placeholder', + helperText: 'Helper text', size: 'm', view: 'default', - placement: 'bottom', + chipView: 'default', + enableContentLeft: false, + isTargetAmount: false, + variant: 'normal', + disabled: false, + separator: '', }, }; export default meta; -const onChangeAction = action('onChange'); - -const iconDoneToSelectSizeMap: Record = { - xs: 'xs', - s: 's', - m: 's', - l: 's', -}; - -const checkboxToSelectSizeMap: Record = { - xs: 's', - s: 'm', - m: 'm', - l: 'm', -}; - -const getSelectItems = (slug: string, elemCount: number) => - [...Array(elemCount).keys()].map((num) => ({ - value: `${slug}_${num}`, - child: `${slug} ${num}`, - })); - -const StorySingle = (args: StorySelectProps) => { - const { usePortal, placement, label, readOnly, disabled, size = 'm', view, target } = args; - - const [value, setValue] = useState('item_0'); +const items = [ + { + value: 'north_america', + label: 'Северная Америка', + }, + { + value: 'south_america', + label: 'Южная Америка', + items: [ + { + value: 'brazil', + label: 'Бразилия', + items: [ + { + value: 'rio_de_janeiro', + label: 'Рио-де-Жанейро', + }, + { + value: 'sao_paulo', + label: 'Сан-Паулу', + }, + ], + }, + { + value: 'argentina', + label: 'Аргентина', + items: [ + { + value: 'buenos_aires', + label: 'Буэнос-Айрес', + }, + { + value: 'cordoba', + label: 'Кордова', + }, + ], + }, + { + value: 'colombia', + label: 'Колумбия', + items: [ + { + value: 'bogota', + label: 'Богота', + }, + { + value: 'medellin', + label: 'Медельин', + }, + ], + }, + ], + }, + { + value: 'europe', + label: 'Европа', + items: [ + { + value: 'france', + label: 'Франция', + items: [ + { + value: 'paris', + label: 'Париж', + }, + { + value: 'lyon', + label: 'Лион', + }, + ], + }, + { + value: 'germany', + label: 'Германия', + items: [ + { + value: 'berlin', + label: 'Берлин', + }, + { + value: 'munich', + label: 'Мюнхен', + }, + ], + }, + { + value: 'italy', + label: 'Италия', + items: [ + { + value: 'rome', + label: 'Рим', + }, + { + value: 'milan', + label: 'Милан', + }, + ], + }, + { + value: 'spain', + label: 'Испания', + items: [ + { + value: 'madrid', + label: 'Мадрид', + }, + { + value: 'barcelona', + label: 'Барселона', + }, + ], + }, + { + value: 'united_kingdom', + label: 'Великобритания', + items: [ + { + value: 'london', + label: 'Лондон', + }, + { + value: 'manchester', + label: 'Манчестер', + }, + ], + }, + ], + }, + { + value: 'asia', + label: 'Азия', + items: [ + { + value: 'china', + label: 'Китай', + items: [ + { + value: 'beijing', + label: 'Пекин', + }, + { + value: 'shanghai', + label: 'Шанхай', + }, + ], + }, + { + value: 'japan', + label: 'Япония', + items: [ + { + value: 'tokyo', + label: 'Токио', + }, + { + value: 'osaka', + label: 'Осака', + }, + ], + }, + { + value: 'india', + label: 'Индия', + items: [ + { + value: 'delhi', + label: 'Дели', + }, + { + value: 'mumbai', + label: 'Мумбаи', + }, + ], + }, + { + value: 'south_korea', + label: 'Южная Корея', + items: [ + { + value: 'seoul', + label: 'Сеул', + }, + { + value: 'busan', + label: 'Пусан', + }, + ], + }, + { + value: 'thailand', + label: 'Таиланд', + items: [ + { + value: 'bangkok', + label: 'Бангкок', + }, + { + value: 'phuket', + label: 'Пхукет', + }, + ], + }, + ], + }, + { + value: 'africa', + label: 'Африка', + isDisabled: true, + }, +]; - const onChangeValue = (newValue?: SelectPrimitiveValue) => { - setValue(newValue); - onChangeAction(newValue); - }; +const SingleStory = (args: StorySelectProps) => { + const [value, setValue] = useState(''); return ( -
+
+ onChange={setValue} + contentLeft={args.enableContentLeft ? : undefined} + />
); }; export const Single: StoryObj = { - render: (args) => , + render: (args) => , }; -const StoryMultiple = (args: StorySelectProps) => { - const { usePortal, placement, label, readOnly, disabled, enumerationType, size = 'm', view, target } = args; - - const [value, setValue] = useState | undefined>(['item_2', 'item_3']); - - const onChangeValue = (newValue?: Array) => { - setValue(newValue); - onChangeAction(newValue); - }; +const MultiselectStory = (args: StorySelectProps) => { + const [value, setValue] = useState>([]); return ( -
+
+ onChange={setValue} + contentLeft={args.enableContentLeft ? : undefined} + />
); }; -export const Multiple: StoryObj = { - render: (args) => , +export const Multiselect: StoryObj = { + args: { + multiselect: true, + }, + render: (args) => , }; -const StoryNative = (args: StorySelectProps) => { - const { usePortal, placement, label, readOnly, disabled, size = 'm', view, target } = args; +const PredefinedStory = (args: StorySelectProps) => { + const [valueSingle, setValueSingle] = useState('paris'); + const [valueMultiple, setValueMultiple] = useState(['paris', 'north_america']); - const [value, setValue] = useState('item_0'); + return ( +
+ - {getSelectItems('item', 6).map((item) => ( - - ))} - + {...args} + multiselect + items={items} + value={valueMultiple} + onChange={setValueMultiple} + contentLeft={args.enableContentLeft ? : undefined} + />
); }; -export const Native: StoryObj = { - render: (args) => , +export const Predefined: StoryObj = { + parameters: { + controls: { + exclude: ['multiselect'], + }, + }, + render: (args) => , }; -const StoryControlledOpen = (args: StorySelectProps) => { - const { usePortal, placement, label, readOnly, disabled, size = 'm', view, target } = args; - - const [opened, setOpened] = useState(true); - const [iconColor, setIconColor] = useState('green'); - const [value, setV] = useState('item_0'); +const CommonStory = (args: StorySelectProps) => { + const [value, setValue] = useState(''); + const [valueMultiple, setValueMultiple] = useState>([]); - const onChangeValue = (newValue?: SelectPrimitiveValue) => { - setV(newValue); - onChangeAction(newValue); - }; - const onToggle = (openValue: boolean) => setOpened(openValue); - const onOpen = () => setOpened((v) => !v); - const onMouseEnter = () => setIconColor('red'); - const onMouseLeave = () => setIconColor('green'); + const { enableContentLeft } = args; return ( - <> - -
- -
- +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
View ↓Single ButtonMultiple ButtonSingle TextfieldMultiple Textfield
Default +
+
+
+
+
+
+
+
Accent +
+
+
+
+ +
Secondary +
+
+
+
+ +
Clear +
+
+
+
+ +
Positive +
+
+
+
+
+
+
+
Warning +
+
+
+
+
+
+
+
Negative +
+
+
+
+
+
+
+
Dark +
+
+
+
+ +
Black +
+
+
+
+ +
White +
+
+
+
+ +
+
); }; -export const ControlledOpen: StoryObj = { - render: (args) => , +export const Common: StoryObj = { + parameters: { + controls: { + include: [ + 'size', + 'enableContentLeft', + 'chipView', + 'label', + 'labelPlacement', + 'placeholder', + 'helperText', + 'isTargetAmount', + 'variant', + 'disabled', + 'separator', + ], + }, + }, + argTypes: { + size: { + options: size, + control: { + type: 'select', + }, + }, + }, + args: { + size: 'm', + }, + render: (args) => , }; diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Select/Select.ts b/packages/plasma-new-hope/src/examples/plasma_web/components/Select/Select.ts index 375d0a2232..f97d9451ae 100644 --- a/packages/plasma-new-hope/src/examples/plasma_web/components/Select/Select.ts +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Select/Select.ts @@ -1,29 +1,9 @@ -import { - selectConfig, - selectItemConfig, - selectDividerConfig, - selectFooterConfig, - selectGroupConfig, - selectHeaderConfig, -} from '../../../../components/Select'; import { component, mergeConfig } from '../../../../engines'; +import { selectConfig } from '../../../..'; import { config } from './Select.config'; const mergedConfig = mergeConfig(selectConfig, config); -export const Select = component(mergedConfig); +const Select = component(mergedConfig); -const mergedItemConfig = mergeConfig(selectItemConfig); -export const SelectItem = component(mergedItemConfig); - -const mergedDividerConfig = mergeConfig(selectDividerConfig); -export const SelectDivider = component(mergedDividerConfig); - -const mergedFooterConfig = mergeConfig(selectFooterConfig); -export const SelectFooter = component(mergedFooterConfig); - -const mergedGroupConfig = mergeConfig(selectGroupConfig); -export const SelectGroup = component(mergedGroupConfig); - -const mergedHeaderConfig = mergeConfig(selectHeaderConfig); -export const SelectHeader = component(mergedHeaderConfig); +export { Select }; diff --git a/packages/plasma-new-hope/src/examples/plasma_web/components/Select/style.css b/packages/plasma-new-hope/src/examples/plasma_web/components/Select/style.css new file mode 100644 index 0000000000..f5fbfc2908 --- /dev/null +++ b/packages/plasma-new-hope/src/examples/plasma_web/components/Select/style.css @@ -0,0 +1,37 @@ +.container { + width: 100%; +} + +table { + border-collapse: collapse; + box-shadow: 0 0 20px rgba(0,0,0,0.1); +} + +th, +td { + padding: 15px; +} + +th { + text-align: left; +} + +table, th, td { + border: 1px solid lightgray; + border-collapse: collapse; +} + +thead { + th { + background-color: #55608f; + color: #fff; + } +} + +tbody { + + td { + position: relative; + + } +} 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 2ff5e71e83..10b8290a41 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 @@ -1,12 +1,12 @@ -import React, { useCallback, useMemo, useState } from 'react'; +import React, { useCallback, useRef, useState } from 'react'; import type { ComponentProps } from 'react'; import type { StoryObj, Meta } from '@storybook/react'; import { action } from '@storybook/addon-actions'; -import { styled } from '@linaria/react'; +import { Heading } from '../../../typograpy/components/Heading/Heading'; import { WithTheme } from '../../../_helpers'; -import { Popover } from '../Popover/Popover'; -import { Button } from '../Button/Button'; +import { Tabs } from '../Tabs/Tabs'; +import { TabItem } from '../Tabs/TabItem'; import { Calendar, CalendarBase, CalendarBaseRange, CalendarDouble, CalendarDoubleRange } from './Calendar'; @@ -39,50 +39,40 @@ export default meta; type CalendarProps = ComponentProps; type CalendarBaseProps = ComponentProps; -type CalendarDoubleProps = ComponentProps; type CalendarBaseRangeProps = ComponentProps; -const StyledCalendar = styled(Calendar)` - background-color: var(--background-primary); - box-shadow: 0 0.063rem 0.25rem -0.063rem rgba(0, 0, 0, 0.04), 0 0.375rem 0.75rem -0.125rem rgba(8, 8, 8, 0.1); - border-radius: 0.75rem; -`; - -const StyledArrow = styled.div` - visibility: hidden; - - &, - &::before { - position: absolute; - width: 0.5rem; - height: 0.5rem; - background: var(--surface-solid-tertiary); - } - - &::before { - visibility: visible; - content: ''; - transform: rotate(45deg); - } -`; - -const baseEvents = [ - { - date: new Date(2023, 10, 6), - }, - { - date: new Date(2023, 10, 16), - color: 'red', - }, - { - date: new Date(2023, 10, 16), - color: 'green', - }, - { - date: new Date(2023, 10, 16), - color: 'blue', - }, -]; +const eventColors = ['red', 'green', 'blue', 'purple']; +const defaultMinDate = new Date(2016, 6, 1); +const defaultMaxDate = new Date(2030, 11, 24); + +const getBaseEvents = (type: 'days' | 'months' | 'quarters' | 'years', datesNumber = 2) => { + const baseDate = { + day: 10, + monthIndex: 6, + year: 2023, + }; + + const colorIndex = Math.floor(Math.random() * eventColors.length); + + const events = [...new Array(datesNumber)].map((_, index) => { + const eventNumber = Math.floor(Math.random() * 3 + 1); + const day = type === 'days' ? baseDate.day + index : 1; + const month = + // eslint-disable-next-line no-nested-ternary + type === 'months' || type === 'quarters' + ? baseDate.monthIndex + index + : type === 'days' + ? baseDate.monthIndex + : 0; + const year = type === 'years' ? baseDate.year + index : baseDate.year; + + return [...new Array(eventNumber)].map(() => { + return { date: new Date(year, month, day), color: eventColors[colorIndex] }; + }); + }); + + return events.flat(); +}; const StoryDefault = (args: CalendarProps) => { const { isRange, isDouble, min, max, date, includeEdgeDates, size } = args; @@ -97,15 +87,6 @@ const StoryDefault = (args: CalendarProps) => { setValueRange(newValue); }, []); - const eventsRange = [...new Array(10)].map((_, day) => ({ - date: new Date(2023, 10, 10 + day), - color: 'purple', - })); - - const disabledDays = [...new Array(5)].map((_, day) => ({ - date: new Date(2023, 10, 23 + day), - })); - return ( { isDouble={isDouble} date={date} value={(isRange ? valueRange : value) as Date & [Date, Date?]} - eventList={[...baseEvents, ...eventsRange]} - disabledList={disabledDays} min={min} max={max} includeEdgeDates={includeEdgeDates} @@ -135,254 +114,170 @@ export const Default: StoryObj = { render: (args) => , }; -const StoryBase = (args: CalendarBaseProps) => { - const { min, max, type, includeEdgeDates, size } = args; - const [value, setValue] = useState(new Date(2023, 10, 16)); +const StoryBase = (args: CalendarBaseProps & { displayDouble: boolean }) => { + const { min, max, includeEdgeDates, size, displayDouble } = args; + const [value, setValue] = useState(new Date(2023, 6, 7)); + const [currentState, setCurrentState] = useState('Days'); - const handleOnChange = useCallback((newValue: Date) => { - setValue(newValue); - onChangeValue(newValue); - }, []); - - const eventsRange = [...new Array(10)].map((_, day) => ({ - date: new Date(2023, 10, 10 + day), - color: 'purple', - })); - - const disabledDays = [...new Array(5)].map((_, day) => ({ - date: new Date(2023, 10, 23 + day), - })); - - return ( - - ); -}; - -export const Base: StoryObj = { - argTypes: { - type: { - options: ['Days', 'Months', 'Years'], - control: { - type: 'select', - }, - }, - }, - args: { - size: 'm', - min: new Date(2023, 10, 1), - max: new Date(2023, 11, 24), - includeEdgeDates: false, - type: 'Days', - }, - render: (args) => , -}; - -const StoryDouble = (args: CalendarDoubleProps) => { - const { min, max, includeEdgeDates, size } = args; - const [value, setValue] = useState(new Date(2023, 10, 16)); - const handleOnChange = useCallback((newValue: Date) => { - setValue(newValue); - onChangeValue(newValue); - }, []); - - const eventsRange = [...new Array(15)].map((_, day) => ({ - date: new Date(2023, 10, 10 + day), - color: 'purple', - })); - - const disabledDays = [...new Array(5)].map((_, day) => ({ - date: new Date(2023, 10, 23 + day), - })); - - return ( - - ); -}; - -export const Double: StoryObj = { - args: { - size: 'm', - min: new Date(2023, 10, 1), - max: new Date(2023, 11, 24), - includeEdgeDates: false, - }, - render: (args) => , -}; - -const StoryRange = (args: CalendarBaseRangeProps) => { - 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); + const handleOnChange = useCallback((newValue: Date, dateInfo?: unknown) => { setValue(newValue); + onChangeValue(newValue, dateInfo); }, []); - const eventsRange = [...new Array(10)].map((_, day) => ({ - date: new Date(2023, 10, 16 + day), - color: 'purple', - })); + const eventList = useRef(getBaseEvents('days', 5)); + const eventMonthList = useRef(getBaseEvents('months', 5)); + const eventQuarterList = useRef(getBaseEvents('quarters')); + const eventYearList = useRef(getBaseEvents('years')); const disabledDays = [...new Array(5)].map((_, day) => ({ - date: new Date(2023, 10, 1 + day), + date: new Date(2023, 6, 23 + day), })); - const eventList = useMemo(() => [...baseEvents, ...eventsRange], [eventsRange]); - const disabledList = useMemo(() => [{ date: new Date(2023, 10, 1) }, ...disabledDays], [disabledDays]); - - return ( - - ); -}; - -export const Range: StoryObj = { - argTypes: { - type: { - options: ['Days', 'Months', 'Years'], - control: { - type: 'select', - }, - }, - }, - args: { - size: 'm', - min: new Date(2023, 10, 1), - max: new Date(2023, 11, 24), - includeEdgeDates: false, - type: 'Days', - }, - render: (args) => , -}; - -const StoryRangeDouble = (args: CalendarBaseRangeProps) => { - 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); - setValue(newValue); - }, []); - - const eventsRange = [...new Array(10)].map((_, day) => ({ - date: new Date(2023, 10, 16 + day), - color: 'purple', - })); - - const disabledDays = [...new Array(5)].map((_, day) => ({ - date: new Date(2023, 10, 1 + day), - })); + const getCalendarComponent = ({ type, ...rest }) => { + return displayDouble ? ( + + ) : ( + + ); + }; - const eventList = useMemo(() => [...baseEvents, ...eventsRange], [eventsRange]); - const disabledList = useMemo(() => [{ date: new Date(2023, 10, 1) }, ...disabledDays], [disabledDays]); + const calendarMap = { + Days: getCalendarComponent({ type: 'Days', eventList: eventList.current, disabledList: disabledDays }), + Months: getCalendarComponent({ type: 'Months', eventMonthList: eventMonthList.current }), + Quarters: getCalendarComponent({ type: 'Quarters', eventQuarterList: eventQuarterList.current }), + Years: getCalendarComponent({ type: 'Years', eventYearList: eventYearList.current }), + }; return ( - + <> + Тип календаря + + {Object.keys(calendarMap).map((state, i) => ( + setCurrentState(state)} + size="m" + > + {state} + + ))} + +
{calendarMap[currentState]}
+ ); }; -export const RangeDouble: StoryObj = { +export const Base: StoryObj = { args: { size: 'm', - min: new Date(2023, 10, 1), - max: new Date(2023, 11, 24), + min: defaultMinDate, + max: defaultMaxDate, includeEdgeDates: false, + displayDouble: false, }, - render: (args) => , + render: (args) => , }; -const StoryWithPopover = (args: CalendarProps) => { - 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)); +const StoryRange = (args: CalendarBaseRangeProps & { displayDouble: boolean }) => { + const { min, max, includeEdgeDates, size, displayDouble } = args; + const [values, setValue] = useState<[Date, Date?]>([new Date(2023, 6, 1), new Date(2023, 6, 16)]); + const [currentState, setCurrentState] = useState('Days'); - const handleOnChange = useCallback((newValue: Date) => { + const handleOnChange = (newValue: [Date, Date?], dateInfo) => { + onChangeValue(newValue, dateInfo); setValue(newValue); - setTextValue(new Date(newValue).toLocaleDateString('en-CA')); - setIsOpen(false); - onChangeValue(newValue); - }, []); + }; - const eventsRange = [...new Array(10)].map((_, day) => ({ - date: new Date(2023, 10, 10 + day), - color: 'purple', - })); + const eventList = useRef(getBaseEvents('days', 5)); + const eventMonthList = useRef(getBaseEvents('months', 5)); + const eventQuarterList = useRef(getBaseEvents('quarters')); + const eventYearList = useRef(getBaseEvents('years')); const disabledDays = [...new Array(5)].map((_, day) => ({ - date: new Date(2023, 10, 23 + day), + date: new Date(2023, 6, 23 + day), })); - return ( - setIsOpen(is)} - role="presentation" - id="popover" - target={} - arrow={} - offset={[0, 6]} - closeOnEsc - closeOnOverlayClick - > - { + return displayDouble ? ( + + ) : ( + - + ); + }; + + const calendarMap = { + Days: getCalendarComponent({ type: 'Days', eventList: eventList.current, disabledList: disabledDays }), + Months: getCalendarComponent({ type: 'Months', eventMonthList: eventMonthList.current }), + Quarters: getCalendarComponent({ type: 'Quarters', eventQuarterList: eventQuarterList.current }), + Years: getCalendarComponent({ type: 'Years', eventYearList: eventYearList.current }), + }; + + return ( + <> + Тип календаря + + {Object.keys(calendarMap).map((state, i) => ( + setCurrentState(state)} + size="m" + > + {state} + + ))} + +
{calendarMap[currentState]}
+ ); }; -export const WithPopover: StoryObj = { +export const Range: StoryObj = { args: { size: 'm', - min: new Date(2023, 9, 1), - max: new Date(2023, 11, 24), - isDouble: false, + min: defaultMinDate, + max: defaultMaxDate, includeEdgeDates: false, + displayDouble: false, }, - render: (args) => , + render: (args) => , }; 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 44be2018eb..8853b3379a 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 @@ -31,7 +31,7 @@ export const config = { ${calendarBaseTokens.iconButtonBackgroundColor}: var(--surface-clear); ${calendarBaseTokens.iconButtonColorHover}: var(--text-primary-hover); ${calendarBaseTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${calendarBaseTokens.iconButtonColorActive}: var(--text-primary-active); + ${calendarBaseTokens.iconButtonColorActive}: var(--text-primary-hover); ${calendarBaseTokens.iconButtonBackgroundColorActive}: var(--surface-clear); ${calendarBaseTokens.iconButtonFocusColor}: var(--surface-accent); `, @@ -54,6 +54,19 @@ export const config = { ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.75rem; + ${calendarBaseTokens.calendarQuarterItemWidth}: 11.75rem; + ${calendarBaseTokens.calendarQuarterItemHeight}: 10.5rem; + + ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); + ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); + ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: 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; @@ -115,6 +128,19 @@ export const config = { ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.625rem; + ${calendarBaseTokens.calendarQuarterItemWidth}: 10rem; + ${calendarBaseTokens.calendarQuarterItemHeight}: 8.5rem; + + ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); + ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); + ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: 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; @@ -176,6 +202,19 @@ export const config = { ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.5rem; + ${calendarBaseTokens.calendarQuarterItemWidth}: 8.25rem; + ${calendarBaseTokens.calendarQuarterItemHeight}: 7rem; + + ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); + ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); + ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: 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; @@ -237,6 +276,19 @@ export const config = { ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; + ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.375rem; + ${calendarBaseTokens.calendarQuarterItemWidth}: 8.25rem; + ${calendarBaseTokens.calendarQuarterItemHeight}: 6.563rem; + + ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); + ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); + ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: 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; 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 6a8a0a6f3a..0bc64f131b 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 @@ -32,7 +32,7 @@ export const config = { ${calendarDoubleTokens.iconButtonBackgroundColor}: var(--surface-clear); ${calendarDoubleTokens.iconButtonColorHover}: var(--text-primary-hover); ${calendarDoubleTokens.iconButtonBackgroundColorHover}: var(--surface-clear); - ${calendarDoubleTokens.iconButtonColorActive}: var(--text-primary-active); + ${calendarDoubleTokens.iconButtonColorActive}: var(--text-primary-hover); ${calendarDoubleTokens.iconButtonBackgroundColorActive}: var(--surface-clear); ${calendarDoubleTokens.iconButtonFocusColor}: var(--surface-accent); `, @@ -55,6 +55,19 @@ export const config = { ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.75rem; + ${calendarDoubleTokens.calendarQuarterItemWidth}: 11.75rem; + ${calendarDoubleTokens.calendarQuarterItemHeight}: 10.5rem; + + ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); + ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); + ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: 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; @@ -116,6 +129,19 @@ export const config = { ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.625rem; + ${calendarDoubleTokens.calendarQuarterItemWidth}: 10rem; + ${calendarDoubleTokens.calendarQuarterItemHeight}: 8.5rem; + + ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); + ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); + ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: 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; @@ -178,6 +204,19 @@ export const config = { ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.5rem; + ${calendarDoubleTokens.calendarQuarterItemWidth}: 8.25rem; + ${calendarDoubleTokens.calendarQuarterItemHeight}: 7rem; + + ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); + ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); + ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: 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; @@ -239,6 +278,19 @@ export const config = { ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; + ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.375rem; + ${calendarDoubleTokens.calendarQuarterItemWidth}: 8.25rem; + ${calendarDoubleTokens.calendarQuarterItemHeight}: 6.563rem; + + ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); + ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); + ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: 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; diff --git a/packages/plasma-new-hope/src/examples/sds_engineer/components/Chip/Chip.stories.tsx b/packages/plasma-new-hope/src/examples/sds_engineer/components/Chip/Chip.stories.tsx index 4020c37565..8001b77eea 100644 --- a/packages/plasma-new-hope/src/examples/sds_engineer/components/Chip/Chip.stories.tsx +++ b/packages/plasma-new-hope/src/examples/sds_engineer/components/Chip/Chip.stories.tsx @@ -30,6 +30,7 @@ export const Default: Story = { text: 'Hello', view: 'primary', size: 'm', + hasClear: true, readOnly: false, onClear, }, diff --git a/packages/plasma-new-hope/src/examples/sds_engineer/components/Overlay/Overlay.stories.tsx b/packages/plasma-new-hope/src/examples/sds_engineer/components/Overlay/Overlay.stories.tsx index e2f2aeaa6c..2671f1f8d8 100644 --- a/packages/plasma-new-hope/src/examples/sds_engineer/components/Overlay/Overlay.stories.tsx +++ b/packages/plasma-new-hope/src/examples/sds_engineer/components/Overlay/Overlay.stories.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { styled } from '@linaria/react'; +import styled from 'styled-components'; import type { ComponentProps } from 'react'; import type { StoryObj, Meta } from '@storybook/react'; import { action } from '@storybook/addon-actions'; diff --git a/packages/plasma-new-hope/src/hooks/index.ts b/packages/plasma-new-hope/src/hooks/index.ts index d92e77c971..c80b91bbba 100644 --- a/packages/plasma-new-hope/src/hooks/index.ts +++ b/packages/plasma-new-hope/src/hooks/index.ts @@ -2,4 +2,5 @@ export { useUniqId } from './useUniqId'; export { usePreviousValue } from './usePreviousValue'; export { useForceUpdate } from './useForceUpdate'; export { useDidMountEffect } from './useDidMountEffect'; +export { useOutsideClick } from './useOutsideClick'; export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'; diff --git a/packages/plasma-new-hope/src/hooks/useOutsideClick.ts b/packages/plasma-new-hope/src/hooks/useOutsideClick.ts new file mode 100644 index 0000000000..00c0653a8a --- /dev/null +++ b/packages/plasma-new-hope/src/hooks/useOutsideClick.ts @@ -0,0 +1,23 @@ +import { useEffect, useRef } from 'react'; + +export const useOutsideClick = (callback: () => void) => { + const ref = useRef(null); + + useEffect(() => { + const handleClickOutside = (event: MouseEvent | TouchEvent) => { + if (ref.current && !ref.current.contains(event.target as Node)) { + callback(); + } + }; + + document.addEventListener('mouseup', handleClickOutside); + document.addEventListener('touchend', handleClickOutside); + + return () => { + document.removeEventListener('mouseup', handleClickOutside); + document.removeEventListener('touchend', handleClickOutside); + }; + }, [callback]); + + return ref; +}; diff --git a/packages/plasma-new-hope/src/index.ts b/packages/plasma-new-hope/src/index.ts index 1a971d949e..a3cca88a43 100644 --- a/packages/plasma-new-hope/src/index.ts +++ b/packages/plasma-new-hope/src/index.ts @@ -52,3 +52,6 @@ export * from './components/Range'; export * from './components/Accordion'; export * from './components/DatePicker'; export * from './components/Portal'; +export * from './components/Price'; +export * from './components/Autocomplete'; +export * from './components/EmptyState'; diff --git a/packages/plasma-new-hope/src/utils/datejs.ts b/packages/plasma-new-hope/src/utils/datejs.ts index ad70e58833..b8a14b331e 100644 --- a/packages/plasma-new-hope/src/utils/datejs.ts +++ b/packages/plasma-new-hope/src/utils/datejs.ts @@ -1,6 +1,10 @@ import dayjs from 'dayjs'; import customParseFormat from 'dayjs/plugin/customParseFormat'; +import quarterOfYear from 'dayjs/plugin/quarterOfYear'; +import advancedFormat from 'dayjs/plugin/advancedFormat'; dayjs.extend(customParseFormat); +dayjs.extend(quarterOfYear); +dayjs.extend(advancedFormat); export const customDayjs = dayjs; diff --git a/packages/plasma-new-hope/src/utils/index.ts b/packages/plasma-new-hope/src/utils/index.ts index acac721b86..ed8685dd37 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 { isEmpty } from './isEmpty'; export * from './getPopoverPlacement'; export const cx = (...classes: (string | undefined)[]) => classes.filter((classItem) => classItem).join(' '); diff --git a/packages/plasma-new-hope/src/utils/isEmpty.ts b/packages/plasma-new-hope/src/utils/isEmpty.ts new file mode 100644 index 0000000000..7aa01f0ac9 --- /dev/null +++ b/packages/plasma-new-hope/src/utils/isEmpty.ts @@ -0,0 +1,44 @@ +const { hasOwnProperty } = Object.prototype; + +const isEmpty = (obj: any): boolean => { + // null and undefined are "empty" + if (obj == null) { + return true; + } + + // Assume if it has a length property with a non-zero value + // that that property is correct. + if (obj.length > 0) { + return false; + } + if (obj.length === 0) { + return true; + } + + // If it isn't an object at this point + // it is empty, but it can't be anything *but* empty + // Is it empty? Depends on your application. + if (typeof obj !== 'object') { + return true; + } + + // Otherwise, does it have any properties of its own? + // Note that this doesn't handle + // toString and valueOf enumeration bugs in IE < 9 + for (const key in obj) { + if (hasOwnProperty.call(obj, key)) { + return false; + } + } + + return true; +}; + +export { isEmpty }; + +// Example +// '' true +// '{}' true +// '[]' true +// '123' false +// '[123]' false diff --git a/packages/plasma-tokens/data/themes/sdds_cs.json b/packages/plasma-tokens/data/themes/sdds_cs.json new file mode 100644 index 0000000000..b24cb6ef2d --- /dev/null +++ b/packages/plasma-tokens/data/themes/sdds_cs.json @@ -0,0 +1,10557 @@ +{ + "config": { + "name": "sdds_cs", + "accentColor": { + "light": "[general.herbal.700]", + "dark": "[general.herbal.500]" + }, + "grayscale": { + "light": "coolGray", + "dark": "coolGray" + } + }, + "dark": { + "text": { + "default": { + "textPrimary": { + "value": "rgba(255, 255, 255, 0.96)", + "comment": "Основной цвет текста", + "enabled": true + }, + "textPrimaryHover": { + "value": "#FFFFFF93", + "comment": "Основной цвет текста", + "enabled": false + }, + "textPrimaryActive": { + "value": "#FFFFFFC4", + "comment": "Основной цвет текста", + "enabled": false + }, + "textSecondary": { + "value": "rgba(255, 255, 255, 0.56)", + "comment": "Вторичный цвет текста", + "enabled": true + }, + "textSecondaryHover": { + "value": "#FFFFFFFF", + "comment": "Вторичный цвет текста", + "enabled": false + }, + "textSecondaryActive": { + "value": "#FFFFFFAB", + "comment": "Вторичный цвет текста", + "enabled": false + }, + "textTertiary": { + "value": "rgba(255, 255, 255, 0.28)", + "comment": "Третичный цвет текста", + "enabled": false + }, + "textTertiaryHover": { + "value": "#FFFFFFFF", + "comment": "Третичный цвет текста", + "enabled": false + }, + "textTertiaryActive": { + "value": "#FFFFFF56", + "comment": "Третичный цвет текста", + "enabled": false + }, + "textParagraph": { + "value": "rgba(255, 255, 255, 0.8)", + "comment": "Сплошной наборный текст", + "enabled": false + }, + "textParagraphHover": { + "value": "#FFFFFF7A", + "comment": "Сплошной наборный текст", + "enabled": false + }, + "textParagraphActive": { + "value": "#FFFFFFA3", + "comment": "Сплошной наборный текст", + "enabled": false + }, + "textAccent": { + "value": "[general.herbal.500]", + "comment": "Акцентный цвет", + "enabled": true + }, + "textAccentHover": { + "value": "#0EB90EFF", + "comment": "Акцентный цвет", + "enabled": false + }, + "textAccentActive": { + "value": "#0A800AFF", + "comment": "Акцентный цвет", + "enabled": false + }, + "textAccentGradient": { + "value": "#FFFFFF", + "comment": "Акцентный цвет с градиентом", + "enabled": false + }, + "textAccentGradientHover": { + "value": "#CCCCCCFF", + "comment": "Акцентный цвет с градиентом", + "enabled": false + }, + "textAccentGradientActive": { + "value": "#E6E6E6FF", + "comment": "Акцентный цвет с градиентом", + "enabled": false + }, + "textAccentMinor": { + "value": "[general.herbal.150]", + "comment": "Акцентный минорный цвет", + "enabled": false + }, + "textAccentMinorHover": { + "value": "#B3FFB3FF", + "comment": "Акцентный минорный цвет", + "enabled": false + }, + "textAccentMinorActive": { + "value": "#75FF75FF", + "comment": "Акцентный минорный цвет", + "enabled": false + }, + "textAccentMinorGradient": { + "value": "#FFFFFF", + "comment": "Акцентный минорный цвет с градиентом", + "enabled": false + }, + "textAccentMinorGradientHover": { + "value": "#CCCCCCFF", + "comment": "Акцентный минорный цвет с градиентом", + "enabled": false + }, + "textAccentMinorGradientActive": { + "value": "#E6E6E6FF", + "comment": "Акцентный минорный цвет с градиентом", + "enabled": false + }, + "textPromo": { + "value": "#FFFFFF", + "comment": "Промо цвет", + "enabled": false + }, + "textPromoHover": { + "value": "#CCCCCCFF", + "comment": "Промо цвет", + "enabled": false + }, + "textPromoActive": { + "value": "#E6E6E6FF", + "comment": "Промо цвет", + "enabled": false + }, + "textPromoGradient": { + "value": "#FFFFFF", + "comment": "Промо цвет с градиентом", + "enabled": false + }, + "textPromoGradientHover": { + "value": "#CCCCCCFF", + "comment": "Промо цвет с градиентом", + "enabled": false + }, + "textPromoGradientActive": { + "value": "#E6E6E6FF", + "comment": "Промо цвет с градиентом", + "enabled": false + }, + "textPromoMinor": { + "value": "#FFFFFF", + "comment": "Минорный промо цвет", + "enabled": false + }, + "textPromoMinorHover": { + "value": "#CCCCCCFF", + "comment": "Минорный промо цвет", + "enabled": false + }, + "textPromoMinorActive": { + "value": "#E6E6E6FF", + "comment": "Минорный промо цвет", + "enabled": false + }, + "textPromoMinorGradient": { + "value": "#FFFFFF", + "comment": "Минорный промо цвет с градиентом", + "enabled": false + }, + "textPromoMinorGradientHover": { + "value": "#CCCCCCFF", + "comment": "Минорный промо цвет с градиентом", + "enabled": false + }, + "textPromoMinorGradientActive": { + "value": "#E6E6E6FF", + "comment": "Минорный промо цвет с градиентом", + "enabled": false + }, + "textPositive": { + "value": "[general.green.500]", + "comment": "Цвет успеха", + "enabled": true + }, + "textPositiveHover": { + "value": "#1EB83AFF", + "comment": "Цвет успеха", + "enabled": false + }, + "textPositiveActive": { + "value": "#15842AFF", + "comment": "Цвет успеха", + "enabled": false + }, + "textWarning": { + "value": "[general.orange.500]", + "comment": "Цвет предупреждения", + "enabled": false + }, + "textWarningHover": { + "value": "#FB7223FF", + "comment": "Цвет предупреждения", + "enabled": false + }, + "textWarningActive": { + "value": "#DC5304FF", + "comment": "Цвет предупреждения", + "enabled": false + }, + "textNegative": { + "value": "[general.red.500]", + "comment": "Цвет ошибки", + "enabled": true + }, + "textNegativeHover": { + "value": "#FF475AFF", + "comment": "Цвет ошибки", + "enabled": false + }, + "textNegativeActive": { + "value": "#FF0A23FF", + "comment": "Цвет ошибки", + "enabled": false + }, + "textInfo": { + "value": "[general.blue.500]", + "comment": "Цвет информации", + "enabled": false + }, + "textInfoHover": { + "value": "#50B1F2FF", + "comment": "Цвет информации", + "enabled": false + }, + "textInfoActive": { + "value": "#0F7BC2FF", + "comment": "Цвет информации", + "enabled": false + }, + "textPositiveMinor": { + "value": "[general.green.150]", + "comment": "Минорный цвет успеха", + "enabled": false + }, + "textPositiveMinorHover": { + "value": "#64F77FFF", + "comment": "Минорный цвет успеха", + "enabled": false + }, + "textPositiveMinorActive": { + "value": "#81F897FF", + "comment": "Минорный цвет успеха", + "enabled": false + }, + "textWarningMinor": { + "value": "[general.orange.150]", + "comment": "Минорный цвет предупреждения", + "enabled": false + }, + "textWarningMinorHover": { + "value": "#FDBC96FF", + "comment": "Минорный цвет предупреждения", + "enabled": false + }, + "textWarningMinorActive": { + "value": "#FDCFB4FF", + "comment": "Минорный цвет предупреждения", + "enabled": false + }, + "textNegativeMinor": { + "value": "[general.red.150]", + "comment": "Минорный цвет ошибки", + "enabled": false + }, + "textNegativeMinorHover": { + "value": "#FFA3ACFF", + "comment": "Минорный цвет ошибки", + "enabled": false + }, + "textNegativeMinorActive": { + "value": "#FFC2C8FF", + "comment": "Минорный цвет ошибки", + "enabled": false + }, + "textInfoMinor": { + "value": "[general.blue.150]", + "comment": "Минорный цвет информации", + "enabled": false + }, + "textInfoMinorHover": { + "value": "#94D4FFFF", + "comment": "Минорный цвет информации", + "enabled": false + }, + "textInfoMinorActive": { + "value": "#B3E0FFFF", + "comment": "Минорный цвет информации", + "enabled": false + } + }, + "onDark": { + "textPrimary": { + "value": "rgba(255, 255, 255, 0.96)", + "comment": "Основной цвет текста на темном фоне", + "enabled": true + }, + "textPrimaryHover": { + "value": "#FFFFFF93", + "comment": "Основной цвет текста на темном фоне", + "enabled": false + }, + "textPrimaryActive": { + "value": "#FFFFFFC4", + "comment": "Основной цвет текста на темном фоне", + "enabled": false + }, + "textSecondary": { + "value": "rgba(255, 255, 255, 0.56)", + "comment": "Вторичный цвет текста на темном фоне", + "enabled": true + }, + "textSecondaryHover": { + "value": "#FFFFFFFF", + "comment": "Вторичный цвет текста на темном фоне", + "enabled": false + }, + "textSecondaryActive": { + "value": "#FFFFFFAB", + "comment": "Вторичный цвет текста на темном фоне", + "enabled": false + }, + "textTertiary": { + "value": "rgba(255, 255, 255, 0.28)", + "comment": "Третичный цвет текста на темном фоне", + "enabled": false + }, + "textTertiaryHover": { + "value": "#FFFFFFFF", + "comment": "Третичный цвет текста на темном фоне", + "enabled": false + }, + "textTertiaryActive": { + "value": "#FFFFFF56", + "comment": "Третичный цвет текста на темном фоне", + "enabled": false + }, + "textParagraph": { + "value": "rgba(255, 255, 255, 0.8)", + "comment": "Сплошной наборный текст на темном фоне", + "enabled": false + }, + "textParagraphHover": { + "value": "#FFFFFF7A", + "comment": "Сплошной наборный текст на темном фоне", + "enabled": false + }, + "textParagraphActive": { + "value": "#FFFFFFA3", + "comment": "Сплошной наборный текст на темном фоне", + "enabled": false + }, + "textAccent": { + "value": "[general.herbal.500]", + "comment": "Акцентный цвет на темном фоне", + "enabled": true + }, + "textAccentHover": { + "value": "#0EB90EFF", + "comment": "Акцентный цвет на темном фоне", + "enabled": false + }, + "textAccentActive": { + "value": "#0A800AFF", + "comment": "Акцентный цвет на темном фоне", + "enabled": false + }, + "textAccentGradient": { + "value": "#FFFFFF", + "comment": "Акцентный цвет с градиентом на темном фоне", + "enabled": false + }, + "textAccentGradientHover": { + "value": "#CCCCCCFF", + "comment": "Акцентный цвет с градиентом на темном фоне", + "enabled": false + }, + "textAccentGradientActive": { + "value": "#E6E6E6FF", + "comment": "Акцентный цвет с градиентом на темном фоне", + "enabled": false + }, + "textAccentMinor": { + "value": "[general.herbal.150]", + "comment": "Акцентный минорный цвет на темном фоне", + "enabled": true + }, + "textAccentMinorHover": { + "value": "#B3FFB3FF", + "comment": "Акцентный минорный цвет на темном фоне", + "enabled": false + }, + "textAccentMinorActive": { + "value": "#75FF75FF", + "comment": "Акцентный минорный цвет на темном фоне", + "enabled": false + }, + "textAccentMinorGradient": { + "value": "#FFFFFF", + "comment": "Акцентный минорный цвет с градиентом на темном фоне", + "enabled": false + }, + "textAccentMinorGradientHover": { + "value": "#CCCCCCFF", + "comment": "Акцентный минорный цвет с градиентом на темном фоне", + "enabled": false + }, + "textAccentMinorGradientActive": { + "value": "#E6E6E6FF", + "comment": "Акцентный минорный цвет с градиентом на темном фоне", + "enabled": false + }, + "textPromo": { + "value": "#FFFFFF", + "comment": "Промо цвет на темном фоне", + "enabled": false + }, + "textPromoHover": { + "value": "#CCCCCCFF", + "comment": "Промо цвет на темном фоне", + "enabled": false + }, + "textPromoActive": { + "value": "#E6E6E6FF", + "comment": "Промо цвет на темном фоне", + "enabled": false + }, + "textPromoGradient": { + "value": "#FFFFFF", + "comment": "Промо цвет на темном фоне с градиентом", + "enabled": false + }, + "textPromoGradientHover": { + "value": "#CCCCCCFF", + "comment": "Промо цвет на темном фоне с градиентом", + "enabled": false + }, + "textPromoGradientActive": { + "value": "#E6E6E6FF", + "comment": "Промо цвет на темном фоне с градиентом", + "enabled": false + }, + "textPromoMinor": { + "value": "#FFFFFF", + "comment": "Минорный промо цвет на темном фоне", + "enabled": false + }, + "textPromoMinorHover": { + "value": "#CCCCCCFF", + "comment": "Минорный промо цвет на темном фоне", + "enabled": false + }, + "textPromoMinorActive": { + "value": "#E6E6E6FF", + "comment": "Минорный промо цвет на темном фоне", + "enabled": false + }, + "textPromoMinorGradient": { + "value": "#FFFFFF", + "comment": "Минорный промо цвет на темном фоне с градиентом", + "enabled": false + }, + "textPromoMinorGradientHover": { + "value": "#CCCCCCFF", + "comment": "Минорный промо цвет на темном фоне с градиентом", + "enabled": false + }, + "textPromoMinorGradientActive": { + "value": "#E6E6E6FF", + "comment": "Минорный промо цвет на темном фоне с градиентом", + "enabled": false + }, + "textPositive": { + "value": "[general.green.500]", + "comment": "Цвет успеха на темном фоне", + "enabled": true + }, + "textPositiveHover": { + "value": "#1EB83AFF", + "comment": "Цвет успеха на темном фоне", + "enabled": false + }, + "textPositiveActive": { + "value": "#15842AFF", + "comment": "Цвет успеха на темном фоне", + "enabled": false + }, + "textWarning": { + "value": "[general.orange.500]", + "comment": "Цвет предупреждения на темном фоне", + "enabled": false + }, + "textWarningHover": { + "value": "#FB7223FF", + "comment": "Цвет предупреждения на темном фоне", + "enabled": false + }, + "textWarningActive": { + "value": "#DC5304FF", + "comment": "Цвет предупреждения на темном фоне", + "enabled": false + }, + "textNegative": { + "value": "[general.red.500]", + "comment": "Цвет ошибки на темном фоне", + "enabled": true + }, + "textNegativeHover": { + "value": "#FF475AFF", + "comment": "Цвет ошибки на темном фоне", + "enabled": false + }, + "textNegativeActive": { + "value": "#FF0A23FF", + "comment": "Цвет ошибки на темном фоне", + "enabled": false + }, + "textInfo": { + "value": "[general.blue.500]", + "comment": "Цвет информации на темном фоне", + "enabled": false + }, + "textInfoHover": { + "value": "#50B1F2FF", + "comment": "Цвет информации на темном фоне", + "enabled": false + }, + "textInfoActive": { + "value": "#0F7BC2FF", + "comment": "Цвет информации на темном фоне", + "enabled": false + }, + "textPositiveMinor": { + "value": "[general.green.150]", + "comment": "Минорный цвет успеха на темном фоне", + "enabled": false + }, + "textPositiveMinorHover": { + "value": "#64F77FFF", + "comment": "Минорный цвет успеха на темном фоне", + "enabled": false + }, + "textPositiveMinorActive": { + "value": "#81F897FF", + "comment": "Минорный цвет успеха на темном фоне", + "enabled": false + }, + "textWarningMinor": { + "value": "[general.orange.150]", + "comment": "Минорный цвет предупреждения на темном фоне", + "enabled": false + }, + "textWarningMinorHover": { + "value": "#FDBC96FF", + "comment": "Минорный цвет предупреждения на темном фоне", + "enabled": false + }, + "textWarningMinorActive": { + "value": "#FDCFB4FF", + "comment": "Минорный цвет предупреждения на темном фоне", + "enabled": false + }, + "textNegativeMinor": { + "value": "[general.red.150]", + "comment": "Минорный цвет ошибки на темном фоне", + "enabled": false + }, + "textNegativeMinorHover": { + "value": "#FFA3ACFF", + "comment": "Минорный цвет ошибки на темном фоне", + "enabled": false + }, + "textNegativeMinorActive": { + "value": "#FFC2C8FF", + "comment": "Минорный цвет ошибки на темном фоне", + "enabled": false + }, + "textInfoMinor": { + "value": "[general.blue.150]", + "comment": "Минорный цвет информации на темном фоне", + "enabled": false + }, + "textInfoMinorHover": { + "value": "#94D4FFFF", + "comment": "Минорный цвет информации на темном фоне", + "enabled": false + }, + "textInfoMinorActive": { + "value": "#B3E0FFFF", + "comment": "Минорный цвет информации на темном фоне", + "enabled": false + } + }, + "onLight": { + "textPrimary": { + "value": "[general.coolGray.1000][-0.0400]", + "comment": "Основной цвет текста на светлом фоне", + "enabled": false + }, + "textPrimaryHover": { + "value": "#070B0E93", + "comment": "Основной цвет текста на светлом фоне", + "enabled": false + }, + "textPrimaryActive": { + "value": "#070B0EC4", + "comment": "Основной цвет текста на светлом фоне", + "enabled": false + }, + "textSecondary": { + "value": "[general.coolGray.1000][-0.440]", + "comment": "Вторичный цвет текста на светлом фоне", + "enabled": false + }, + "textSecondaryHover": { + "value": "#070B0EFF", + "comment": "Вторичный цвет текста на светлом фоне", + "enabled": false + }, + "textSecondaryActive": { + "value": "#070B0EAB", + "comment": "Вторичный цвет текста на светлом фоне", + "enabled": false + }, + "textTertiary": { + "value": "[general.coolGray.1000][-0.720]", + "comment": "Третичный цвет текста на светлом фоне", + "enabled": false + }, + "textTertiaryHover": { + "value": "#070B0EFF", + "comment": "Третичный цвет текста на светлом фоне", + "enabled": false + }, + "textTertiaryActive": { + "value": "#070B0E56", + "comment": "Третичный цвет текста на светлом фоне", + "enabled": false + }, + "textParagraph": { + "value": "[general.coolGray.1000][-0.200]", + "comment": "Сплошной наборный текст на светлом фоне", + "enabled": false + }, + "textParagraphHover": { + "value": "#070B0E7A", + "comment": "Сплошной наборный текст на светлом фоне", + "enabled": false + }, + "textParagraphActive": { + "value": "#070B0EA3", + "comment": "Сплошной наборный текст на светлом фоне", + "enabled": false + }, + "textAccent": { + "value": "[general.herbal.700]", + "comment": "Акцентный цвет на светлом фоне", + "enabled": false + }, + "textAccentHover": { + "value": "#17BA17FF", + "comment": "Акцентный цвет на светлом фоне", + "enabled": false + }, + "textAccentActive": { + "value": "#149F14FF", + "comment": "Акцентный цвет на светлом фоне", + "enabled": false + }, + "textAccentGradient": { + "value": "#FFFFFF", + "comment": "Акцентный цвет с градиентом на светлом фоне", + "enabled": false + }, + "textAccentGradientHover": { + "value": "#CCCCCCFF", + "comment": "Акцентный цвет с градиентом на светлом фоне", + "enabled": false + }, + "textAccentGradientActive": { + "value": "#E6E6E6FF", + "comment": "Акцентный цвет с градиентом на светлом фоне", + "enabled": false + }, + "textAccentMinor": { + "value": "[general.herbal.900]", + "comment": "Акцентный минорный цвет на светлом фоне", + "enabled": false + }, + "textAccentMinorHover": { + "value": "#115F11FF", + "comment": "Акцентный минорный цвет на светлом фоне", + "enabled": false + }, + "textAccentMinorActive": { + "value": "#0D450DFF", + "comment": "Акцентный минорный цвет на светлом фоне", + "enabled": false + }, + "textAccentMinorGradient": { + "value": "#FFFFFF", + "comment": "Акцентный минорный цвет с градиентом на светлом фоне", + "enabled": false + }, + "textAccentMinorGradientHover": { + "value": "#CCCCCCFF", + "comment": "Акцентный минорный цвет с градиентом на светлом фоне", + "enabled": false + }, + "textAccentMinorGradientActive": { + "value": "#E6E6E6FF", + "comment": "Акцентный минорный цвет с градиентом на светлом фоне", + "enabled": false + }, + "textPromo": { + "value": "#FFFFFF", + "comment": "Промо цвет на светлом фоне", + "enabled": false + }, + "textPromoHover": { + "value": "#CCCCCCFF", + "comment": "Промо цвет на светлом фоне", + "enabled": false + }, + "textPromoActive": { + "value": "#E6E6E6FF", + "comment": "Промо цвет на светлом фоне", + "enabled": false + }, + "textPromoGradient": { + "value": "#FFFFFF", + "comment": "Промо цвет на светлом фоне с градиентом", + "enabled": false + }, + "textPromoGradientHover": { + "value": "#CCCCCCFF", + "comment": "Промо цвет на светлом фоне с градиентом", + "enabled": false + }, + "textPromoGradientActive": { + "value": "#E6E6E6FF", + "comment": "Промо цвет на светлом фоне с градиентом", + "enabled": false + }, + "textPromoMinor": { + "value": "#FFFFFF", + "comment": "Минорный промо цвет на светлом фоне", + "enabled": false + }, + "textPromoMinorHover": { + "value": "#CCCCCCFF", + "comment": "Минорный промо цвет на светлом фоне", + "enabled": false + }, + "textPromoMinorActive": { + "value": "#E6E6E6FF", + "comment": "Минорный промо цвет на светлом фоне", + "enabled": false + }, + "textPromoMinorGradient": { + "value": "#FFFFFF", + "comment": "Минорный промо цвет на светлом фоне с градиентом", + "enabled": false + }, + "textPromoMinorGradientHover": { + "value": "#CCCCCCFF", + "comment": "Минорный промо цвет на светлом фоне с градиентом", + "enabled": false + }, + "textPromoMinorGradientActive": { + "value": "#E6E6E6FF", + "comment": "Минорный промо цвет на светлом фоне с градиентом", + "enabled": false + }, + "textPositive": { + "value": "[general.green.600]", + "comment": "Цвет успеха на светлом фоне", + "enabled": false + }, + "textPositiveHover": { + "value": "#13AA2CFF", + "comment": "Цвет успеха на светлом фоне", + "enabled": false + }, + "textPositiveActive": { + "value": "#0D731EFF", + "comment": "Цвет успеха на светлом фоне", + "enabled": false + }, + "textWarning": { + "value": "[general.orange.600]", + "comment": "Цвет предупреждения на светлом фоне", + "enabled": false + }, + "textWarningHover": { + "value": "#FD650DFF", + "comment": "Цвет предупреждения на светлом фоне", + "enabled": false + }, + "textWarningActive": { + "value": "#CA4B02FF", + "comment": "Цвет предупреждения на светлом фоне", + "enabled": false + }, + "textNegative": { + "value": "[general.red.600]", + "comment": "Цвет ошибки на светлом фоне", + "enabled": false + }, + "textNegativeHover": { + "value": "#F5384BFF", + "comment": "Цвет ошибки на светлом фоне", + "enabled": false + }, + "textNegativeActive": { + "value": "#E40C22FF", + "comment": "Цвет ошибки на светлом фоне", + "enabled": false + }, + "textInfo": { + "value": "[general.blue.600]", + "comment": "Цвет информации на светлом фоне", + "enabled": false + }, + "textInfoHover": { + "value": "#34A7F4FF", + "comment": "Цвет информации на светлом фоне", + "enabled": false + }, + "textInfoActive": { + "value": "#096CAEFF", + "comment": "Цвет информации на светлом фоне", + "enabled": false + }, + "textPositiveMinor": { + "value": "[general.green.900]", + "comment": "Минорный цвет успеха на светлом фоне", + "enabled": false + }, + "textPositiveMinorHover": { + "value": "#155B22FF", + "comment": "Минорный цвет успеха на светлом фоне", + "enabled": false + }, + "textPositiveMinorActive": { + "value": "#104219FF", + "comment": "Минорный цвет успеха на светлом фоне", + "enabled": false + }, + "textWarningMinor": { + "value": "[general.orange.900]", + "comment": "Минорный цвет предупреждения на светлом фоне", + "enabled": false + }, + "textWarningMinorHover": { + "value": "#723613FF", + "comment": "Минорный цвет предупреждения на светлом фоне", + "enabled": false + }, + "textWarningMinorActive": { + "value": "#58290EFF", + "comment": "Минорный цвет предупреждения на светлом фоне", + "enabled": false + }, + "textNegativeMinor": { + "value": "[general.red.900]", + "comment": "Минорный цвет ошибки на светлом фоне", + "enabled": false + }, + "textNegativeMinorHover": { + "value": "#7E1621FF", + "comment": "Минорный цвет ошибки на светлом фоне", + "enabled": false + }, + "textNegativeMinorActive": { + "value": "#64121AFF", + "comment": "Минорный цвет ошибки на светлом фоне", + "enabled": false + }, + "textInfoMinor": { + "value": "[general.blue.900]", + "comment": "Минорный цвет информации на светлом фоне", + "enabled": false + }, + "textInfoMinorHover": { + "value": "#174B6EFF", + "comment": "Минорный цвет информации на светлом фоне", + "enabled": false + }, + "textInfoMinorActive": { + "value": "#113A55FF", + "comment": "Минорный цвет информации на светлом фоне", + "enabled": false + } + }, + "inverse": { + "textPrimary": { + "value": "[general.coolGray.1000][-0.0400]", + "comment": "Инвертированный основной цвет текста", + "enabled": true + }, + "textPrimaryHover": { + "value": "#070B0E93", + "comment": "Инвертированный основной цвет текста", + "enabled": false + }, + "textPrimaryActive": { + "value": "#070B0EC4", + "comment": "Инвертированный основной цвет текста", + "enabled": false + }, + "textSecondary": { + "value": "[general.coolGray.1000][-0.440]", + "comment": "Инвертированный вторичный цвет текста", + "enabled": true + }, + "textSecondaryHover": { + "value": "#070B0EFF", + "comment": "Инвертированный вторичный цвет текста", + "enabled": false + }, + "textSecondaryActive": { + "value": "#070B0EAB", + "comment": "Инвертированный вторичный цвет текста", + "enabled": false + }, + "textTertiary": { + "value": "[general.coolGray.1000][-0.720]", + "comment": "Инвертированный третичный цвет текста", + "enabled": false + }, + "textTertiaryHover": { + "value": "#070B0EFF", + "comment": "Инвертированный третичный цвет текста", + "enabled": false + }, + "textTertiaryActive": { + "value": "#070B0E56", + "comment": "Инвертированный третичный цвет текста", + "enabled": false + }, + "textParagraph": { + "value": "[general.coolGray.1000][-0.200]", + "comment": "Инвертированный сплошной наборный текст", + "enabled": false + }, + "textParagraphHover": { + "value": "#070B0E7A", + "comment": "Инвертированный сплошной наборный текст", + "enabled": false + }, + "textParagraphActive": { + "value": "#070B0EA3", + "comment": "Инвертированный сплошной наборный текст", + "enabled": false + }, + "textAccent": { + "value": "[general.herbal.700]", + "comment": "Инвертированный акцентный цвет", + "enabled": true + }, + "textAccentHover": { + "value": "#17BA17FF", + "comment": "Инвертированный акцентный цвет", + "enabled": false + }, + "textAccentActive": { + "value": "#149F14FF", + "comment": "Инвертированный акцентный цвет", + "enabled": false + }, + "textAccentGradient": { + "value": "#FFFFFF", + "comment": "Инвертированный акцентный цвет с градиентом", + "enabled": false + }, + "textAccentGradientHover": { + "value": "#CCCCCCFF", + "comment": "Инвертированный акцентный цвет с градиентом", + "enabled": false + }, + "textAccentGradientActive": { + "value": "#E6E6E6FF", + "comment": "Инвертированный акцентный цвет с градиентом", + "enabled": false + }, + "textAccentMinor": { + "value": "[general.herbal.900]", + "comment": "Инвертированный минорный акцентный цвет", + "enabled": true + }, + "textAccentMinorHover": { + "value": "#115F11FF", + "comment": "Инвертированный минорный акцентный цвет", + "enabled": false + }, + "textAccentMinorActive": { + "value": "#0D450DFF", + "comment": "Инвертированный минорный акцентный цвет", + "enabled": false + }, + "textAccentMinorGradient": { + "value": "#FFFFFF", + "comment": "Инвертированный акцентный минорный цвет с градиентом", + "enabled": false + }, + "textAccentMinorGradientHover": { + "value": "#CCCCCCFF", + "comment": "Инвертированный акцентный минорный цвет с градиентом", + "enabled": false + }, + "textAccentMinorGradientActive": { + "value": "#E6E6E6FF", + "comment": "Инвертированный акцентный минорный цвет с градиентом", + "enabled": false + }, + "textPromo": { + "value": "#FFFFFF", + "comment": "Инвертированный промо цвет", + "enabled": false + }, + "textPromoHover": { + "value": "#CCCCCCFF", + "comment": "Инвертированный промо цвет", + "enabled": false + }, + "textPromoActive": { + "value": "#E6E6E6FF", + "comment": "Инвертированный промо цвет", + "enabled": false + }, + "textPromoGradient": { + "value": "#FFFFFF", + "comment": "Инвертированный промо цвет с градиентом", + "enabled": false + }, + "textPromoGradientHover": { + "value": "#CCCCCCFF", + "comment": "Инвертированный промо цвет с градиентом", + "enabled": false + }, + "textPromoGradientActive": { + "value": "#E6E6E6FF", + "comment": "Инвертированный промо цвет с градиентом", + "enabled": false + }, + "textPromoMinor": { + "value": "#FFFFFF", + "comment": "Инвертированный минорный промо цвет", + "enabled": false + }, + "textPromoMinorHover": { + "value": "#CCCCCCFF", + "comment": "Инвертированный минорный промо цвет", + "enabled": false + }, + "textPromoMinorActive": { + "value": "#E6E6E6FF", + "comment": "Инвертированный минорный промо цвет", + "enabled": false + }, + "textPromoMinorGradient": { + "value": "#FFFFFF", + "comment": "Инвертированный минорный промо цвет с градиентом", + "enabled": false + }, + "textPromoMinorGradientHover": { + "value": "#CCCCCCFF", + "comment": "Инвертированный минорный промо цвет с градиентом", + "enabled": false + }, + "textPromoMinorGradientActive": { + "value": "#E6E6E6FF", + "comment": "Инвертированный минорный промо цвет с градиентом", + "enabled": false + }, + "textPositive": { + "value": "[general.green.600]", + "comment": "Инвертированный цвет успеха", + "enabled": true + }, + "textPositiveHover": { + "value": "#13AA2CFF", + "comment": "Инвертированный цвет успеха", + "enabled": false + }, + "textPositiveActive": { + "value": "#0D731EFF", + "comment": "Инвертированный цвет успеха", + "enabled": false + }, + "textWarning": { + "value": "[general.orange.600]", + "comment": "Инвертированный цвет предупреждения", + "enabled": false + }, + "textWarningHover": { + "value": "#FD650DFF", + "comment": "Инвертированный цвет предупреждения", + "enabled": false + }, + "textWarningActive": { + "value": "#CA4B02FF", + "comment": "Инвертированный цвет предупреждения", + "enabled": false + }, + "textNegative": { + "value": "[general.red.600]", + "comment": "Инвертированный цвет ошибки", + "enabled": true + }, + "textNegativeHover": { + "value": "#F5384BFF", + "comment": "Инвертированный цвет ошибки", + "enabled": false + }, + "textNegativeActive": { + "value": "#E40C22FF", + "comment": "Инвертированный цвет ошибки", + "enabled": false + }, + "textInfo": { + "value": "[general.blue.600]", + "comment": "Инвертированный цвет информации", + "enabled": false + }, + "textInfoHover": { + "value": "#34A7F4FF", + "comment": "Инвертированный цвет информации", + "enabled": false + }, + "textInfoActive": { + "value": "#096CAEFF", + "comment": "Инвертированный цвет информации", + "enabled": false + }, + "textPositiveMinor": { + "value": "[general.green.900]", + "comment": "Инвертированный минорный цвет успеха", + "enabled": false + }, + "textPositiveMinorHover": { + "value": "#155B22FF", + "comment": "Инвертированный минорный цвет успеха", + "enabled": false + }, + "textPositiveMinorActive": { + "value": "#104219FF", + "comment": "Инвертированный минорный цвет успеха", + "enabled": false + }, + "textWarningMinor": { + "value": "[general.orange.900]", + "comment": "Инвертированный минорный цвет предупреждения", + "enabled": false + }, + "textWarningMinorHover": { + "value": "#723613FF", + "comment": "Инвертированный минорный цвет предупреждения", + "enabled": false + }, + "textWarningMinorActive": { + "value": "#58290EFF", + "comment": "Инвертированный минорный цвет предупреждения", + "enabled": false + }, + "textNegativeMinor": { + "value": "[general.red.900]", + "comment": "Инвертированный минорный цвет ошибки", + "enabled": false + }, + "textNegativeMinorHover": { + "value": "#7E1621FF", + "comment": "Инвертированный минорный цвет ошибки", + "enabled": false + }, + "textNegativeMinorActive": { + "value": "#64121AFF", + "comment": "Инвертированный минорный цвет ошибки", + "enabled": false + }, + "textInfoMinor": { + "value": "[general.blue.900]", + "comment": "Инвертированный минорный цвет информации", + "enabled": false + }, + "textInfoMinorHover": { + "value": "#174B6EFF", + "comment": "Инвертированный минорный цвет информации", + "enabled": false + }, + "textInfoMinorActive": { + "value": "#113A55FF", + "comment": "Инвертированный минорный цвет информации", + "enabled": false + } + } + }, + "surface": { + "default": { + "surfaceSolidPrimary": { + "value": "[general.coolGray.950]", + "comment": "Основной непрозрачный фон поверхности/контрола", + "enabled": true + }, + "surfaceSolidPrimaryHover": { + "value": "#171D21FF", + "comment": "Основной непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceSolidPrimaryActive": { + "value": "#0F1315FF", + "comment": "Основной непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceSolidSecondary": { + "value": "[general.coolGray.900]", + "comment": "Вторичный непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceSolidSecondaryHover": { + "value": "#2C343AFF", + "comment": "Вторичный непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceSolidSecondaryActive": { + "value": "#1F2528FF", + "comment": "Вторичный непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceSolidTertiary": { + "value": "[general.coolGray.850]", + "comment": "Третичный непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceSolidTertiaryHover": { + "value": "#394147FF", + "comment": "Третичный непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceSolidTertiaryActive": { + "value": "#2B3136FF", + "comment": "Третичный непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceSolidCard": { + "value": "[general.coolGray.950]", + "comment": "Основной фон для карточек", + "enabled": true + }, + "surfaceSolidCardHover": { + "value": "#171D21FF", + "comment": "Основной фон для карточек", + "enabled": false + }, + "surfaceSolidCardActive": { + "value": "#0F1315FF", + "comment": "Основной фон для карточек", + "enabled": false + }, + "surfaceSolidDefault": { + "value": "[general.coolGray.50]", + "comment": "Непрозрачный фон поверхности/контрола по умолчанию", + "enabled": true + }, + "surfaceSolidDefaultHover": { + "value": "#FFFFFFFF", + "comment": "Непрозрачный фон поверхности/контрола по умолчанию", + "enabled": false + }, + "surfaceSolidDefaultActive": { + "value": "#F1F5F8FF", + "comment": "Непрозрачный фон поверхности/контрола по умолчанию", + "enabled": false + }, + "surfaceTransparentPrimary": { + "value": "[general.coolGray.50][-0.940]", + "comment": "Основной прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentPrimaryHover": { + "value": "#F8FAFC1F", + "comment": "Основной прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentPrimaryActive": { + "value": "#F8FAFC0A", + "comment": "Основной прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentSecondary": { + "value": "[general.coolGray.50][-0.880]", + "comment": "Вторичный прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentSecondaryHover": { + "value": "#F8FAFC3D", + "comment": "Вторичный прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentSecondaryActive": { + "value": "#F8FAFC0F", + "comment": "Вторичный прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentTertiary": { + "value": "[general.coolGray.50][-0.800]", + "comment": "Третичный прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentTertiaryHover": { + "value": "#F8FAFC52", + "comment": "Третичный прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentTertiaryActive": { + "value": "#F8FAFC24", + "comment": "Третичный прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentDeep": { + "value": "[general.coolGray.50][-0.360]", + "comment": "Глубокий прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentDeepHover": { + "value": "#F8FAFCC2", + "comment": "Глубокий прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentDeepActive": { + "value": "#F8FAFC94", + "comment": "Глубокий прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentCard": { + "value": "[general.coolGray.50][-0.940]", + "comment": "Прозрачный фон для карточек", + "enabled": false + }, + "surfaceTransparentCardHover": { + "value": "#F8FAFC1F", + "comment": "Прозрачный фон для карточек", + "enabled": false + }, + "surfaceTransparentCardActive": { + "value": "#F8FAFC0A", + "comment": "Прозрачный фон для карточек", + "enabled": false + }, + "surfaceClear": { + "value": "#FFFFFF00", + "comment": "Фон поверхности/контрола без заливки", + "enabled": false + }, + "surfaceClearHover": { + "value": "#FFFFFF00", + "comment": "Фон поверхности/контрола без заливки", + "enabled": false + }, + "surfaceClearActive": { + "value": "#FFFFFF00", + "comment": "Фон поверхности/контрола без заливки", + "enabled": false + }, + "surfaceAccent": { + "value": "[general.herbal.500]", + "comment": "Акцентный фон поверхности/контрола", + "enabled": true + }, + "surfaceAccentHover": { + "value": "#0DAF0DFF", + "comment": "Акцентный фон поверхности/контрола", + "enabled": false + }, + "surfaceAccentActive": { + "value": "#0B930BFF", + "comment": "Акцентный фон поверхности/контрола", + "enabled": false + }, + "surfaceAccentGradient": { + "value": "#FFFFFF", + "comment": "Акцентный фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceAccentGradientHover": { + "value": "#FFFFFFFF", + "comment": "Акцентный фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceAccentGradientActive": { + "value": "#FFFFFFFF", + "comment": "Акцентный фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceAccentMinor": { + "value": "[general.herbal.900]", + "comment": "Акцентный минорный непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceAccentMinorHover": { + "value": "#0B3C0BFF", + "comment": "Акцентный минорный непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceAccentMinorActive": { + "value": "#062206FF", + "comment": "Акцентный минорный непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceAccentMinorGradient": { + "value": "#FFFFFF", + "comment": "Акцентный минорный фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceAccentMinorGradientHover": { + "value": "#FFFFFFFF", + "comment": "Акцентный минорный фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceAccentMinorGradientActive": { + "value": "#FFFFFFFF", + "comment": "Акцентный минорный фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceTransparentAccent": { + "value": "[general.herbal.500][-0.72]", + "comment": "Прозрачный акцентный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentAccentHover": { + "value": "#0C9D0C66", + "comment": "Прозрачный акцентный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentAccentActive": { + "value": "#0C9D0C38", + "comment": "Прозрачный акцентный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentAccentGradient": { + "value": "#FFFFFF", + "comment": "Прозрачный акцентный фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceTransparentAccentGradientHover": { + "value": "#FFFFFFFF", + "comment": "Прозрачный акцентный фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceTransparentAccentGradientActive": { + "value": "#FFFFFFFF", + "comment": "Прозрачный акцентный фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfacePromo": { + "value": "#FFFFFF", + "comment": "Промо фон поверхности/контрола", + "enabled": false + }, + "surfacePromoHover": { + "value": "#FFFFFFFF", + "comment": "Промо фон поверхности/контрола", + "enabled": false + }, + "surfacePromoActive": { + "value": "#FFFFFFFF", + "comment": "Промо фон поверхности/контрола", + "enabled": false + }, + "surfacePromoGradient": { + "value": "#FFFFFF", + "comment": "Промо фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfacePromoGradientHover": { + "value": "#FFFFFFFF", + "comment": "Промо фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfacePromoGradientActive": { + "value": "#FFFFFFFF", + "comment": "Промо фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfacePromoMinor": { + "value": "#FFFFFF", + "comment": "Минорный промо фон поверхности/контрола", + "enabled": false + }, + "surfacePromoMinorHover": { + "value": "#FFFFFFFF", + "comment": "Минорный промо фон поверхности/контрола", + "enabled": false + }, + "surfacePromoMinorActive": { + "value": "#FFFFFFFF", + "comment": "Минорный промо фон поверхности/контрола", + "enabled": false + }, + "surfacePromoMinorGradient": { + "value": "#FFFFFF", + "comment": "Минорный промо фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfacePromoMinorGradientHover": { + "value": "#FFFFFFFF", + "comment": "Минорный промо фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfacePromoMinorGradientActive": { + "value": "#FFFFFFFF", + "comment": "Минорный промо фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceTransparentPromo": { + "value": "#FFFFFF", + "comment": "Прозрачный промо фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentPromoHover": { + "value": "#FFFFFFFF", + "comment": "Прозрачный промо фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentPromoActive": { + "value": "#FFFFFFFF", + "comment": "Прозрачный промо фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentPromoGradient": { + "value": "#FFFFFF", + "comment": "Прозрачный промо фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceTransparentPromoGradientHover": { + "value": "#FFFFFFFF", + "comment": "Прозрачный промо фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceTransparentPromoGradientActive": { + "value": "#FFFFFFFF", + "comment": "Прозрачный промо фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfacePositive": { + "value": "[general.green.500]", + "comment": "Цвет фона поверхности/контрола успех", + "enabled": true + }, + "surfacePositiveHover": { + "value": "#1DAF37FF", + "comment": "Цвет фона поверхности/контрола успех", + "enabled": false + }, + "surfacePositiveActive": { + "value": "#18952FFF", + "comment": "Цвет фона поверхности/контрола успех", + "enabled": false + }, + "surfaceWarning": { + "value": "[general.orange.500]", + "comment": "Цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceWarningHover": { + "value": "#FB7223FF", + "comment": "Цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceWarningActive": { + "value": "#F05B05FF", + "comment": "Цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceNegative": { + "value": "[general.red.500]", + "comment": "Цвет фона поверхности/контрола ошибка", + "enabled": true + }, + "surfaceNegativeHover": { + "value": "#FF475AFF", + "comment": "Цвет фона поверхности/контрола ошибка", + "enabled": false + }, + "surfaceNegativeActive": { + "value": "#FF1F35FF", + "comment": "Цвет фона поверхности/контрола ошибка", + "enabled": false + }, + "surfaceInfo": { + "value": "[general.blue.500]", + "comment": "Цвет фона поверхности/контрола информация", + "enabled": true + }, + "surfaceInfoHover": { + "value": "#1798EEFF", + "comment": "Цвет фона поверхности/контрола информация", + "enabled": false + }, + "surfaceInfoActive": { + "value": "#1086D5FF", + "comment": "Цвет фона поверхности/контрола информация", + "enabled": false + }, + "surfacePositiveMinor": { + "value": "[general.green.900]", + "comment": "Минорный цвет фона поверхности/контрола успех", + "enabled": false + }, + "surfacePositiveMinorHover": { + "value": "#0E3A16FF", + "comment": "Минорный цвет фона поверхности/контрола успех", + "enabled": false + }, + "surfacePositiveMinorActive": { + "value": "#08210CFF", + "comment": "Минорный цвет фона поверхности/контрола успех", + "enabled": false + }, + "surfaceWarningMinor": { + "value": "[general.orange.900]", + "comment": "Минорный цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceWarningMinorHover": { + "value": "#4F250DFF", + "comment": "Минорный цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceWarningMinorActive": { + "value": "#351909FF", + "comment": "Минорный цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceNegativeMinor": { + "value": "[general.red.900]", + "comment": "Минорный цвет фона поверхности/контрола ошибка", + "enabled": false + }, + "surfaceNegativeMinorHover": { + "value": "#5B1018FF", + "comment": "Минорный цвет фона поверхности/контрола ошибка", + "enabled": false + }, + "surfaceNegativeMinorActive": { + "value": "#410B11FF", + "comment": "Минорный цвет фона поверхности/контрола ошибка", + "enabled": false + }, + "surfaceInfoMinor": { + "value": "[general.blue.900]", + "comment": "Минорный цвет фона поверхности/контрола информация", + "enabled": false + }, + "surfaceInfoMinorHover": { + "value": "#10344CFF", + "comment": "Минорный цвет фона поверхности/контрола информация", + "enabled": false + }, + "surfaceInfoMinorActive": { + "value": "#0A2333FF", + "comment": "Минорный цвет фона поверхности/контрола информация", + "enabled": false + }, + "surfaceTransparentPositive": { + "value": "[general.green.500][-0.72]", + "comment": "Прозрачный цвет фона поверхности/контрола успех", + "enabled": false + }, + "surfaceTransparentPositiveHover": { + "value": "#1A9E3266", + "comment": "Прозрачный цвет фона поверхности/контрола успех", + "enabled": false + }, + "surfaceTransparentPositiveActive": { + "value": "#1A9E3238", + "comment": "Прозрачный цвет фона поверхности/контрола успех", + "enabled": false + }, + "surfaceTransparentWarning": { + "value": "[general.orange.500][-0.72]", + "comment": "Прозрачный цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceTransparentWarningHover": { + "value": "#FA5F0566", + "comment": "Прозрачный цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceTransparentWarningActive": { + "value": "#FA5F0538", + "comment": "Прозрачный цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceTransparentNegative": { + "value": "[general.red.500][-0.72]", + "comment": "Прозрачный цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceTransparentNegativeHover": { + "value": "#FF293E66", + "comment": "Прозрачный цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceTransparentNegativeActive": { + "value": "#FF293E38", + "comment": "Прозрачный цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceTransparentInfo": { + "value": "[general.blue.500][-0.72]", + "comment": "Прозрачный цвет фона поверхности/контрола информация", + "enabled": false + }, + "surfaceTransparentInfoHover": { + "value": "#118CDF66", + "comment": "Прозрачный цвет фона поверхности/контрола информация", + "enabled": false + }, + "surfaceTransparentInfoActive": { + "value": "#118CDF38", + "comment": "Прозрачный цвет фона поверхности/контрола информация", + "enabled": false + } + }, + "onDark": { + "surfaceSolidPrimary": { + "value": "[general.coolGray.950]", + "comment": "Основной непрозрачный фон поверхности/контрола на темном фоне", + "enabled": true + }, + "surfaceSolidPrimaryHover": { + "value": "#171D21FF", + "comment": "Основной непрозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceSolidPrimaryActive": { + "value": "#0F1315FF", + "comment": "Основной непрозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceSolidSecondary": { + "value": "[general.coolGray.900]", + "comment": "Вторичный непрозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceSolidSecondaryHover": { + "value": "#2C343AFF", + "comment": "Вторичный непрозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceSolidSecondaryActive": { + "value": "#1F2528FF", + "comment": "Вторичный непрозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceSolidTertiary": { + "value": "[general.coolGray.850]", + "comment": "Третичный непрозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceSolidTertiaryHover": { + "value": "#394147FF", + "comment": "Третичный непрозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceSolidTertiaryActive": { + "value": "#2B3136FF", + "comment": "Третичный непрозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceSolidCard": { + "value": "[general.coolGray.950]", + "comment": "Основной фон для карточек на темном фоне", + "enabled": true + }, + "surfaceSolidCardHover": { + "value": "#171D21FF", + "comment": "Основной фон для карточек на темном фоне", + "enabled": false + }, + "surfaceSolidCardActive": { + "value": "#0F1315FF", + "comment": "Основной фон для карточек на темном фоне", + "enabled": false + }, + "surfaceSolidDefault": { + "value": "[general.coolGray.50]", + "comment": "Непрозрачный фон поверхности/контрола по умолчанию на темном фоне", + "enabled": true + }, + "surfaceSolidDefaultHover": { + "value": "#FFFFFFFF", + "comment": "Непрозрачный фон поверхности/контрола по умолчанию на темном фоне", + "enabled": false + }, + "surfaceSolidDefaultActive": { + "value": "#F1F5F8FF", + "comment": "Непрозрачный фон поверхности/контрола по умолчанию на темном фоне", + "enabled": false + }, + "surfaceTransparentPrimary": { + "value": "[general.coolGray.50][-0.940]", + "comment": "Основной прозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceTransparentPrimaryHover": { + "value": "#F8FAFC1F", + "comment": "Основной прозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceTransparentPrimaryActive": { + "value": "#F8FAFC0A", + "comment": "Основной прозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceTransparentSecondary": { + "value": "[general.coolGray.50][-0.880]", + "comment": "Вторичный прозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceTransparentSecondaryHover": { + "value": "#F8FAFC3D", + "comment": "Вторичный прозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceTransparentSecondaryActive": { + "value": "#F8FAFC0F", + "comment": "Вторичный прозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceTransparentTertiary": { + "value": "[general.coolGray.50][-0.800]", + "comment": "Третичный прозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceTransparentTertiaryHover": { + "value": "#F8FAFC52", + "comment": "Третичный прозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceTransparentTertiaryActive": { + "value": "#F8FAFC24", + "comment": "Третичный прозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceTransparentDeep": { + "value": "[general.coolGray.50][-0.360]", + "comment": "Глубокий прозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceTransparentDeepHover": { + "value": "#F8FAFCC2", + "comment": "Глубокий прозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceTransparentDeepActive": { + "value": "#F8FAFC94", + "comment": "Глубокий прозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceTransparentCard": { + "value": "[general.coolGray.50][-0.940]", + "comment": "Прозрачный фон для карточек на темном фоне", + "enabled": false + }, + "surfaceTransparentCardHover": { + "value": "#F8FAFC1F", + "comment": "Прозрачный фон для карточек на темном фоне", + "enabled": false + }, + "surfaceTransparentCardActive": { + "value": "#F8FAFC0A", + "comment": "Прозрачный фон для карточек на темном фоне", + "enabled": false + }, + "surfaceClear": { + "value": "#FFFFFF00", + "comment": "Фон поверхности/контрола без заливки на темном фоне", + "enabled": false + }, + "surfaceClearHover": { + "value": "#FFFFFF00", + "comment": "Фон поверхности/контрола без заливки на темном фоне", + "enabled": false + }, + "surfaceClearActive": { + "value": "#FFFFFF00", + "comment": "Фон поверхности/контрола без заливки на темном фоне", + "enabled": false + }, + "surfaceAccent": { + "value": "[general.herbal.500]", + "comment": "Акцентный фон поверхности/контрола на темном фоне", + "enabled": true + }, + "surfaceAccentHover": { + "value": "#0DAF0DFF", + "comment": "Акцентный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceAccentActive": { + "value": "#0B930BFF", + "comment": "Акцентный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceAccentGradient": { + "value": "#FFFFFF", + "comment": "Акцентный фон поверхности/контрола с градиентом на темном фоне", + "enabled": false + }, + "surfaceAccentGradientHover": { + "value": "#FFFFFFFF", + "comment": "Акцентный фон поверхности/контрола с градиентом на темном фоне", + "enabled": false + }, + "surfaceAccentGradientActive": { + "value": "#FFFFFFFF", + "comment": "Акцентный фон поверхности/контрола с градиентом на темном фоне", + "enabled": false + }, + "surfaceAccentMinor": { + "value": "[general.herbal.900]", + "comment": "Акцентный минорный непрозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceAccentMinorHover": { + "value": "#0B3C0BFF", + "comment": "Акцентный минорный непрозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceAccentMinorActive": { + "value": "#062206FF", + "comment": "Акцентный минорный непрозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceAccentMinorGradient": { + "value": "#FFFFFF", + "comment": "Акцентный минорный фон поверхности/контрола с градиентом на темном фоне", + "enabled": false + }, + "surfaceAccentMinorGradientHover": { + "value": "#FFFFFFFF", + "comment": "Акцентный минорный фон поверхности/контрола с градиентом на темном фоне", + "enabled": false + }, + "surfaceAccentMinorGradientActive": { + "value": "#FFFFFFFF", + "comment": "Акцентный минорный фон поверхности/контрола с градиентом на темном фоне", + "enabled": false + }, + "surfaceTransparentAccent": { + "value": "[general.herbal.500][-0.72]", + "comment": "Прозрачный акцентный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceTransparentAccentHover": { + "value": "#0C9D0C66", + "comment": "Прозрачный акцентный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceTransparentAccentActive": { + "value": "#0C9D0C38", + "comment": "Прозрачный акцентный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceTransparentAccentGradient": { + "value": "#FFFFFF", + "comment": "Прозрачный акцентный фон поверхности/контрола с градиентом на темном фоне", + "enabled": false + }, + "surfaceTransparentAccentGradientHover": { + "value": "#FFFFFFFF", + "comment": "Прозрачный акцентный фон поверхности/контрола с градиентом на темном фоне", + "enabled": false + }, + "surfaceTransparentAccentGradientActive": { + "value": "#FFFFFFFF", + "comment": "Прозрачный акцентный фон поверхности/контрола с градиентом на темном фоне", + "enabled": false + }, + "surfacePromo": { + "value": "#FFFFFF", + "comment": "Промо фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfacePromoHover": { + "value": "#FFFFFFFF", + "comment": "Промо фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfacePromoActive": { + "value": "#FFFFFFFF", + "comment": "Промо фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfacePromoGradient": { + "value": "#FFFFFF", + "comment": "Промо фон поверхности/контрола с градиентом на темном фоне", + "enabled": false + }, + "surfacePromoGradientHover": { + "value": "#FFFFFFFF", + "comment": "Промо фон поверхности/контрола с градиентом на темном фоне", + "enabled": false + }, + "surfacePromoGradientActive": { + "value": "#FFFFFFFF", + "comment": "Промо фон поверхности/контрола с градиентом на темном фоне", + "enabled": false + }, + "surfacePromoMinor": { + "value": "#FFFFFF", + "comment": "Минорный промо фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfacePromoMinorHover": { + "value": "#FFFFFFFF", + "comment": "Минорный промо фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfacePromoMinorActive": { + "value": "#FFFFFFFF", + "comment": "Минорный промо фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfacePromoMinorGradient": { + "value": "#FFFFFF", + "comment": "Минорный промо фон поверхности/контрола с градиентом на темном фоне", + "enabled": false + }, + "surfacePromoMinorGradientHover": { + "value": "#FFFFFFFF", + "comment": "Минорный промо фон поверхности/контрола с градиентом на темном фоне", + "enabled": false + }, + "surfacePromoMinorGradientActive": { + "value": "#FFFFFFFF", + "comment": "Минорный промо фон поверхности/контрола с градиентом на темном фоне", + "enabled": false + }, + "surfaceTransparentPromo": { + "value": "#FFFFFF", + "comment": "Прозрачный промо фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceTransparentPromoHover": { + "value": "#FFFFFFFF", + "comment": "Прозрачный промо фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceTransparentPromoActive": { + "value": "#FFFFFFFF", + "comment": "Прозрачный промо фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceTransparentPromoGradient": { + "value": "#FFFFFF", + "comment": "Прозрачный промо фон поверхности/контрола с градиентом на темном фоне", + "enabled": false + }, + "surfaceTransparentPromoGradientHover": { + "value": "#FFFFFFFF", + "comment": "Прозрачный промо фон поверхности/контрола с градиентом на темном фоне", + "enabled": false + }, + "surfaceTransparentPromoGradientActive": { + "value": "#FFFFFFFF", + "comment": "Прозрачный промо фон поверхности/контрола с градиентом на темном фоне", + "enabled": false + }, + "surfacePositive": { + "value": "[general.green.500]", + "comment": "Цвет фона поверхности/контрола успех на темном фоне", + "enabled": true + }, + "surfacePositiveHover": { + "value": "#1DAF37FF", + "comment": "Цвет фона поверхности/контрола успех на темном фоне", + "enabled": false + }, + "surfacePositiveActive": { + "value": "#18952FFF", + "comment": "Цвет фона поверхности/контрола успех на темном фоне", + "enabled": false + }, + "surfaceWarning": { + "value": "[general.orange.500]", + "comment": "Цвет фона поверхности/контрола предупреждение на темном фоне", + "enabled": false + }, + "surfaceWarningHover": { + "value": "#FB7223FF", + "comment": "Цвет фона поверхности/контрола предупреждение на темном фоне", + "enabled": false + }, + "surfaceWarningActive": { + "value": "#F05B05FF", + "comment": "Цвет фона поверхности/контрола предупреждение на темном фоне", + "enabled": false + }, + "surfaceNegative": { + "value": "[general.red.500]", + "comment": "Цвет фона поверхности/контрола ошибка на темном фоне", + "enabled": true + }, + "surfaceNegativeHover": { + "value": "#FF475AFF", + "comment": "Цвет фона поверхности/контрола ошибка на темном фоне", + "enabled": false + }, + "surfaceNegativeActive": { + "value": "#FF1F35FF", + "comment": "Цвет фона поверхности/контрола ошибка на темном фоне", + "enabled": false + }, + "surfaceInfo": { + "value": "[general.blue.500]", + "comment": "Цвет фона поверхности/контрола информация на темном фоне", + "enabled": true + }, + "surfaceInfoHover": { + "value": "#1798EEFF", + "comment": "Цвет фона поверхности/контрола информация на темном фоне", + "enabled": false + }, + "surfaceInfoActive": { + "value": "#1086D5FF", + "comment": "Цвет фона поверхности/контрола информация на темном фоне", + "enabled": false + }, + "surfacePositiveMinor": { + "value": "[general.green.900]", + "comment": "Минорный цвет фона поверхности/контрола успех на темном фоне", + "enabled": false + }, + "surfacePositiveMinorHover": { + "value": "#0E3A16FF", + "comment": "Минорный цвет фона поверхности/контрола успех на темном фоне", + "enabled": false + }, + "surfacePositiveMinorActive": { + "value": "#08210CFF", + "comment": "Минорный цвет фона поверхности/контрола успех на темном фоне", + "enabled": false + }, + "surfaceWarningMinor": { + "value": "[general.orange.900]", + "comment": "Минорный цвет фона поверхности/контрола предупреждение на темном фоне", + "enabled": false + }, + "surfaceWarningMinorHover": { + "value": "#4F250DFF", + "comment": "Минорный цвет фона поверхности/контрола предупреждение на темном фоне", + "enabled": false + }, + "surfaceWarningMinorActive": { + "value": "#351909FF", + "comment": "Минорный цвет фона поверхности/контрола предупреждение на темном фоне", + "enabled": false + }, + "surfaceNegativeMinor": { + "value": "[general.red.900]", + "comment": "Минорный цвет фона поверхности/контрола ошибка на темном фоне", + "enabled": false + }, + "surfaceNegativeMinorHover": { + "value": "#5B1018FF", + "comment": "Минорный цвет фона поверхности/контрола ошибка на темном фоне", + "enabled": false + }, + "surfaceNegativeMinorActive": { + "value": "#410B11FF", + "comment": "Минорный цвет фона поверхности/контрола ошибка на темном фоне", + "enabled": false + }, + "surfaceInfoMinor": { + "value": "[general.blue.900]", + "comment": "Минорный цвет фона поверхности/контрола информация на темном фоне", + "enabled": false + }, + "surfaceInfoMinorHover": { + "value": "#10344CFF", + "comment": "Минорный цвет фона поверхности/контрола информация на темном фоне", + "enabled": false + }, + "surfaceInfoMinorActive": { + "value": "#0A2333FF", + "comment": "Минорный цвет фона поверхности/контрола информация на темном фоне", + "enabled": false + }, + "surfaceTransparentPositive": { + "value": "[general.green.500][-0.72]", + "comment": "Прозрачный цвет фона поверхности/контрола успех на темном фоне", + "enabled": false + }, + "surfaceTransparentPositiveHover": { + "value": "#1A9E3266", + "comment": "Прозрачный цвет фона поверхности/контрола успех на темном фоне", + "enabled": false + }, + "surfaceTransparentPositiveActive": { + "value": "#1A9E3238", + "comment": "Прозрачный цвет фона поверхности/контрола успех на темном фоне", + "enabled": false + }, + "surfaceTransparentWarning": { + "value": "[general.orange.500][-0.72]", + "comment": "Прозрачный цвет фона поверхности/контрола предупреждение на темном фоне", + "enabled": false + }, + "surfaceTransparentWarningHover": { + "value": "#FA5F0566", + "comment": "Прозрачный цвет фона поверхности/контрола предупреждение на темном фоне", + "enabled": false + }, + "surfaceTransparentWarningActive": { + "value": "#FA5F0538", + "comment": "Прозрачный цвет фона поверхности/контрола предупреждение на темном фоне", + "enabled": false + }, + "surfaceTransparentNegative": { + "value": "[general.red.500][-0.72]", + "comment": "Прозрачный цвет фона поверхности/контрола предупреждение на темном фоне", + "enabled": false + }, + "surfaceTransparentNegativeHover": { + "value": "#FF293E66", + "comment": "Прозрачный цвет фона поверхности/контрола предупреждение на темном фоне", + "enabled": false + }, + "surfaceTransparentNegativeActive": { + "value": "#FF293E38", + "comment": "Прозрачный цвет фона поверхности/контрола предупреждение на темном фоне", + "enabled": false + }, + "surfaceTransparentInfo": { + "value": "[general.blue.500][-0.72]", + "comment": "Прозрачный цвет фона поверхности/контрола информация на темном фоне", + "enabled": false + }, + "surfaceTransparentInfoHover": { + "value": "#118CDF66", + "comment": "Прозрачный цвет фона поверхности/контрола информация на темном фоне", + "enabled": false + }, + "surfaceTransparentInfoActive": { + "value": "#118CDF38", + "comment": "Прозрачный цвет фона поверхности/контрола информация на темном фоне", + "enabled": false + } + }, + "onLight": { + "surfaceSolidPrimary": { + "value": "[general.coolGray.100]", + "comment": "Основной непрозрачный фон поверхности/контрола на светлом фоне", + "enabled": true + }, + "surfaceSolidPrimaryHover": { + "value": "#F8FAFBFF", + "comment": "Основной непрозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceSolidPrimaryActive": { + "value": "#EBF0F4FF", + "comment": "Основной непрозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceSolidSecondary": { + "value": "[general.coolGray.150]", + "comment": "Вторичный непрозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceSolidSecondaryHover": { + "value": "#F5F8F9FF", + "comment": "Вторичный непрозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceSolidSecondaryActive": { + "value": "#E2E9EEFF", + "comment": "Вторичный непрозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceSolidTertiary": { + "value": "[general.coolGray.200]", + "comment": "Третичный непрозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceSolidTertiaryHover": { + "value": "#E2E9EEFF", + "comment": "Третичный непрозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceSolidTertiaryActive": { + "value": "#CFDAE2FF", + "comment": "Третичный непрозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceSolidCard": { + "value": "#FFFFFF", + "comment": "Основной фон для карточек на светлом фоне", + "enabled": true + }, + "surfaceSolidCardHover": { + "value": "#FFFFFFFF", + "comment": "Основной фон для карточек на светлом фоне", + "enabled": false + }, + "surfaceSolidCardActive": { + "value": "#FFFFFFFF", + "comment": "Основной фон для карточек на светлом фоне", + "enabled": false + }, + "surfaceSolidDefault": { + "value": "[general.coolGray.1000]", + "comment": "Непрозрачный фон поверхности/контрола по умолчанию на светлом фоне", + "enabled": true + }, + "surfaceSolidDefaultHover": { + "value": "#0A1114FF", + "comment": "Непрозрачный фон поверхности/контрола по умолчанию на светлом фоне", + "enabled": false + }, + "surfaceSolidDefaultActive": { + "value": "#030607FF", + "comment": "Непрозрачный фон поверхности/контрола по умолчанию на светлом фоне", + "enabled": false + }, + "surfaceTransparentPrimary": { + "value": "[general.coolGray.1000][-0.970]", + "comment": "Основной прозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceTransparentPrimaryHover": { + "value": "#070B0E12", + "comment": "Основной прозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceTransparentPrimaryActive": { + "value": "#070B0E03", + "comment": "Основной прозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceTransparentSecondary": { + "value": "[general.coolGray.1000][-0.940]", + "comment": "Вторичный прозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceTransparentSecondaryHover": { + "value": "#070B0E1F", + "comment": "Вторичный прозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceTransparentSecondaryActive": { + "value": "#070B0E0A", + "comment": "Вторичный прозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceTransparentTertiary": { + "value": "[general.coolGray.1000][-0.880]", + "comment": "Третичный прозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceTransparentTertiaryHover": { + "value": "#070B0E3D", + "comment": "Третичный прозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceTransparentTertiaryActive": { + "value": "#070B0E0F", + "comment": "Третичный прозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceTransparentDeep": { + "value": "[general.coolGray.1000][-0.360]", + "comment": "Глубокий прозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceTransparentDeepHover": { + "value": "#070B0EC2", + "comment": "Глубокий прозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceTransparentDeepActive": { + "value": "#070B0E94", + "comment": "Глубокий прозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceTransparentCard": { + "value": "[general.coolGray.1000][-0.940]", + "comment": "Прозрачный фон для карточек на светлом фоне", + "enabled": false + }, + "surfaceTransparentCardHover": { + "value": "#070B0E1F", + "comment": "Прозрачный фон для карточек на светлом фоне", + "enabled": false + }, + "surfaceTransparentCardActive": { + "value": "#070B0E0A", + "comment": "Прозрачный фон для карточек на светлом фоне", + "enabled": false + }, + "surfaceClear": { + "value": "#FFFFFF00", + "comment": "Фон поверхности/контрола без заливки на светлом фоне", + "enabled": false + }, + "surfaceClearHover": { + "value": "#FFFFFF00", + "comment": "Фон поверхности/контрола без заливки на светлом фоне", + "enabled": false + }, + "surfaceClearActive": { + "value": "#FFFFFF00", + "comment": "Фон поверхности/контрола без заливки на светлом фоне", + "enabled": false + }, + "surfaceAccent": { + "value": "[general.herbal.700]", + "comment": "Акцентный фон поверхности/контрола на светлом фоне", + "enabled": true + }, + "surfaceAccentHover": { + "value": "#139613FF", + "comment": "Акцентный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceAccentActive": { + "value": "#0F7B0FFF", + "comment": "Акцентный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceAccentGradient": { + "value": "#FFFFFF", + "comment": "Акцентный фон поверхности/контрола с градиентом на светлом фоне", + "enabled": false + }, + "surfaceAccentGradientHover": { + "value": "#FFFFFFFF", + "comment": "Акцентный фон поверхности/контрола с градиентом на светлом фоне", + "enabled": false + }, + "surfaceAccentGradientActive": { + "value": "#FFFFFFFF", + "comment": "Акцентный фон поверхности/контрола с градиентом на светлом фоне", + "enabled": false + }, + "surfaceAccentMinor": { + "value": "[general.herbal.200]", + "comment": "Акцентный минорный непрозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceAccentMinorHover": { + "value": "#90F990FF", + "comment": "Акцентный минорный непрозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceAccentMinorActive": { + "value": "#5FF75FFF", + "comment": "Акцентный минорный непрозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceAccentMinorGradient": { + "value": "#FFFFFF", + "comment": "Акцентный минорный фон поверхности/контрола с градиентом на светлом фоне", + "enabled": false + }, + "surfaceAccentMinorGradientHover": { + "value": "#FFFFFFFF", + "comment": "Акцентный минорный фон поверхности/контрола с градиентом на светлом фоне", + "enabled": false + }, + "surfaceAccentMinorGradientActive": { + "value": "#FFFFFFFF", + "comment": "Акцентный минорный фон поверхности/контрола с градиентом на светлом фоне", + "enabled": false + }, + "surfaceTransparentAccent": { + "value": "[general.herbal.700][-0.72]", + "comment": "Прозрачный акцентный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceTransparentAccentHover": { + "value": "#10841066", + "comment": "Прозрачный акцентный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceTransparentAccentActive": { + "value": "#10841038", + "comment": "Прозрачный акцентный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceTransparentAccentGradient": { + "value": "#FFFFFF", + "comment": "Прозрачный акцентный фон поверхности/контрола с градиентом на светлом фоне", + "enabled": false + }, + "surfaceTransparentAccentGradientHover": { + "value": "#FFFFFFFF", + "comment": "Прозрачный акцентный фон поверхности/контрола с градиентом на светлом фоне", + "enabled": false + }, + "surfaceTransparentAccentGradientActive": { + "value": "#FFFFFFFF", + "comment": "Прозрачный акцентный фон поверхности/контрола с градиентом на светлом фоне", + "enabled": false + }, + "surfacePromo": { + "value": "#FFFFFF", + "comment": "Промо фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfacePromoHover": { + "value": "#FFFFFFFF", + "comment": "Промо фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfacePromoActive": { + "value": "#FFFFFFFF", + "comment": "Промо фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfacePromoGradient": { + "value": "#FFFFFF", + "comment": "Промо фон поверхности/контрола с градиентом на светлом фоне", + "enabled": false + }, + "surfacePromoGradientHover": { + "value": "#FFFFFFFF", + "comment": "Промо фон поверхности/контрола с градиентом на светлом фоне", + "enabled": false + }, + "surfacePromoGradientActive": { + "value": "#FFFFFFFF", + "comment": "Промо фон поверхности/контрола с градиентом на светлом фоне", + "enabled": false + }, + "surfacePromoMinor": { + "value": "#FFFFFF", + "comment": "Минорный промо фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfacePromoMinorHover": { + "value": "#FFFFFFFF", + "comment": "Минорный промо фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfacePromoMinorActive": { + "value": "#FFFFFFFF", + "comment": "Минорный промо фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfacePromoMinorGradient": { + "value": "#FFFFFF", + "comment": "Минорный промо фон поверхности/контрола с градиентом на светлом фоне", + "enabled": false + }, + "surfacePromoMinorGradientHover": { + "value": "#FFFFFFFF", + "comment": "Минорный промо фон поверхности/контрола с градиентом на светлом фоне", + "enabled": false + }, + "surfacePromoMinorGradientActive": { + "value": "#FFFFFFFF", + "comment": "Минорный промо фон поверхности/контрола с градиентом на светлом фоне", + "enabled": false + }, + "surfaceTransparentPromo": { + "value": "#FFFFFF", + "comment": "Прозрачный промо фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceTransparentPromoHover": { + "value": "#FFFFFFFF", + "comment": "Прозрачный промо фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceTransparentPromoActive": { + "value": "#FFFFFFFF", + "comment": "Прозрачный промо фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceTransparentPromoGradient": { + "value": "#FFFFFF", + "comment": "Прозрачный промо фон поверхности/контрола с градиентом на светлом фоне", + "enabled": false + }, + "surfaceTransparentPromoGradientHover": { + "value": "#FFFFFFFF", + "comment": "Прозрачный промо фон поверхности/контрола с градиентом на светлом фоне", + "enabled": false + }, + "surfaceTransparentPromoGradientActive": { + "value": "#FFFFFFFF", + "comment": "Прозрачный промо фон поверхности/контрола с градиентом на светлом фоне", + "enabled": false + }, + "surfacePositive": { + "value": "[general.green.500]", + "comment": "Цвет фона поверхности/контрола успех на светлом фоне", + "enabled": true + }, + "surfacePositiveHover": { + "value": "#1DAF37FF", + "comment": "Цвет фона поверхности/контрола успех на светлом фоне", + "enabled": false + }, + "surfacePositiveActive": { + "value": "#18952FFF", + "comment": "Цвет фона поверхности/контрола успех на светлом фоне", + "enabled": false + }, + "surfaceWarning": { + "value": "[general.orange.500]", + "comment": "Цвет фона поверхности/контрола предупреждение на светлом фоне", + "enabled": false + }, + "surfaceWarningHover": { + "value": "#FB7223FF", + "comment": "Цвет фона поверхности/контрола предупреждение на светлом фоне", + "enabled": false + }, + "surfaceWarningActive": { + "value": "#F05B05FF", + "comment": "Цвет фона поверхности/контрола предупреждение на светлом фоне", + "enabled": false + }, + "surfaceNegative": { + "value": "[general.red.500]", + "comment": "Цвет фона поверхности/контрола ошибка на светлом фоне", + "enabled": true + }, + "surfaceNegativeHover": { + "value": "#FF475AFF", + "comment": "Цвет фона поверхности/контрола ошибка на светлом фоне", + "enabled": false + }, + "surfaceNegativeActive": { + "value": "#FF1F35FF", + "comment": "Цвет фона поверхности/контрола ошибка на светлом фоне", + "enabled": false + }, + "surfaceInfo": { + "value": "[general.blue.500]", + "comment": "Цвет фона поверхности/контрола информация на светлом фоне", + "enabled": true + }, + "surfaceInfoHover": { + "value": "#1798EEFF", + "comment": "Цвет фона поверхности/контрола информация на светлом фоне", + "enabled": false + }, + "surfaceInfoActive": { + "value": "#1086D5FF", + "comment": "Цвет фона поверхности/контрола информация на светлом фоне", + "enabled": false + }, + "surfacePositiveMinor": { + "value": "[general.green.200]", + "comment": "Минорный цвет фона поверхности/контрола успех на светлом фоне", + "enabled": false + }, + "surfacePositiveMinorHover": { + "value": "#8AF59DFF", + "comment": "Минорный цвет фона поверхности/контрола успех на светлом фоне", + "enabled": false + }, + "surfacePositiveMinorActive": { + "value": "#6EF286FF", + "comment": "Минорный цвет фона поверхности/контрола успех на светлом фоне", + "enabled": false + }, + "surfaceWarningMinor": { + "value": "[general.orange.200]", + "comment": "Минорный цвет фона поверхности/контрола предупреждение на светлом фоне", + "enabled": false + }, + "surfaceWarningMinorHover": { + "value": "#FFDECCFF", + "comment": "Минорный цвет фона поверхности/контрола предупреждение на светлом фоне", + "enabled": false + }, + "surfaceWarningMinorActive": { + "value": "#FFCAADFF", + "comment": "Минорный цвет фона поверхности/контрола предупреждение на светлом фоне", + "enabled": false + }, + "surfaceNegativeMinor": { + "value": "[general.red.200]", + "comment": "Минорный цвет фона поверхности/контрола ошибка на светлом фоне", + "enabled": false + }, + "surfaceNegativeMinorHover": { + "value": "#FED7DBFF", + "comment": "Минорный цвет фона поверхности/контрола ошибка на светлом фоне", + "enabled": false + }, + "surfaceNegativeMinorActive": { + "value": "#FEC3C9FF", + "comment": "Минорный цвет фона поверхности/контрола ошибка на светлом фоне", + "enabled": false + }, + "surfaceInfoMinor": { + "value": "[general.blue.200]", + "comment": "Минорный цвет фона поверхности/контрола информация на светлом фоне", + "enabled": false + }, + "surfaceInfoMinorHover": { + "value": "#C7E9FFFF", + "comment": "Минорный цвет фона поверхности/контрола информация на светлом фоне", + "enabled": false + }, + "surfaceInfoMinorActive": { + "value": "#A8DCFFFF", + "comment": "Минорный цвет фона поверхности/контрола информация на светлом фоне", + "enabled": false + }, + "surfaceTransparentPositive": { + "value": "[general.green.500][-0.72]", + "comment": "Прозрачный цвет фона поверхности/контрола успех на светлом фоне", + "enabled": false + }, + "surfaceTransparentPositiveHover": { + "value": "#1A9E3266", + "comment": "Прозрачный цвет фона поверхности/контрола успех на светлом фоне", + "enabled": false + }, + "surfaceTransparentPositiveActive": { + "value": "#1A9E3238", + "comment": "Прозрачный цвет фона поверхности/контрола успех на светлом фоне", + "enabled": false + }, + "surfaceTransparentWarning": { + "value": "[general.orange.500][-0.72]", + "comment": "Прозрачный цвет фона поверхности/контрола предупреждение на светлом фоне", + "enabled": false + }, + "surfaceTransparentWarningHover": { + "value": "#FA5F0566", + "comment": "Прозрачный цвет фона поверхности/контрола предупреждение на светлом фоне", + "enabled": false + }, + "surfaceTransparentWarningActive": { + "value": "#FA5F0538", + "comment": "Прозрачный цвет фона поверхности/контрола предупреждение на светлом фоне", + "enabled": false + }, + "surfaceTransparentNegative": { + "value": "[general.red.500][-0.72]", + "comment": "Прозрачный цвет фона поверхности/контрола предупреждение на светлом фоне", + "enabled": false + }, + "surfaceTransparentNegativeHover": { + "value": "#FF293E66", + "comment": "Прозрачный цвет фона поверхности/контрола предупреждение на светлом фоне", + "enabled": false + }, + "surfaceTransparentNegativeActive": { + "value": "#FF293E38", + "comment": "Прозрачный цвет фона поверхности/контрола предупреждение на светлом фоне", + "enabled": false + }, + "surfaceTransparentInfo": { + "value": "[general.blue.500][-0.72]", + "comment": "Прозрачный цвет фона поверхности/контрола информация на светлом фоне", + "enabled": false + }, + "surfaceTransparentInfoHover": { + "value": "#118CDF66", + "comment": "Прозрачный цвет фона поверхности/контрола информация на светлом фоне", + "enabled": false + }, + "surfaceTransparentInfoActive": { + "value": "#118CDF38", + "comment": "Прозрачный цвет фона поверхности/контрола информация на светлом фоне", + "enabled": false + } + }, + "inverse": { + "surfaceSolidPrimary": { + "value": "[general.coolGray.100]", + "comment": "Инвертированный основной непрозрачный фон поверхности/контрола", + "enabled": true + }, + "surfaceSolidPrimaryHover": { + "value": "#F8FAFBFF", + "comment": "Инвертированный основной непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceSolidPrimaryActive": { + "value": "#EBF0F4FF", + "comment": "Инвертированный основной непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceSolidSecondary": { + "value": "[general.coolGray.150]", + "comment": "Инвертированный вторичный непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceSolidSecondaryHover": { + "value": "#F5F8F9FF", + "comment": "Инвертированный вторичный непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceSolidSecondaryActive": { + "value": "#E2E9EEFF", + "comment": "Инвертированный вторичный непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceSolidTertiary": { + "value": "[general.coolGray.200]", + "comment": "Инвертированный третичный непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceSolidTertiaryHover": { + "value": "#E2E9EEFF", + "comment": "Инвертированный третичный непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceSolidTertiaryActive": { + "value": "#CFDAE2FF", + "comment": "Инвертированный третичный непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceSolidCard": { + "value": "#FFFFFF", + "comment": "Инвертированный основной фон для карточек", + "enabled": true + }, + "surfaceSolidCardHover": { + "value": "#FFFFFFFF", + "comment": "Инвертированный основной фон для карточек", + "enabled": false + }, + "surfaceSolidCardActive": { + "value": "#FFFFFFFF", + "comment": "Инвертированный основной фон для карточек", + "enabled": false + }, + "surfaceSolidDefault": { + "value": "[general.coolGray.1000]", + "comment": "Инвертированный непрозрачный фон поверхности/контрола по умолчанию", + "enabled": true + }, + "surfaceSolidDefaultHover": { + "value": "#0A1114FF", + "comment": "Инвертированный непрозрачный фон поверхности/контрола по умолчанию", + "enabled": false + }, + "surfaceSolidDefaultActive": { + "value": "#030607FF", + "comment": "Инвертированный непрозрачный фон поверхности/контрола по умолчанию", + "enabled": false + }, + "surfaceTransparentPrimary": { + "value": "[general.coolGray.1000][-0.970]", + "comment": "Инвертированный основной прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentPrimaryHover": { + "value": "#070B0E12", + "comment": "Инвертированный основной прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentPrimaryActive": { + "value": "#070B0E03", + "comment": "Инвертированный основной прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentSecondary": { + "value": "[general.coolGray.1000][-0.940]", + "comment": "Инвертированный вторичный прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentSecondaryHover": { + "value": "#070B0E1F", + "comment": "Инвертированный вторичный прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentSecondaryActive": { + "value": "#070B0E0A", + "comment": "Инвертированный вторичный прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentTertiary": { + "value": "[general.coolGray.1000][-0.880]", + "comment": "Инвертированный третичный прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentTertiaryHover": { + "value": "#070B0E3D", + "comment": "Инвертированный третичный прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentTertiaryActive": { + "value": "#070B0E0F", + "comment": "Инвертированный третичный прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentDeep": { + "value": "[general.coolGray.1000][-0.360]", + "comment": "Инвертированный глубокий прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentDeepHover": { + "value": "#070B0EC2", + "comment": "Инвертированный глубокий прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentDeepActive": { + "value": "#070B0E94", + "comment": "Инвертированный глубокий прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentCard": { + "value": "[general.coolGray.1000][-0.940]", + "comment": "Инвертированный прозрачный фон для карточек", + "enabled": false + }, + "surfaceTransparentCardHover": { + "value": "#070B0E1F", + "comment": "Инвертированный прозрачный фон для карточек", + "enabled": false + }, + "surfaceTransparentCardActive": { + "value": "#070B0E0A", + "comment": "Инвертированный прозрачный фон для карточек", + "enabled": false + }, + "surfaceClear": { + "value": "#FFFFFF00", + "comment": "Инвертированный фон поверхности/контрола без заливки", + "enabled": false + }, + "surfaceClearHover": { + "value": "#FFFFFF00", + "comment": "Инвертированный фон поверхности/контрола без заливки", + "enabled": false + }, + "surfaceClearActive": { + "value": "#FFFFFF00", + "comment": "Инвертированный фон поверхности/контрола без заливки", + "enabled": false + }, + "surfaceAccent": { + "value": "[general.herbal.700]", + "comment": "Инвертированный акцентный фон поверхности/контрола", + "enabled": true + }, + "surfaceAccentHover": { + "value": "#139613FF", + "comment": "Инвертированный акцентный фон поверхности/контрола", + "enabled": false + }, + "surfaceAccentActive": { + "value": "#0F7B0FFF", + "comment": "Инвертированный акцентный фон поверхности/контрола", + "enabled": false + }, + "surfaceAccentGradient": { + "value": "#FFFFFF", + "comment": "Инвертированный акцентный фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceAccentGradientHover": { + "value": "#FFFFFFFF", + "comment": "Инвертированный акцентный фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceAccentGradientActive": { + "value": "#FFFFFFFF", + "comment": "Инвертированный акцентный фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceAccentMinor": { + "value": "[general.herbal.200]", + "comment": "Инвертированный акцентный минорный непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceAccentMinorHover": { + "value": "#90F990FF", + "comment": "Инвертированный акцентный минорный непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceAccentMinorActive": { + "value": "#5FF75FFF", + "comment": "Инвертированный акцентный минорный непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceAccentMinorGradient": { + "value": "#FFFFFF", + "comment": "Инвертированный акцентный минорный фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceAccentMinorGradientHover": { + "value": "#FFFFFFFF", + "comment": "Инвертированный акцентный минорный фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceAccentMinorGradientActive": { + "value": "#FFFFFFFF", + "comment": "Инвертированный акцентный минорный фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceTransparentAccent": { + "value": "[general.herbal.700][-0.72]", + "comment": "Прозрачный инвертированный акцентный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentAccentHover": { + "value": "#10841066", + "comment": "Прозрачный инвертированный акцентный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentAccentActive": { + "value": "#10841038", + "comment": "Прозрачный инвертированный акцентный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentAccentGradient": { + "value": "#FFFFFF", + "comment": "Прозрачный инвертированный акцентный фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceTransparentAccentGradientHover": { + "value": "#FFFFFFFF", + "comment": "Прозрачный инвертированный акцентный фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceTransparentAccentGradientActive": { + "value": "#FFFFFFFF", + "comment": "Прозрачный инвертированный акцентный фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfacePromo": { + "value": "#FFFFFF", + "comment": "Инвертированный промо фон поверхности/контрола", + "enabled": false + }, + "surfacePromoHover": { + "value": "#FFFFFFFF", + "comment": "Инвертированный промо фон поверхности/контрола", + "enabled": false + }, + "surfacePromoActive": { + "value": "#FFFFFFFF", + "comment": "Инвертированный промо фон поверхности/контрола", + "enabled": false + }, + "surfacePromoGradient": { + "value": "#FFFFFF", + "comment": "Инвертированный промо фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfacePromoGradientHover": { + "value": "#FFFFFFFF", + "comment": "Инвертированный промо фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfacePromoGradientActive": { + "value": "#FFFFFFFF", + "comment": "Инвертированный промо фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfacePromoMinor": { + "value": "#FFFFFF", + "comment": "Инвертированный минорный промо фон поверхности/контрола", + "enabled": false + }, + "surfacePromoMinorHover": { + "value": "#FFFFFFFF", + "comment": "Инвертированный минорный промо фон поверхности/контрола", + "enabled": false + }, + "surfacePromoMinorActive": { + "value": "#FFFFFFFF", + "comment": "Инвертированный минорный промо фон поверхности/контрола", + "enabled": false + }, + "surfacePromoMinorGradient": { + "value": "#FFFFFF", + "comment": "Инвертированный минорный промо фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfacePromoMinorGradientHover": { + "value": "#FFFFFFFF", + "comment": "Инвертированный минорный промо фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfacePromoMinorGradientActive": { + "value": "#FFFFFFFF", + "comment": "Инвертированный минорный промо фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceTransparentPromo": { + "value": "#FFFFFF", + "comment": "Инвертированный прозрачный промо фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentPromoHover": { + "value": "#FFFFFFFF", + "comment": "Инвертированный прозрачный промо фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentPromoActive": { + "value": "#FFFFFFFF", + "comment": "Инвертированный прозрачный промо фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentPromoGradient": { + "value": "#FFFFFF", + "comment": "Инвертированный прозрачный промо фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceTransparentPromoGradientHover": { + "value": "#FFFFFFFF", + "comment": "Инвертированный прозрачный промо фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceTransparentPromoGradientActive": { + "value": "#FFFFFFFF", + "comment": "Инвертированный прозрачный промо фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfacePositive": { + "value": "[general.green.500]", + "comment": "Инвертированный цвет фона поверхности/контрола успех", + "enabled": true + }, + "surfacePositiveHover": { + "value": "#1DAF37FF", + "comment": "Инвертированный цвет фона поверхности/контрола успех", + "enabled": false + }, + "surfacePositiveActive": { + "value": "#18952FFF", + "comment": "Инвертированный цвет фона поверхности/контрола успех", + "enabled": false + }, + "surfaceWarning": { + "value": "[general.orange.500]", + "comment": "Инвертированный цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceWarningHover": { + "value": "#FB7223FF", + "comment": "Инвертированный цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceWarningActive": { + "value": "#F05B05FF", + "comment": "Инвертированный цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceNegative": { + "value": "[general.red.500]", + "comment": "Инвертированный цвет фона поверхности/контрола ошибка", + "enabled": true + }, + "surfaceNegativeHover": { + "value": "#FF475AFF", + "comment": "Инвертированный цвет фона поверхности/контрола ошибка", + "enabled": false + }, + "surfaceNegativeActive": { + "value": "#FF1F35FF", + "comment": "Инвертированный цвет фона поверхности/контрола ошибка", + "enabled": false + }, + "surfaceInfo": { + "value": "[general.blue.500]", + "comment": "Инвертированный цвет фона поверхности/контрола информация", + "enabled": true + }, + "surfaceInfoHover": { + "value": "#1798EEFF", + "comment": "Инвертированный цвет фона поверхности/контрола информация", + "enabled": false + }, + "surfaceInfoActive": { + "value": "#1086D5FF", + "comment": "Инвертированный цвет фона поверхности/контрола информация", + "enabled": false + }, + "surfacePositiveMinor": { + "value": "[general.green.200]", + "comment": "Инвертированный минорный цвет фона поверхности/контрола успех", + "enabled": false + }, + "surfacePositiveMinorHover": { + "value": "#8AF59DFF", + "comment": "Инвертированный минорный цвет фона поверхности/контрола успех", + "enabled": false + }, + "surfacePositiveMinorActive": { + "value": "#6EF286FF", + "comment": "Инвертированный минорный цвет фона поверхности/контрола успех", + "enabled": false + }, + "surfaceWarningMinor": { + "value": "[general.orange.200]", + "comment": "Инвертированный минорный цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceWarningMinorHover": { + "value": "#FFDECCFF", + "comment": "Инвертированный минорный цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceWarningMinorActive": { + "value": "#FFCAADFF", + "comment": "Инвертированный минорный цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceNegativeMinor": { + "value": "[general.red.200]", + "comment": "Инвертированный минорный цвет фона поверхности/контрола ошибка", + "enabled": false + }, + "surfaceNegativeMinorHover": { + "value": "#FED7DBFF", + "comment": "Инвертированный минорный цвет фона поверхности/контрола ошибка", + "enabled": false + }, + "surfaceNegativeMinorActive": { + "value": "#FEC3C9FF", + "comment": "Инвертированный минорный цвет фона поверхности/контрола ошибка", + "enabled": false + }, + "surfaceInfoMinor": { + "value": "[general.blue.200]", + "comment": "Инвертированный минорный цвет фона поверхности/контрола информация", + "enabled": false + }, + "surfaceInfoMinorHover": { + "value": "#C7E9FFFF", + "comment": "Инвертированный минорный цвет фона поверхности/контрола информация", + "enabled": false + }, + "surfaceInfoMinorActive": { + "value": "#A8DCFFFF", + "comment": "Инвертированный минорный цвет фона поверхности/контрола информация", + "enabled": false + }, + "surfaceTransparentPositive": { + "value": "[general.green.500][-0.72]", + "comment": "Прозрачный инвертированный цвет фона поверхности/контрола успех", + "enabled": false + }, + "surfaceTransparentPositiveHover": { + "value": "#1A9E3266", + "comment": "Прозрачный инвертированный цвет фона поверхности/контрола успех", + "enabled": false + }, + "surfaceTransparentPositiveActive": { + "value": "#1A9E3238", + "comment": "Прозрачный инвертированный цвет фона поверхности/контрола успех", + "enabled": false + }, + "surfaceTransparentWarning": { + "value": "[general.orange.500][-0.72]", + "comment": "Прозрачный инвертированный цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceTransparentWarningHover": { + "value": "#FA5F0566", + "comment": "Прозрачный инвертированный цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceTransparentWarningActive": { + "value": "#FA5F0538", + "comment": "Прозрачный инвертированный цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceTransparentNegative": { + "value": "[general.red.500][-0.72]", + "comment": "Прозрачный инвертированный цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceTransparentNegativeHover": { + "value": "#FF293E66", + "comment": "Прозрачный инвертированный цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceTransparentNegativeActive": { + "value": "#FF293E38", + "comment": "Прозрачный инвертированный цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceTransparentInfo": { + "value": "[general.blue.500][-0.72]", + "comment": "Прозрачный инвертированный цвет фона поверхности/контрола информация", + "enabled": false + }, + "surfaceTransparentInfoHover": { + "value": "#118CDF66", + "comment": "Прозрачный инвертированный цвет фона поверхности/контрола информация", + "enabled": false + }, + "surfaceTransparentInfoActive": { + "value": "#118CDF38", + "comment": "Прозрачный инвертированный цвет фона поверхности/контрола информация", + "enabled": false + } + } + }, + "background": { + "default": { + "backgroundPrimary": { + "value": "[general.coolGray.1000]", + "comment": "Основной фон", + "enabled": true + }, + "backgroundSecondary": { + "value": "#FFFFFF", + "comment": "Вторичный фон", + "enabled": false + }, + "backgroundTertiary": { + "value": "#FFFFFF", + "comment": "Третичный фон", + "enabled": false + } + }, + "dark": { + "backgroundPrimary": { + "value": "[general.coolGray.1000]", + "comment": "Основной фон на темном фоне", + "enabled": true + }, + "backgroundSecondary": { + "value": "#FFFFFF", + "comment": "Вторичный фон на темном фоне", + "enabled": false + }, + "backgroundTertiary": { + "value": "#FFFFFF", + "comment": "Третичный фон на темном фоне", + "enabled": false + } + }, + "light": { + "backgroundPrimary": { + "value": "[general.coolGray.50]", + "comment": "Основной фон на светлом фоне", + "enabled": true + }, + "backgroundSecondary": { + "value": "#FFFFFF", + "comment": "Вторичный фон на светлом фоне", + "enabled": false + }, + "backgroundTertiary": { + "value": "#FFFFFF", + "comment": "Третичный фон на светлом фоне", + "enabled": false + } + }, + "inverse": { + "backgroundPrimary": { + "value": "[general.coolGray.50]", + "comment": "Инвертированный основной фон", + "enabled": true + }, + "backgroundSecondary": { + "value": "#FFFFFF", + "comment": "Инвертированный вторичный фон", + "enabled": false + }, + "backgroundTertiary": { + "value": "#FFFFFF", + "comment": "Инвертированный третичный фон", + "enabled": false + } + } + }, + "overlay": { + "default": { + "overlaySoft": { + "value": "[general.coolGray.1000][-0.440]", + "comment": "Цвет фона паранжи светлый", + "enabled": false + }, + "overlayHard": { + "value": "[general.coolGray.1000][-0.0400]", + "comment": "Цвет фона паранжи темный", + "enabled": false + }, + "overlayBlur": { + "value": "[general.coolGray.1000][-0.800]", + "comment": "Цвет фона паранжи размытый", + "enabled": false + } + }, + "onDark": { + "overlaySoft": { + "value": "[general.coolGray.1000][-0.440]", + "comment": "Цвет фона паранжи светлый на темном фоне", + "enabled": false + }, + "overlayHard": { + "value": "[general.coolGray.1000][-0.0400]", + "comment": "Цвет фона паранжи темный на темном фоне", + "enabled": false + }, + "overlayBlur": { + "value": "[general.coolGray.1000][-0.800]", + "comment": "Цвет фона паранжи размытый на темном фоне", + "enabled": false + } + }, + "onLight": { + "overlaySoft": { + "value": "[general.coolGray.50][-0.440]", + "comment": "Цвет фона паранжи светлый на светлом фоне", + "enabled": false + }, + "overlayHard": { + "value": "[general.coolGray.50][-0.0400]", + "comment": "Цвет фона паранжи темный на светлом фоне", + "enabled": false + }, + "overlayBlur": { + "value": "[general.coolGray.50][-0.800]", + "comment": "Цвет фона паранжи размытый на светлом фоне", + "enabled": false + } + }, + "inverse": { + "overlaySoft": { + "value": "[general.coolGray.50][-0.440]", + "comment": "Инвертированный цвет фона паранжи светлый", + "enabled": false + }, + "overlayHard": { + "value": "[general.coolGray.50][-0.0400]", + "comment": "Инвертированный цвет фона паранжи темный", + "enabled": false + }, + "overlayBlur": { + "value": "[general.coolGray.50][-0.800]", + "comment": "Инвертированный цвет фона паранжи размытый", + "enabled": false + } + } + }, + "outline": { + "default": { + "outlineSolidPrimary": { + "value": "[general.coolGray.900]", + "comment": "Основной непрозрачный цвет обводки", + "enabled": true + }, + "outlineSolidPrimaryHover": { + "value": "#FFFFFFFF", + "comment": "Основной непрозрачный цвет обводки", + "enabled": false + }, + "outlineSolidPrimaryActive": { + "value": "#A0ADB6FF", + "comment": "Основной непрозрачный цвет обводки", + "enabled": false + }, + "outlineSolidSecondary": { + "value": "[general.coolGray.850]", + "comment": "Вторичный непрозрачный цвет обводки", + "enabled": true + }, + "outlineSolidSecondaryHover": { + "value": "#FFFFFFFF", + "comment": "Вторичный непрозрачный цвет обводки", + "enabled": false + }, + "outlineSolidSecondaryActive": { + "value": "#96A2ABFF", + "comment": "Вторичный непрозрачный цвет обводки", + "enabled": false + }, + "outlineSolidTertiary": { + "value": "[general.coolGray.800]", + "comment": "Третичный непрозрачный цвет обводки", + "enabled": false + }, + "outlineSolidTertiaryHover": { + "value": "#FFFFFFFF", + "comment": "Третичный непрозрачный цвет обводки", + "enabled": false + }, + "outlineSolidTertiaryActive": { + "value": "#828E97FF", + "comment": "Третичный непрозрачный цвет обводки", + "enabled": false + }, + "outlineTransparentDefault": { + "value": "[general.coolGray.50][-0.0400]", + "comment": "Прозрачный цвет обводки по умолчанию", + "enabled": false + }, + "outlineTransparentDefaultHover": { + "value": "#F8FAFC93", + "comment": "Прозрачный цвет обводки по умолчанию", + "enabled": false + }, + "outlineTransparentDefaultActive": { + "value": "#F8FAFCC4", + "comment": "Прозрачный цвет обводки по умолчанию", + "enabled": false + }, + "outlineTransparentPrimary": { + "value": "[general.coolGray.50][-0.880]", + "comment": "Основной прозрачный цвет обводки", + "enabled": false + }, + "outlineTransparentPrimaryHover": { + "value": "#F8FAFCFF", + "comment": "Основной прозрачный цвет обводки", + "enabled": false + }, + "outlineTransparentPrimaryActive": { + "value": "#F8FAFC25", + "comment": "Основной прозрачный цвет обводки", + "enabled": false + }, + "outlineTransparentSecondary": { + "value": "[general.coolGray.50][-0.800]", + "comment": "Вторичный прозрачный цвет обводки", + "enabled": false + }, + "outlineTransparentSecondaryHover": { + "value": "#F8FAFCFF", + "comment": "Вторичный прозрачный цвет обводки", + "enabled": false + }, + "outlineTransparentSecondaryActive": { + "value": "#F8FAFC3D", + "comment": "Вторичный прозрачный цвет обводки", + "enabled": false + }, + "outlineTransparentTertiary": { + "value": "[general.coolGray.50][-0.720]", + "comment": "Третичный прозрачный цвет обводки", + "enabled": false + }, + "outlineTransparentTertiaryHover": { + "value": "#F8FAFCFF", + "comment": "Третичный прозрачный цвет обводки", + "enabled": false + }, + "outlineTransparentTertiaryActive": { + "value": "#F8FAFC56", + "comment": "Третичный прозрачный цвет обводки", + "enabled": false + }, + "outlineClear": { + "value": "#FFFFFF00", + "comment": "Бесцветная обводка", + "enabled": false + }, + "outlineClearHover": { + "value": "#FFFFFF00", + "comment": "Бесцветная обводка", + "enabled": false + }, + "outlineClearActive": { + "value": "#FFFFFF00", + "comment": "Бесцветная обводка", + "enabled": false + }, + "outlineAccent": { + "value": "[general.herbal.500]", + "comment": "Акцентный цвет обводки", + "enabled": true + }, + "outlineAccentHover": { + "value": "#0EB90EFF", + "comment": "Акцентный цвет обводки", + "enabled": false + }, + "outlineAccentActive": { + "value": "#0A800AFF", + "comment": "Акцентный цвет обводки", + "enabled": false + }, + "outlineAccentGradient": { + "value": "#FFFFFF", + "comment": "Акцентный цвет обводки с градиентом", + "enabled": false + }, + "outlineAccentGradientHover": { + "value": "#CCCCCCFF", + "comment": "Акцентный цвет обводки с градиентом", + "enabled": false + }, + "outlineAccentGradientActive": { + "value": "#E6E6E6FF", + "comment": "Акцентный цвет обводки с градиентом", + "enabled": false + }, + "outlineAccentMinor": { + "value": "[general.herbal.850]", + "comment": "Акцентный минорный непрозрачный цвет обводки", + "enabled": false + }, + "outlineAccentMinorHover": { + "value": "#0F760FFF", + "comment": "Акцентный минорный непрозрачный цвет обводки", + "enabled": false + }, + "outlineAccentMinorActive": { + "value": "#0B5B0BFF", + "comment": "Акцентный минорный непрозрачный цвет обводки", + "enabled": false + }, + "outlineAccentMinorGradient": { + "value": "#FFFFFF", + "comment": "Акцентный минорный цвет обводки с градиентом", + "enabled": false + }, + "outlineAccentMinorGradientHover": { + "value": "#CCCCCCFF", + "comment": "Акцентный минорный цвет обводки с градиентом", + "enabled": false + }, + "outlineAccentMinorGradientActive": { + "value": "#E6E6E6FF", + "comment": "Акцентный минорный цвет обводки с градиентом", + "enabled": false + }, + "outlineTransparentAccent": { + "value": "[general.herbal.500][-0.6]", + "comment": "Прозрачный акцентный цвет обводки", + "enabled": false + }, + "outlineTransparentAccentHover": { + "value": "#0C9D0CFF", + "comment": "Прозрачный акцентный цвет обводки", + "enabled": false + }, + "outlineTransparentAccentActive": { + "value": "#0C9D0C7A", + "comment": "Прозрачный акцентный цвет обводки", + "enabled": false + }, + "outlineTransparentAccentGradient": { + "value": "#FFFFFF", + "comment": "Прозрачный акцентный цвет обводки с градиентом", + "enabled": false + }, + "outlineTransparentAccentGradientHover": { + "value": "#CCCCCCFF", + "comment": "Прозрачный акцентный цвет обводки с градиентом", + "enabled": false + }, + "outlineTransparentAccentGradientActive": { + "value": "#E6E6E6FF", + "comment": "Прозрачный акцентный цвет обводки с градиентом", + "enabled": false + }, + "outlinePromo": { + "value": "#FFFFFF", + "comment": "Промо цвет обводки", + "enabled": false + }, + "outlinePromoHover": { + "value": "#CCCCCCFF", + "comment": "Промо цвет обводки", + "enabled": false + }, + "outlinePromoActive": { + "value": "#E6E6E6FF", + "comment": "Промо цвет обводки", + "enabled": false + }, + "outlinePromoGradient": { + "value": "#FFFFFF", + "comment": "Промо цвет обводки с градиентом", + "enabled": false + }, + "outlinePromoGradientHover": { + "value": "#CCCCCCFF", + "comment": "Промо цвет обводки с градиентом", + "enabled": false + }, + "outlinePromoGradientActive": { + "value": "#E6E6E6FF", + "comment": "Промо цвет обводки с градиентом", + "enabled": false + }, + "outlinePromoMinor": { + "value": "#FFFFFF", + "comment": "Минорный промо цвет обводки", + "enabled": false + }, + "outlinePromoMinorHover": { + "value": "#CCCCCCFF", + "comment": "Минорный промо цвет обводки", + "enabled": false + }, + "outlinePromoMinorActive": { + "value": "#E6E6E6FF", + "comment": "Минорный промо цвет обводки", + "enabled": false + }, + "outlinePromoMinorGradient": { + "value": "#FFFFFF", + "comment": "Минорный промо цвет обводки с градиентом", + "enabled": false + }, + "outlinePromoMinorGradientHover": { + "value": "#CCCCCCFF", + "comment": "Минорный промо цвет обводки с градиентом", + "enabled": false + }, + "outlinePromoMinorGradientActive": { + "value": "#E6E6E6FF", + "comment": "Минорный промо цвет обводки с градиентом", + "enabled": false + }, + "outlinePositive": { + "value": "[general.green.500]", + "comment": "Цвет обводки успех", + "enabled": true + }, + "outlinePositiveHover": { + "value": "#1EB83AFF", + "comment": "Цвет обводки успех", + "enabled": false + }, + "outlinePositiveActive": { + "value": "#15842AFF", + "comment": "Цвет обводки успех", + "enabled": false + }, + "outlineWarning": { + "value": "[general.orange.500]", + "comment": "Цвет обводки предупреждение", + "enabled": false + }, + "outlineWarningHover": { + "value": "#FB7223FF", + "comment": "Цвет обводки предупреждение", + "enabled": false + }, + "outlineWarningActive": { + "value": "#DC5304FF", + "comment": "Цвет обводки предупреждение", + "enabled": false + }, + "outlineNegative": { + "value": "[general.red.500]", + "comment": "Цвет обводки ошибка", + "enabled": true + }, + "outlineNegativeHover": { + "value": "#FF475AFF", + "comment": "Цвет обводки ошибка", + "enabled": false + }, + "outlineNegativeActive": { + "value": "#FF0A23FF", + "comment": "Цвет обводки ошибка", + "enabled": false + }, + "outlineInfo": { + "value": "[general.blue.500]", + "comment": "Цвет обводки информация", + "enabled": true + }, + "outlineInfoHover": { + "value": "#50B1F2FF", + "comment": "Цвет обводки информация", + "enabled": false + }, + "outlineInfoActive": { + "value": "#0F7BC2FF", + "comment": "Цвет обводки информация", + "enabled": false + }, + "outlinePositiveMinor": { + "value": "[general.green.850]", + "comment": "Минорный цвет обводки успех", + "enabled": false + }, + "outlinePositiveMinorHover": { + "value": "#137725FF", + "comment": "Минорный цвет обводки успех", + "enabled": false + }, + "outlinePositiveMinorActive": { + "value": "#0E5D1DFF", + "comment": "Минорный цвет обводки успех", + "enabled": false + }, + "outlineWarningMinor": { + "value": "[general.orange.850]", + "comment": "Минорный цвет обводки предупреждение", + "enabled": false + }, + "outlineWarningMinorHover": { + "value": "#95400FFF", + "comment": "Минорный цвет обводки предупреждение", + "enabled": false + }, + "outlineWarningMinorActive": { + "value": "#79340CFF", + "comment": "Минорный цвет обводки предупреждение", + "enabled": false + }, + "outlineNegativeMinor": { + "value": "[general.red.850]", + "comment": "Минорный цвет обводки ошибка", + "enabled": false + }, + "outlineNegativeMinorHover": { + "value": "#A01825FF", + "comment": "Минорный цвет обводки ошибка", + "enabled": false + }, + "outlineNegativeMinorActive": { + "value": "#85141FFF", + "comment": "Минорный цвет обводки ошибка", + "enabled": false + }, + "outlineInfoMinor": { + "value": "[general.blue.850]", + "comment": "Минорный цвет обводки информация", + "enabled": false + }, + "outlineInfoMinorHover": { + "value": "#145E8FFF", + "comment": "Минорный цвет обводки информация", + "enabled": false + }, + "outlineInfoMinorActive": { + "value": "#114C74FF", + "comment": "Минорный цвет обводки информация", + "enabled": false + }, + "outlineTransparentPositive": { + "value": "[general.green.500][-0.72]", + "comment": "Прозрачный цвет обводки успех", + "enabled": false + }, + "outlineTransparentPositiveHover": { + "value": "#1A9E32FF", + "comment": "Прозрачный цвет обводки успех", + "enabled": false + }, + "outlineTransparentPositiveActive": { + "value": "#1A9E3256", + "comment": "Прозрачный цвет обводки успех", + "enabled": false + }, + "outlineTransparentWarning": { + "value": "[general.orange.500][-0.72]", + "comment": "Прозрачный цвет обводки предупреждение", + "enabled": false + }, + "outlineTransparentWarningHover": { + "value": "#FA5F05FF", + "comment": "Прозрачный цвет обводки предупреждение", + "enabled": false + }, + "outlineTransparentWarningActive": { + "value": "#FA5F0556", + "comment": "Прозрачный цвет обводки предупреждение", + "enabled": false + }, + "outlineTransparentNegative": { + "value": "[general.red.500][-0.72]", + "comment": "Прозрачный цвет обводки предупреждение", + "enabled": false + }, + "outlineTransparentNegativeHover": { + "value": "#FF293EFF", + "comment": "Прозрачный цвет обводки предупреждение", + "enabled": false + }, + "outlineTransparentNegativeActive": { + "value": "#FF293E56", + "comment": "Прозрачный цвет обводки предупреждение", + "enabled": false + }, + "outlineTransparentInfo": { + "value": "[general.blue.500][-0.72]", + "comment": "Прозрачный цвет обводки информация", + "enabled": false + }, + "outlineTransparentInfoHover": { + "value": "#118CDFFF", + "comment": "Прозрачный цвет обводки информация", + "enabled": false + }, + "outlineTransparentInfoActive": { + "value": "#118CDF56", + "comment": "Прозрачный цвет обводки информация", + "enabled": false + } + }, + "onDark": { + "outlineSolidPrimary": { + "value": "[general.coolGray.900]", + "comment": "Основной непрозрачный цвет обводки на темном фоне", + "enabled": true + }, + "outlineSolidPrimaryHover": { + "value": "#FFFFFFFF", + "comment": "Основной непрозрачный цвет обводки на темном фоне", + "enabled": false + }, + "outlineSolidPrimaryActive": { + "value": "#A0ADB6FF", + "comment": "Основной непрозрачный цвет обводки на темном фоне", + "enabled": false + }, + "outlineSolidSecondary": { + "value": "[general.coolGray.850]", + "comment": "Вторичный непрозрачный цвет обводки на темном фоне", + "enabled": true + }, + "outlineSolidSecondaryHover": { + "value": "#FFFFFFFF", + "comment": "Вторичный непрозрачный цвет обводки на темном фоне", + "enabled": false + }, + "outlineSolidSecondaryActive": { + "value": "#96A2ABFF", + "comment": "Вторичный непрозрачный цвет обводки на темном фоне", + "enabled": false + }, + "outlineSolidTertiary": { + "value": "[general.coolGray.800]", + "comment": "Третичный непрозрачный цвет обводки на темном фоне", + "enabled": false + }, + "outlineSolidTertiaryHover": { + "value": "#FFFFFFFF", + "comment": "Третичный непрозрачный цвет обводки на темном фоне", + "enabled": false + }, + "outlineSolidTertiaryActive": { + "value": "#828E97FF", + "comment": "Третичный непрозрачный цвет обводки на темном фоне", + "enabled": false + }, + "outlineTransparentDefault": { + "value": "[general.coolGray.50][-0.0400]", + "comment": "Прозрачный цвет обводки по умолчанию на темном фоне", + "enabled": false + }, + "outlineTransparentDefaultHover": { + "value": "#F8FAFC93", + "comment": "Прозрачный цвет обводки по умолчанию на темном фоне", + "enabled": false + }, + "outlineTransparentDefaultActive": { + "value": "#F8FAFCC4", + "comment": "Прозрачный цвет обводки по умолчанию на темном фоне", + "enabled": false + }, + "outlineTransparentPrimary": { + "value": "[general.coolGray.50][-0.880]", + "comment": "Основной прозрачный цвет обводки на темном фоне", + "enabled": false + }, + "outlineTransparentPrimaryHover": { + "value": "#F8FAFCFF", + "comment": "Основной прозрачный цвет обводки на темном фоне", + "enabled": false + }, + "outlineTransparentPrimaryActive": { + "value": "#F8FAFC25", + "comment": "Основной прозрачный цвет обводки на темном фоне", + "enabled": false + }, + "outlineTransparentSecondary": { + "value": "[general.coolGray.50][-0.800]", + "comment": "Вторичный прозрачный цвет обводки на темном фоне", + "enabled": false + }, + "outlineTransparentSecondaryHover": { + "value": "#F8FAFCFF", + "comment": "Вторичный прозрачный цвет обводки на темном фоне", + "enabled": false + }, + "outlineTransparentSecondaryActive": { + "value": "#F8FAFC3D", + "comment": "Вторичный прозрачный цвет обводки на темном фоне", + "enabled": false + }, + "outlineTransparentTertiary": { + "value": "[general.coolGray.50][-0.720]", + "comment": "Третичный прозрачный цвет обводки на темном фоне", + "enabled": false + }, + "outlineTransparentTertiaryHover": { + "value": "#F8FAFCFF", + "comment": "Третичный прозрачный цвет обводки на темном фоне", + "enabled": false + }, + "outlineTransparentTertiaryActive": { + "value": "#F8FAFC56", + "comment": "Третичный прозрачный цвет обводки на темном фоне", + "enabled": false + }, + "outlineClear": { + "value": "#FFFFFF00", + "comment": "Бесцветная обводка на темном фоне", + "enabled": false + }, + "outlineClearHover": { + "value": "#FFFFFF00", + "comment": "Бесцветная обводка на темном фоне", + "enabled": false + }, + "outlineClearActive": { + "value": "#FFFFFF00", + "comment": "Бесцветная обводка на темном фоне", + "enabled": false + }, + "outlineAccent": { + "value": "[general.herbal.500]", + "comment": "Акцентный цвет обводки на темном фоне", + "enabled": true + }, + "outlineAccentHover": { + "value": "#0EB90EFF", + "comment": "Акцентный цвет обводки на темном фоне", + "enabled": false + }, + "outlineAccentActive": { + "value": "#0A800AFF", + "comment": "Акцентный цвет обводки на темном фоне", + "enabled": false + }, + "outlineAccentGradient": { + "value": "#FFFFFF", + "comment": "Акцентный цвет обводки с градиентом на темном фоне", + "enabled": false + }, + "outlineAccentGradientHover": { + "value": "#CCCCCCFF", + "comment": "Акцентный цвет обводки с градиентом на темном фоне", + "enabled": false + }, + "outlineAccentGradientActive": { + "value": "#E6E6E6FF", + "comment": "Акцентный цвет обводки с градиентом на темном фоне", + "enabled": false + }, + "outlineAccentMinor": { + "value": "[general.herbal.850]", + "comment": "Акцентный минорный непрозрачный цвет обводки на темном фоне", + "enabled": false + }, + "outlineAccentMinorHover": { + "value": "#0F760FFF", + "comment": "Акцентный минорный непрозрачный цвет обводки на темном фоне", + "enabled": false + }, + "outlineAccentMinorActive": { + "value": "#0B5B0BFF", + "comment": "Акцентный минорный непрозрачный цвет обводки на темном фоне", + "enabled": false + }, + "outlineAccentMinorGradient": { + "value": "#FFFFFF", + "comment": "Акцентный минорный цвет обводки с градиентом на темном фоне", + "enabled": false + }, + "outlineAccentMinorGradientHover": { + "value": "#CCCCCCFF", + "comment": "Акцентный минорный цвет обводки с градиентом на темном фоне", + "enabled": false + }, + "outlineAccentMinorGradientActive": { + "value": "#E6E6E6FF", + "comment": "Акцентный минорный цвет обводки с градиентом на темном фоне", + "enabled": false + }, + "outlineTransparentAccent": { + "value": "[general.herbal.500][-0.6]", + "comment": "Прозрачный акцентный цвет обводки на темном фоне", + "enabled": false + }, + "outlineTransparentAccentHover": { + "value": "#0C9D0CFF", + "comment": "Прозрачный акцентный цвет обводки на темном фоне", + "enabled": false + }, + "outlineTransparentAccentActive": { + "value": "#0C9D0C7A", + "comment": "Прозрачный акцентный цвет обводки на темном фоне", + "enabled": false + }, + "outlineTransparentAccentGradient": { + "value": "#FFFFFF", + "comment": "Прозрачный акцентный цвет обводки с градиентом на темном фоне", + "enabled": false + }, + "outlineTransparentAccentGradientHover": { + "value": "#CCCCCCFF", + "comment": "Прозрачный акцентный цвет обводки с градиентом на темном фоне", + "enabled": false + }, + "outlineTransparentAccentGradientActive": { + "value": "#E6E6E6FF", + "comment": "Прозрачный акцентный цвет обводки с градиентом на темном фоне", + "enabled": false + }, + "outlinePromo": { + "value": "#FFFFFF", + "comment": "Промо цвет обводки на темном фоне", + "enabled": false + }, + "outlinePromoHover": { + "value": "#CCCCCCFF", + "comment": "Промо цвет обводки на темном фоне", + "enabled": false + }, + "outlinePromoActive": { + "value": "#E6E6E6FF", + "comment": "Промо цвет обводки на темном фоне", + "enabled": false + }, + "outlinePromoGradient": { + "value": "#FFFFFF", + "comment": "Промо цвет обводки с градиентом на темном фоне", + "enabled": false + }, + "outlinePromoGradientHover": { + "value": "#CCCCCCFF", + "comment": "Промо цвет обводки с градиентом на темном фоне", + "enabled": false + }, + "outlinePromoGradientActive": { + "value": "#E6E6E6FF", + "comment": "Промо цвет обводки с градиентом на темном фоне", + "enabled": false + }, + "outlinePromoMinor": { + "value": "#FFFFFF", + "comment": "Минорный промо цвет обводки на темном фоне", + "enabled": false + }, + "outlinePromoMinorHover": { + "value": "#CCCCCCFF", + "comment": "Минорный промо цвет обводки на темном фоне", + "enabled": false + }, + "outlinePromoMinorActive": { + "value": "#E6E6E6FF", + "comment": "Минорный промо цвет обводки на темном фоне", + "enabled": false + }, + "outlinePromoMinorGradient": { + "value": "#FFFFFF", + "comment": "Минорный промо цвет обводки с градиентом на темном фоне", + "enabled": false + }, + "outlinePromoMinorGradientHover": { + "value": "#CCCCCCFF", + "comment": "Минорный промо цвет обводки с градиентом на темном фоне", + "enabled": false + }, + "outlinePromoMinorGradientActive": { + "value": "#E6E6E6FF", + "comment": "Минорный промо цвет обводки с градиентом на темном фоне", + "enabled": false + }, + "outlinePositive": { + "value": "[general.green.500]", + "comment": "Цвет обводки успех на темном фоне", + "enabled": true + }, + "outlinePositiveHover": { + "value": "#1EB83AFF", + "comment": "Цвет обводки успех на темном фоне", + "enabled": false + }, + "outlinePositiveActive": { + "value": "#15842AFF", + "comment": "Цвет обводки успех на темном фоне", + "enabled": false + }, + "outlineWarning": { + "value": "[general.orange.500]", + "comment": "Цвет обводки предупреждение на темном фоне", + "enabled": false + }, + "outlineWarningHover": { + "value": "#FB7223FF", + "comment": "Цвет обводки предупреждение на темном фоне", + "enabled": false + }, + "outlineWarningActive": { + "value": "#DC5304FF", + "comment": "Цвет обводки предупреждение на темном фоне", + "enabled": false + }, + "outlineNegative": { + "value": "[general.red.500]", + "comment": "Цвет обводки ошибка на темном фоне", + "enabled": true + }, + "outlineNegativeHover": { + "value": "#FF475AFF", + "comment": "Цвет обводки ошибка на темном фоне", + "enabled": false + }, + "outlineNegativeActive": { + "value": "#FF0A23FF", + "comment": "Цвет обводки ошибка на темном фоне", + "enabled": false + }, + "outlineInfo": { + "value": "[general.blue.500]", + "comment": "Цвет обводки информация на темном фоне", + "enabled": true + }, + "outlineInfoHover": { + "value": "#50B1F2FF", + "comment": "Цвет обводки информация на темном фоне", + "enabled": false + }, + "outlineInfoActive": { + "value": "#0F7BC2FF", + "comment": "Цвет обводки информация на темном фоне", + "enabled": false + }, + "outlinePositiveMinor": { + "value": "[general.green.850]", + "comment": "Минорный цвет обводки успех на темном фоне", + "enabled": false + }, + "outlinePositiveMinorHover": { + "value": "#137725FF", + "comment": "Минорный цвет обводки успех на темном фоне", + "enabled": false + }, + "outlinePositiveMinorActive": { + "value": "#0E5D1DFF", + "comment": "Минорный цвет обводки успех на темном фоне", + "enabled": false + }, + "outlineWarningMinor": { + "value": "[general.orange.850]", + "comment": "Минорный цвет обводки предупреждение на темном фоне", + "enabled": false + }, + "outlineWarningMinorHover": { + "value": "#95400FFF", + "comment": "Минорный цвет обводки предупреждение на темном фоне", + "enabled": false + }, + "outlineWarningMinorActive": { + "value": "#79340CFF", + "comment": "Минорный цвет обводки предупреждение на темном фоне", + "enabled": false + }, + "outlineNegativeMinor": { + "value": "[general.red.850]", + "comment": "Минорный цвет обводки ошибка на темном фоне", + "enabled": false + }, + "outlineNegativeMinorHover": { + "value": "#A01825FF", + "comment": "Минорный цвет обводки ошибка на темном фоне", + "enabled": false + }, + "outlineNegativeMinorActive": { + "value": "#85141FFF", + "comment": "Минорный цвет обводки ошибка на темном фоне", + "enabled": false + }, + "outlineInfoMinor": { + "value": "[general.blue.850]", + "comment": "Минорный цвет обводки информация на темном фоне", + "enabled": false + }, + "outlineInfoMinorHover": { + "value": "#145E8FFF", + "comment": "Минорный цвет обводки информация на темном фоне", + "enabled": false + }, + "outlineInfoMinorActive": { + "value": "#114C74FF", + "comment": "Минорный цвет обводки информация на темном фоне", + "enabled": false + }, + "outlineTransparentPositive": { + "value": "[general.green.500][-0.72]", + "comment": "Прозрачный цвет обводки успех на темном фоне", + "enabled": false + }, + "outlineTransparentPositiveHover": { + "value": "#1A9E32FF", + "comment": "Прозрачный цвет обводки успех на темном фоне", + "enabled": false + }, + "outlineTransparentPositiveActive": { + "value": "#1A9E3256", + "comment": "Прозрачный цвет обводки успех на темном фоне", + "enabled": false + }, + "outlineTransparentWarning": { + "value": "[general.orange.500][-0.72]", + "comment": "Прозрачный цвет обводки предупреждение на темном фоне", + "enabled": false + }, + "outlineTransparentWarningHover": { + "value": "#FA5F05FF", + "comment": "Прозрачный цвет обводки предупреждение на темном фоне", + "enabled": false + }, + "outlineTransparentWarningActive": { + "value": "#FA5F0556", + "comment": "Прозрачный цвет обводки предупреждение на темном фоне", + "enabled": false + }, + "outlineTransparentNegative": { + "value": "[general.red.500][-0.72]", + "comment": "Прозрачный цвет обводки предупреждение на темном фоне", + "enabled": false + }, + "outlineTransparentNegativeHover": { + "value": "#FF293EFF", + "comment": "Прозрачный цвет обводки предупреждение на темном фоне", + "enabled": false + }, + "outlineTransparentNegativeActive": { + "value": "#FF293E56", + "comment": "Прозрачный цвет обводки предупреждение на темном фоне", + "enabled": false + }, + "outlineTransparentInfo": { + "value": "[general.blue.500][-0.72]", + "comment": "Прозрачный цвет обводки информация на темном фоне", + "enabled": false + }, + "outlineTransparentInfoHover": { + "value": "#118CDFFF", + "comment": "Прозрачный цвет обводки информация на темном фоне", + "enabled": false + }, + "outlineTransparentInfoActive": { + "value": "#118CDF56", + "comment": "Прозрачный цвет обводки информация на темном фоне", + "enabled": false + } + }, + "onLight": { + "outlineSolidPrimary": { + "value": "[general.coolGray.200]", + "comment": "Основной непрозрачный цвет обводки на светлом фоне", + "enabled": true + }, + "outlineSolidPrimaryHover": { + "value": "#AFC2CFFF", + "comment": "Основной непрозрачный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineSolidPrimaryActive": { + "value": "#C2D1DBFF", + "comment": "Основной непрозрачный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineSolidSecondary": { + "value": "[general.coolGray.300]", + "comment": "Вторичный непрозрачный цвет обводки на светлом фоне", + "enabled": true + }, + "outlineSolidSecondaryHover": { + "value": "#FFFFFFFF", + "comment": "Вторичный непрозрачный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineSolidSecondaryActive": { + "value": "#303941FF", + "comment": "Вторичный непрозрачный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineSolidTertiary": { + "value": "[general.coolGray.700]", + "comment": "Третичный непрозрачный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineSolidTertiaryHover": { + "value": "#FFFFFFFF", + "comment": "Третичный непрозрачный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineSolidTertiaryActive": { + "value": "#68757DFF", + "comment": "Третичный непрозрачный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineTransparentDefault": { + "value": "[general.coolGray.1000][-0.0400]", + "comment": "Прозрачный цвет обводки по умолчанию на светлом фоне", + "enabled": false + }, + "outlineTransparentDefaultHover": { + "value": "#070B0E93", + "comment": "Прозрачный цвет обводки по умолчанию на светлом фоне", + "enabled": false + }, + "outlineTransparentDefaultActive": { + "value": "#070B0EC4", + "comment": "Прозрачный цвет обводки по умолчанию на светлом фоне", + "enabled": false + }, + "outlineTransparentPrimary": { + "value": "[general.coolGray.1000][-0.880]", + "comment": "Основной прозрачный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineTransparentPrimaryHover": { + "value": "#070B0EFF", + "comment": "Основной прозрачный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineTransparentPrimaryActive": { + "value": "#070B0E25", + "comment": "Основной прозрачный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineTransparentSecondary": { + "value": "[general.coolGray.1000][-0.720]", + "comment": "Вторичный прозрачный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineTransparentSecondaryHover": { + "value": "#070B0EFF", + "comment": "Вторичный прозрачный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineTransparentSecondaryActive": { + "value": "#070B0E56", + "comment": "Вторичный прозрачный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineTransparentTertiary": { + "value": "[general.coolGray.1000][-0.440]", + "comment": "Третичный прозрачный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineTransparentTertiaryHover": { + "value": "#070B0EFF", + "comment": "Третичный прозрачный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineTransparentTertiaryActive": { + "value": "#070B0EAB", + "comment": "Третичный прозрачный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineClear": { + "value": "#FFFFFF00", + "comment": "Бесцветная обводка на светлом фоне", + "enabled": false + }, + "outlineClearHover": { + "value": "#FFFFFF00", + "comment": "Бесцветная обводка на светлом фоне", + "enabled": false + }, + "outlineClearActive": { + "value": "#FFFFFF00", + "comment": "Бесцветная обводка на светлом фоне", + "enabled": false + }, + "outlineAccent": { + "value": "[general.herbal.700]", + "comment": "Акцентный цвет обводки на светлом фоне", + "enabled": true + }, + "outlineAccentHover": { + "value": "#17BA17FF", + "comment": "Акцентный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineAccentActive": { + "value": "#149F14FF", + "comment": "Акцентный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineAccentGradient": { + "value": "#FFFFFF", + "comment": "Акцентный цвет обводки с градиентом на светлом фоне", + "enabled": false + }, + "outlineAccentGradientHover": { + "value": "#CCCCCCFF", + "comment": "Акцентный цвет обводки с градиентом на светлом фоне", + "enabled": false + }, + "outlineAccentGradientActive": { + "value": "#E6E6E6FF", + "comment": "Акцентный цвет обводки с градиентом на светлом фоне", + "enabled": false + }, + "outlineAccentMinor": { + "value": "[general.herbal.250]", + "comment": "Акцентный минорный непрозрачный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineAccentMinorHover": { + "value": "#57EA57FF", + "comment": "Акцентный минорный непрозрачный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineAccentMinorActive": { + "value": "#21E421FF", + "comment": "Акцентный минорный непрозрачный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineAccentMinorGradient": { + "value": "#FFFFFF", + "comment": "Акцентный минорный цвет обводки с градиентом на светлом фоне", + "enabled": false + }, + "outlineAccentMinorGradientHover": { + "value": "#CCCCCCFF", + "comment": "Акцентный минорный цвет обводки с градиентом на светлом фоне", + "enabled": false + }, + "outlineAccentMinorGradientActive": { + "value": "#E6E6E6FF", + "comment": "Акцентный минорный цвет обводки с градиентом на светлом фоне", + "enabled": false + }, + "outlineTransparentAccent": { + "value": "[general.herbal.700][-0.6]", + "comment": "Прозрачный акцентный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineTransparentAccentHover": { + "value": "#108410FF", + "comment": "Прозрачный акцентный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineTransparentAccentActive": { + "value": "#1084107A", + "comment": "Прозрачный акцентный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineTransparentAccentGradient": { + "value": "#FFFFFF", + "comment": "Прозрачный акцентный цвет обводки с градиентом на светлом фоне", + "enabled": false + }, + "outlineTransparentAccentGradientHover": { + "value": "#CCCCCCFF", + "comment": "Прозрачный акцентный цвет обводки с градиентом на светлом фоне", + "enabled": false + }, + "outlineTransparentAccentGradientActive": { + "value": "#E6E6E6FF", + "comment": "Прозрачный акцентный цвет обводки с градиентом на светлом фоне", + "enabled": false + }, + "outlinePromo": { + "value": "#FFFFFF", + "comment": "Промо цвет обводки на светлом фоне", + "enabled": false + }, + "outlinePromoHover": { + "value": "#CCCCCCFF", + "comment": "Промо цвет обводки на светлом фоне", + "enabled": false + }, + "outlinePromoActive": { + "value": "#E6E6E6FF", + "comment": "Промо цвет обводки на светлом фоне", + "enabled": false + }, + "outlinePromoGradient": { + "value": "#FFFFFF", + "comment": "Промо цвет обводки с градиентом на светлом фоне", + "enabled": false + }, + "outlinePromoGradientHover": { + "value": "#CCCCCCFF", + "comment": "Промо цвет обводки с градиентом на светлом фоне", + "enabled": false + }, + "outlinePromoGradientActive": { + "value": "#E6E6E6FF", + "comment": "Промо цвет обводки с градиентом на светлом фоне", + "enabled": false + }, + "outlinePromoMinor": { + "value": "#FFFFFF", + "comment": "Минорный промо цвет обводки на светлом фоне", + "enabled": false + }, + "outlinePromoMinorHover": { + "value": "#CCCCCCFF", + "comment": "Минорный промо цвет обводки на светлом фоне", + "enabled": false + }, + "outlinePromoMinorActive": { + "value": "#E6E6E6FF", + "comment": "Минорный промо цвет обводки на светлом фоне", + "enabled": false + }, + "outlinePromoMinorGradient": { + "value": "#FFFFFF", + "comment": "Минорный промо цвет обводки с градиентом на светлом фоне", + "enabled": false + }, + "outlinePromoMinorGradientHover": { + "value": "#CCCCCCFF", + "comment": "Минорный промо цвет обводки с градиентом на светлом фоне", + "enabled": false + }, + "outlinePromoMinorGradientActive": { + "value": "#E6E6E6FF", + "comment": "Минорный промо цвет обводки с градиентом на светлом фоне", + "enabled": false + }, + "outlinePositive": { + "value": "[general.green.600]", + "comment": "Цвет обводки успех на светлом фоне", + "enabled": true + }, + "outlinePositiveHover": { + "value": "#13AA2CFF", + "comment": "Цвет обводки успех на светлом фоне", + "enabled": false + }, + "outlinePositiveActive": { + "value": "#0D731EFF", + "comment": "Цвет обводки успех на светлом фоне", + "enabled": false + }, + "outlineWarning": { + "value": "[general.orange.600]", + "comment": "Цвет обводки предупреждение на светлом фоне", + "enabled": false + }, + "outlineWarningHover": { + "value": "#FD650DFF", + "comment": "Цвет обводки предупреждение на светлом фоне", + "enabled": false + }, + "outlineWarningActive": { + "value": "#CA4B02FF", + "comment": "Цвет обводки предупреждение на светлом фоне", + "enabled": false + }, + "outlineNegative": { + "value": "[general.red.600]", + "comment": "Цвет обводки ошибка на светлом фоне", + "enabled": true + }, + "outlineNegativeHover": { + "value": "#F5384BFF", + "comment": "Цвет обводки ошибка на светлом фоне", + "enabled": false + }, + "outlineNegativeActive": { + "value": "#E40C22FF", + "comment": "Цвет обводки ошибка на светлом фоне", + "enabled": false + }, + "outlineInfo": { + "value": "[general.blue.600]", + "comment": "Цвет обводки информация на светлом фоне", + "enabled": true + }, + "outlineInfoHover": { + "value": "#34A7F4FF", + "comment": "Цвет обводки информация на светлом фоне", + "enabled": false + }, + "outlineInfoActive": { + "value": "#096CAEFF", + "comment": "Цвет обводки информация на светлом фоне", + "enabled": false + }, + "outlinePositiveMinor": { + "value": "[general.green.250]", + "comment": "Минорный цвет обводки успех на светлом фоне", + "enabled": false + }, + "outlinePositiveMinorHover": { + "value": "#5FE778FF", + "comment": "Минорный цвет обводки успех на светлом фоне", + "enabled": false + }, + "outlinePositiveMinorActive": { + "value": "#2ADF4BFF", + "comment": "Минорный цвет обводки успех на светлом фоне", + "enabled": false + }, + "outlineWarningMinor": { + "value": "[general.orange.250]", + "comment": "Минорный цвет обводки предупреждение на светлом фоне", + "enabled": false + }, + "outlineWarningMinorHover": { + "value": "#FFC7A8FF", + "comment": "Минорный цвет обводки предупреждение на светлом фоне", + "enabled": false + }, + "outlineWarningMinorActive": { + "value": "#FF9F6BFF", + "comment": "Минорный цвет обводки предупреждение на светлом фоне", + "enabled": false + }, + "outlineNegativeMinor": { + "value": "[general.red.250]", + "comment": "Минорный цвет обводки ошибка на светлом фоне", + "enabled": false + }, + "outlineNegativeMinorHover": { + "value": "#FD7785FF", + "comment": "Минорный цвет обводки ошибка на светлом фоне", + "enabled": false + }, + "outlineNegativeMinorActive": { + "value": "#FD96A0FF", + "comment": "Минорный цвет обводки ошибка на светлом фоне", + "enabled": false + }, + "outlineInfoMinor": { + "value": "[general.blue.250]", + "comment": "Минорный цвет обводки информация на светлом фоне", + "enabled": false + }, + "outlineInfoMinorHover": { + "value": "#D6EFFFFF", + "comment": "Минорный цвет обводки информация на светлом фоне", + "enabled": false + }, + "outlineInfoMinorActive": { + "value": "#66C2FFFF", + "comment": "Минорный цвет обводки информация на светлом фоне", + "enabled": false + }, + "outlineTransparentPositive": { + "value": "[general.green.600][-0.72]", + "comment": "Прозрачный цвет обводки успех на светлом фоне", + "enabled": false + }, + "outlineTransparentPositiveHover": { + "value": "#108E25FF", + "comment": "Прозрачный цвет обводки успех на светлом фоне", + "enabled": false + }, + "outlineTransparentPositiveActive": { + "value": "#108E2556", + "comment": "Прозрачный цвет обводки успех на светлом фоне", + "enabled": false + }, + "outlineTransparentWarning": { + "value": "[general.orange.600][-0.72]", + "comment": "Прозрачный цвет обводки предупреждение на светлом фоне", + "enabled": false + }, + "outlineTransparentWarningHover": { + "value": "#E85702FF", + "comment": "Прозрачный цвет обводки предупреждение на светлом фоне", + "enabled": false + }, + "outlineTransparentWarningActive": { + "value": "#E8570256", + "comment": "Прозрачный цвет обводки предупреждение на светлом фоне", + "enabled": false + }, + "outlineTransparentNegative": { + "value": "[general.red.600][-0.72]", + "comment": "Прозрачный цвет обводки предупреждение на светлом фоне", + "enabled": false + }, + "outlineTransparentNegativeHover": { + "value": "#F31B31FF", + "comment": "Прозрачный цвет обводки предупреждение на светлом фоне", + "enabled": false + }, + "outlineTransparentNegativeActive": { + "value": "#F31B3156", + "comment": "Прозрачный цвет обводки предупреждение на светлом фоне", + "enabled": false + }, + "outlineTransparentInfo": { + "value": "[general.blue.600][-0.72]", + "comment": "Прозрачный цвет обводки информация на светлом фоне", + "enabled": false + }, + "outlineTransparentInfoHover": { + "value": "#0B7ECBFF", + "comment": "Прозрачный цвет обводки информация на светлом фоне", + "enabled": false + }, + "outlineTransparentInfoActive": { + "value": "#0B7ECB56", + "comment": "Прозрачный цвет обводки информация на светлом фоне", + "enabled": false + } + }, + "inverse": { + "outlineSolidPrimary": { + "value": "[general.coolGray.200]", + "comment": "Инвертированный основной непрозрачный цвет обводки", + "enabled": true + }, + "outlineSolidPrimaryHover": { + "value": "#AFC2CFFF", + "comment": "Инвертированный основной непрозрачный цвет обводки", + "enabled": false + }, + "outlineSolidPrimaryActive": { + "value": "#C2D1DBFF", + "comment": "Инвертированный основной непрозрачный цвет обводки", + "enabled": false + }, + "outlineSolidSecondary": { + "value": "[general.coolGray.300]", + "comment": "Инвертированный вторичный непрозрачный цвет обводки", + "enabled": true + }, + "outlineSolidSecondaryHover": { + "value": "#FFFFFFFF", + "comment": "Инвертированный вторичный непрозрачный цвет обводки", + "enabled": false + }, + "outlineSolidSecondaryActive": { + "value": "#303941FF", + "comment": "Инвертированный вторичный непрозрачный цвет обводки", + "enabled": false + }, + "outlineSolidTertiary": { + "value": "[general.coolGray.700]", + "comment": "Инвертированный третичный непрозрачный цвет обводки", + "enabled": false + }, + "outlineSolidTertiaryHover": { + "value": "#FFFFFFFF", + "comment": "Инвертированный третичный непрозрачный цвет обводки", + "enabled": false + }, + "outlineSolidTertiaryActive": { + "value": "#68757DFF", + "comment": "Инвертированный третичный непрозрачный цвет обводки", + "enabled": false + }, + "outlineTransparentDefault": { + "value": "[general.coolGray.1000][-0.0400]", + "comment": "Инвертированный прозрачный цвет обводки по умолчанию", + "enabled": false + }, + "outlineTransparentDefaultHover": { + "value": "#070B0E93", + "comment": "Инвертированный прозрачный цвет обводки по умолчанию", + "enabled": false + }, + "outlineTransparentDefaultActive": { + "value": "#070B0EC4", + "comment": "Инвертированный прозрачный цвет обводки по умолчанию", + "enabled": false + }, + "outlineTransparentPrimary": { + "value": "[general.coolGray.1000][-0.880]", + "comment": "Инвертированный основной прозрачный цвет обводки", + "enabled": false + }, + "outlineTransparentPrimaryHover": { + "value": "#070B0EFF", + "comment": "Инвертированный основной прозрачный цвет обводки", + "enabled": false + }, + "outlineTransparentPrimaryActive": { + "value": "#070B0E25", + "comment": "Инвертированный основной прозрачный цвет обводки", + "enabled": false + }, + "outlineTransparentSecondary": { + "value": "[general.coolGray.1000][-0.720]", + "comment": "Инвертированный вторичный прозрачный цвет обводки", + "enabled": false + }, + "outlineTransparentSecondaryHover": { + "value": "#070B0EFF", + "comment": "Инвертированный вторичный прозрачный цвет обводки", + "enabled": false + }, + "outlineTransparentSecondaryActive": { + "value": "#070B0E56", + "comment": "Инвертированный вторичный прозрачный цвет обводки", + "enabled": false + }, + "outlineTransparentTertiary": { + "value": "[general.coolGray.1000][-0.440]", + "comment": "Инвертированный третичный прозрачный цвет обводки", + "enabled": false + }, + "outlineTransparentTertiaryHover": { + "value": "#070B0EFF", + "comment": "Инвертированный третичный прозрачный цвет обводки", + "enabled": false + }, + "outlineTransparentTertiaryActive": { + "value": "#070B0EAB", + "comment": "Инвертированный третичный прозрачный цвет обводки", + "enabled": false + }, + "outlineClear": { + "value": "#FFFFFF00", + "comment": "Инвертированная бесцветная обводка", + "enabled": false + }, + "outlineClearHover": { + "value": "#FFFFFF00", + "comment": "Инвертированная бесцветная обводка", + "enabled": false + }, + "outlineClearActive": { + "value": "#FFFFFF00", + "comment": "Инвертированная бесцветная обводка", + "enabled": false + }, + "outlineAccent": { + "value": "[general.herbal.700]", + "comment": "Инвертированный акцентный цвет обводки", + "enabled": true + }, + "outlineAccentHover": { + "value": "#17BA17FF", + "comment": "Инвертированный акцентный цвет обводки", + "enabled": false + }, + "outlineAccentActive": { + "value": "#149F14FF", + "comment": "Инвертированный акцентный цвет обводки", + "enabled": false + }, + "outlineAccentGradient": { + "value": "#FFFFFF", + "comment": "Инвертированный акцентный цвет обводки с градиентом", + "enabled": false + }, + "outlineAccentGradientHover": { + "value": "#CCCCCCFF", + "comment": "Инвертированный акцентный цвет обводки с градиентом", + "enabled": false + }, + "outlineAccentGradientActive": { + "value": "#E6E6E6FF", + "comment": "Инвертированный акцентный цвет обводки с градиентом", + "enabled": false + }, + "outlineAccentMinor": { + "value": "[general.herbal.250]", + "comment": "Инвертированный акцентный минорный непрозрачный цвет обводки", + "enabled": false + }, + "outlineAccentMinorHover": { + "value": "#57EA57FF", + "comment": "Инвертированный акцентный минорный непрозрачный цвет обводки", + "enabled": false + }, + "outlineAccentMinorActive": { + "value": "#21E421FF", + "comment": "Инвертированный акцентный минорный непрозрачный цвет обводки", + "enabled": false + }, + "outlineAccentMinorGradient": { + "value": "#FFFFFF", + "comment": "Инвертированный акцентный минорный цвет обводки с градиентом", + "enabled": false + }, + "outlineAccentMinorGradientHover": { + "value": "#CCCCCCFF", + "comment": "Инвертированный акцентный минорный цвет обводки с градиентом", + "enabled": false + }, + "outlineAccentMinorGradientActive": { + "value": "#E6E6E6FF", + "comment": "Инвертированный акцентный минорный цвет обводки с градиентом", + "enabled": false + }, + "outlineTransparentAccent": { + "value": "[general.herbal.700][-0.6]", + "comment": "Прозрачный инвертированный акцентный цвет обводки", + "enabled": false + }, + "outlineTransparentAccentHover": { + "value": "#108410FF", + "comment": "Прозрачный инвертированный акцентный цвет обводки", + "enabled": false + }, + "outlineTransparentAccentActive": { + "value": "#1084107A", + "comment": "Прозрачный инвертированный акцентный цвет обводки", + "enabled": false + }, + "outlineTransparentAccentGradient": { + "value": "#FFFFFF", + "comment": "Прозрачный инвертированный акцентный цвет обводки с градиентом", + "enabled": false + }, + "outlineTransparentAccentGradientHover": { + "value": "#CCCCCCFF", + "comment": "Прозрачный инвертированный акцентный цвет обводки с градиентом", + "enabled": false + }, + "outlineTransparentAccentGradientActive": { + "value": "#E6E6E6FF", + "comment": "Прозрачный инвертированный акцентный цвет обводки с градиентом", + "enabled": false + }, + "outlinePromo": { + "value": "#FFFFFF", + "comment": "Инвертированный промо цвет обводки", + "enabled": false + }, + "outlinePromoHover": { + "value": "#CCCCCCFF", + "comment": "Инвертированный промо цвет обводки", + "enabled": false + }, + "outlinePromoActive": { + "value": "#E6E6E6FF", + "comment": "Инвертированный промо цвет обводки", + "enabled": false + }, + "outlinePromoGradient": { + "value": "#FFFFFF", + "comment": "Инвертированный промо цвет обводки с градиентом", + "enabled": false + }, + "outlinePromoGradientHover": { + "value": "#CCCCCCFF", + "comment": "Инвертированный промо цвет обводки с градиентом", + "enabled": false + }, + "outlinePromoGradientActive": { + "value": "#E6E6E6FF", + "comment": "Инвертированный промо цвет обводки с градиентом", + "enabled": false + }, + "outlinePromoMinor": { + "value": "#FFFFFF", + "comment": "Инвертированный минорный промо цвет обводки", + "enabled": false + }, + "outlinePromoMinorHover": { + "value": "#CCCCCCFF", + "comment": "Инвертированный минорный промо цвет обводки", + "enabled": false + }, + "outlinePromoMinorActive": { + "value": "#E6E6E6FF", + "comment": "Инвертированный минорный промо цвет обводки", + "enabled": false + }, + "outlinePromoMinorGradient": { + "value": "#FFFFFF", + "comment": "Инвертированный минорный промо цвет обводки с градиентом", + "enabled": false + }, + "outlinePromoMinorGradientHover": { + "value": "#CCCCCCFF", + "comment": "Инвертированный минорный промо цвет обводки с градиентом", + "enabled": false + }, + "outlinePromoMinorGradientActive": { + "value": "#E6E6E6FF", + "comment": "Инвертированный минорный промо цвет обводки с градиентом", + "enabled": false + }, + "outlinePositive": { + "value": "[general.green.600]", + "comment": "Инвертированный цвет обводки успех", + "enabled": true + }, + "outlinePositiveHover": { + "value": "#13AA2CFF", + "comment": "Инвертированный цвет обводки успех", + "enabled": false + }, + "outlinePositiveActive": { + "value": "#0D731EFF", + "comment": "Инвертированный цвет обводки успех", + "enabled": false + }, + "outlineWarning": { + "value": "[general.orange.600]", + "comment": "Инвертированный цвет обводки предупреждение", + "enabled": false + }, + "outlineWarningHover": { + "value": "#FD650DFF", + "comment": "Инвертированный цвет обводки предупреждение", + "enabled": false + }, + "outlineWarningActive": { + "value": "#CA4B02FF", + "comment": "Инвертированный цвет обводки предупреждение", + "enabled": false + }, + "outlineNegative": { + "value": "[general.red.600]", + "comment": "Инвертированный цвет обводки ошибка", + "enabled": true + }, + "outlineNegativeHover": { + "value": "#F5384BFF", + "comment": "Инвертированный цвет обводки ошибка", + "enabled": false + }, + "outlineNegativeActive": { + "value": "#E40C22FF", + "comment": "Инвертированный цвет обводки ошибка", + "enabled": false + }, + "outlineInfo": { + "value": "[general.blue.600]", + "comment": "Инвертированный цвет обводки информация", + "enabled": true + }, + "outlineInfoHover": { + "value": "#34A7F4FF", + "comment": "Инвертированный цвет обводки информация", + "enabled": false + }, + "outlineInfoActive": { + "value": "#096CAEFF", + "comment": "Инвертированный цвет обводки информация", + "enabled": false + }, + "outlinePositiveMinor": { + "value": "[general.green.250]", + "comment": "Инвертированный минорный цвет обводки успех", + "enabled": false + }, + "outlinePositiveMinorHover": { + "value": "#5FE778FF", + "comment": "Инвертированный минорный цвет обводки успех", + "enabled": false + }, + "outlinePositiveMinorActive": { + "value": "#2ADF4BFF", + "comment": "Инвертированный минорный цвет обводки успех", + "enabled": false + }, + "outlineWarningMinor": { + "value": "[general.orange.250]", + "comment": "Инвертированный минорный цвет обводки предупреждение", + "enabled": false + }, + "outlineWarningMinorHover": { + "value": "#FFC7A8FF", + "comment": "Инвертированный минорный цвет обводки предупреждение", + "enabled": false + }, + "outlineWarningMinorActive": { + "value": "#FF9F6BFF", + "comment": "Инвертированный минорный цвет обводки предупреждение", + "enabled": false + }, + "outlineNegativeMinor": { + "value": "[general.red.250]", + "comment": "Инвертированный минорный цвет обводки ошибка", + "enabled": false + }, + "outlineNegativeMinorHover": { + "value": "#FD7785FF", + "comment": "Инвертированный минорный цвет обводки ошибка", + "enabled": false + }, + "outlineNegativeMinorActive": { + "value": "#FD96A0FF", + "comment": "Инвертированный минорный цвет обводки ошибка", + "enabled": false + }, + "outlineInfoMinor": { + "value": "[general.blue.250]", + "comment": "Инвертированный минорный цвет обводки информация", + "enabled": false + }, + "outlineInfoMinorHover": { + "value": "#D6EFFFFF", + "comment": "Инвертированный минорный цвет обводки информация", + "enabled": false + }, + "outlineInfoMinorActive": { + "value": "#66C2FFFF", + "comment": "Инвертированный минорный цвет обводки информация", + "enabled": false + }, + "outlineTransparentPositive": { + "value": "[general.green.600][-0.72]", + "comment": "Прозрачный инвертированный цвет обводки успех", + "enabled": false + }, + "outlineTransparentPositiveHover": { + "value": "#108E25FF", + "comment": "Прозрачный инвертированный цвет обводки успех", + "enabled": false + }, + "outlineTransparentPositiveActive": { + "value": "#108E2556", + "comment": "Прозрачный инвертированный цвет обводки успех", + "enabled": false + }, + "outlineTransparentWarning": { + "value": "[general.orange.600][-0.72]", + "comment": "Прозрачный инвертированный цвет обводки предупреждение", + "enabled": false + }, + "outlineTransparentWarningHover": { + "value": "#E85702FF", + "comment": "Прозрачный инвертированный цвет обводки предупреждение", + "enabled": false + }, + "outlineTransparentWarningActive": { + "value": "#E8570256", + "comment": "Прозрачный инвертированный цвет обводки предупреждение", + "enabled": false + }, + "outlineTransparentNegative": { + "value": "[general.red.600][-0.72]", + "comment": "Прозрачный инвертированный цвет обводки предупреждение", + "enabled": false + }, + "outlineTransparentNegativeHover": { + "value": "#F31B31FF", + "comment": "Прозрачный инвертированный цвет обводки предупреждение", + "enabled": false + }, + "outlineTransparentNegativeActive": { + "value": "#F31B3156", + "comment": "Прозрачный инвертированный цвет обводки предупреждение", + "enabled": false + }, + "outlineTransparentInfo": { + "value": "[general.blue.600][-0.72]", + "comment": "Прозрачный инвертированный цвет обводки информация", + "enabled": false + }, + "outlineTransparentInfoHover": { + "value": "#0B7ECBFF", + "comment": "Прозрачный инвертированный цвет обводки информация", + "enabled": false + }, + "outlineTransparentInfoActive": { + "value": "#0B7ECB56", + "comment": "Прозрачный инвертированный цвет обводки информация", + "enabled": false + } + } + } + }, + "light": { + "text": { + "default": { + "textPrimaryHover": { + "value": "#6A7E8AFF", + "comment": "Основной цвет текста", + "enabled": false + }, + "textPrimaryActive": { + "value": "#47545CFF", + "comment": "Основной цвет текста", + "enabled": false + }, + "textSecondaryHover": { + "value": "#000000FF", + "comment": "Вторичный цвет текста", + "enabled": false + }, + "textSecondaryActive": { + "value": "#636D74FF", + "comment": "Вторичный цвет текста", + "enabled": false + }, + "textTertiary": { + "value": "[general.coolGray.1000][-0.720]", + "comment": "Третичный цвет текста", + "enabled": false + }, + "textTertiaryHover": { + "value": "#070B0EFF", + "comment": "Третичный цвет текста", + "enabled": false + }, + "textTertiaryActive": { + "value": "#070B0E56", + "comment": "Третичный цвет текста", + "enabled": false + }, + "textParagraph": { + "value": "[general.coolGray.1000][-0.200]", + "comment": "Сплошной наборный текст", + "enabled": false + }, + "textParagraphHover": { + "value": "#070B0E7A", + "comment": "Сплошной наборный текст", + "enabled": false + }, + "textParagraphActive": { + "value": "#070B0EA3", + "comment": "Сплошной наборный текст", + "enabled": false + }, + "textAccentHover": { + "value": "#19CC19FF", + "comment": "Акцентный цвет", + "enabled": false + }, + "textAccentActive": { + "value": "#15A815FF", + "comment": "Акцентный цвет", + "enabled": false + }, + "textAccentGradient": { + "value": "#FFFFFF", + "comment": "Акцентный цвет с градиентом", + "enabled": false + }, + "textAccentGradientHover": { + "value": "#000000FF", + "comment": "Акцентный цвет с градиентом", + "enabled": false + }, + "textAccentGradientActive": { + "value": "#CCCCCCFF", + "comment": "Акцентный цвет с градиентом", + "enabled": false + }, + "textAccentMinor": { + "value": "[general.herbal.900]", + "comment": "Акцентный минорный цвет", + "enabled": false + }, + "textAccentMinorHover": { + "value": "#157015FF", + "comment": "Акцентный минорный цвет", + "enabled": false + }, + "textAccentMinorActive": { + "value": "#0E4E0EFF", + "comment": "Акцентный минорный цвет", + "enabled": false + }, + "textAccentMinorGradient": { + "value": "#FFFFFF", + "comment": "Акцентный минорный цвет с градиентом", + "enabled": false + }, + "textAccentMinorGradientHover": { + "value": "#000000FF", + "comment": "Акцентный минорный цвет с градиентом", + "enabled": false + }, + "textAccentMinorGradientActive": { + "value": "#CCCCCCFF", + "comment": "Акцентный минорный цвет с градиентом", + "enabled": false + }, + "textPromo": { + "value": "#FFFFFF", + "comment": "Промо цвет", + "enabled": false + }, + "textPromoHover": { + "value": "#000000FF", + "comment": "Промо цвет", + "enabled": false + }, + "textPromoActive": { + "value": "#CCCCCCFF", + "comment": "Промо цвет", + "enabled": false + }, + "textPromoGradient": { + "value": "#FFFFFF", + "comment": "Промо цвет с градиентом", + "enabled": false + }, + "textPromoGradientHover": { + "value": "#000000FF", + "comment": "Промо цвет с градиентом", + "enabled": false + }, + "textPromoGradientActive": { + "value": "#CCCCCCFF", + "comment": "Промо цвет с градиентом", + "enabled": false + }, + "textPromoMinor": { + "value": "#FFFFFF", + "comment": "Минорный промо цвет", + "enabled": false + }, + "textPromoMinorHover": { + "value": "#000000FF", + "comment": "Минорный промо цвет", + "enabled": false + }, + "textPromoMinorActive": { + "value": "#CCCCCCFF", + "comment": "Минорный промо цвет", + "enabled": false + }, + "textPromoMinorGradient": { + "value": "#FFFFFF", + "comment": "Минорный промо цвет с градиентом", + "enabled": false + }, + "textPromoMinorGradientHover": { + "value": "#000000FF", + "comment": "Минорный промо цвет с градиентом", + "enabled": false + }, + "textPromoMinorGradientActive": { + "value": "#CCCCCCFF", + "comment": "Минорный промо цвет с градиентом", + "enabled": false + }, + "textPositiveHover": { + "value": "#19CC19FF", + "comment": "Цвет успеха", + "enabled": false + }, + "textPositiveActive": { + "value": "#15A815FF", + "comment": "Цвет успеха", + "enabled": false + }, + "textWarning": { + "value": "[general.orange.600]", + "comment": "Цвет предупреждения", + "enabled": false + }, + "textWarningHover": { + "value": "#FD6B17FF", + "comment": "Цвет предупреждения", + "enabled": false + }, + "textWarningActive": { + "value": "#C04802FF", + "comment": "Цвет предупреждения", + "enabled": false + }, + "textNegativeHover": { + "value": "#EE2F43FF", + "comment": "Цвет ошибки", + "enabled": false + }, + "textNegativeActive": { + "value": "#BD0F21FF", + "comment": "Цвет ошибки", + "enabled": false + }, + "textInfo": { + "value": "[general.blue.600]", + "comment": "Цвет информации", + "enabled": false + }, + "textInfoHover": { + "value": "#0D96F2FF", + "comment": "Цвет информации", + "enabled": false + }, + "textInfoActive": { + "value": "#0966A5FF", + "comment": "Цвет информации", + "enabled": false + }, + "textPositiveMinor": { + "value": "[general.green.900]", + "comment": "Минорный цвет успеха", + "enabled": false + }, + "textPositiveMinorHover": { + "value": "#196B28FF", + "comment": "Минорный цвет успеха", + "enabled": false + }, + "textPositiveMinorActive": { + "value": "#114A1CFF", + "comment": "Минорный цвет успеха", + "enabled": false + }, + "textWarningMinor": { + "value": "[general.orange.900]", + "comment": "Минорный цвет предупреждения", + "enabled": false + }, + "textWarningMinorHover": { + "value": "#843E15FF", + "comment": "Минорный цвет предупреждения", + "enabled": false + }, + "textWarningMinorActive": { + "value": "#602D10FF", + "comment": "Минорный цвет предупреждения", + "enabled": false + }, + "textNegativeMinor": { + "value": "[general.red.900]", + "comment": "Минорный цвет ошибки", + "enabled": false + }, + "textNegativeMinorHover": { + "value": "#8F1925FF", + "comment": "Минорный цвет ошибки", + "enabled": false + }, + "textNegativeMinorActive": { + "value": "#6C131CFF", + "comment": "Минорный цвет ошибки", + "enabled": false + }, + "textInfoMinor": { + "value": "[general.blue.900]", + "comment": "Минорный цвет информации", + "enabled": false + }, + "textInfoMinorHover": { + "value": "#1A577FFF", + "comment": "Минорный цвет информации", + "enabled": false + }, + "textInfoMinorActive": { + "value": "#13405DFF", + "comment": "Минорный цвет информации", + "enabled": false + }, + "textPrimary": { + "value": "[general.coolGray.900]", + "comment": "Основной цвет текста", + "enabled": true + }, + "textSecondary": { + "value": "[general.coolGray.500]", + "comment": "Вторичный цвет текста", + "enabled": true + }, + "textAccent": { + "value": "[general.herbal.700]", + "comment": "Акцентный цвет", + "enabled": true + }, + "textNegative": { + "value": "[general.red.700]", + "comment": "Цвет ошибки", + "enabled": true + }, + "textPositive": { + "value": "[general.herbal.700]", + "comment": "Цвет успеха", + "enabled": true + } + }, + "onDark": { + "textPrimaryHover": { + "value": "#000000FF", + "comment": "Основной цвет текста на темном фоне", + "enabled": false + }, + "textPrimaryActive": { + "value": "#636D74FF", + "comment": "Основной цвет текста на темном фоне", + "enabled": false + }, + "textSecondaryHover": { + "value": "#000000FF", + "comment": "Вторичный цвет текста на темном фоне", + "enabled": false + }, + "textSecondaryActive": { + "value": "#636D74FF", + "comment": "Вторичный цвет текста на темном фоне", + "enabled": false + }, + "textTertiary": { + "value": "rgba(255, 255, 255, 0.28)", + "comment": "Третичный цвет текста на темном фоне", + "enabled": false + }, + "textTertiaryHover": { + "value": "#FFFFFFFF", + "comment": "Третичный цвет текста на темном фоне", + "enabled": false + }, + "textTertiaryActive": { + "value": "#FFFFFF56", + "comment": "Третичный цвет текста на темном фоне", + "enabled": false + }, + "textParagraph": { + "value": "rgba(255, 255, 255, 0.8)", + "comment": "Сплошной наборный текст на темном фоне", + "enabled": false + }, + "textParagraphHover": { + "value": "#FFFFFF7A", + "comment": "Сплошной наборный текст на темном фоне", + "enabled": false + }, + "textParagraphActive": { + "value": "#FFFFFFA3", + "comment": "Сплошной наборный текст на темном фоне", + "enabled": false + }, + "textAccentHover": { + "value": "#19D719FF", + "comment": "Акцентный цвет на темном фоне", + "enabled": false + }, + "textAccentActive": { + "value": "#118D11FF", + "comment": "Акцентный цвет на темном фоне", + "enabled": false + }, + "textAccentGradient": { + "value": "#FFFFFF", + "comment": "Акцентный цвет с градиентом на темном фоне", + "enabled": false + }, + "textAccentGradientHover": { + "value": "#000000FF", + "comment": "Акцентный цвет с градиентом на темном фоне", + "enabled": false + }, + "textAccentGradientActive": { + "value": "#CCCCCCFF", + "comment": "Акцентный цвет с градиентом на темном фоне", + "enabled": false + }, + "textAccentMinorHover": { + "value": "#BDFFBDFF", + "comment": "Акцентный минорный цвет на темном фоне", + "enabled": false + }, + "textAccentMinorActive": { + "value": "#6BFF6BFF", + "comment": "Акцентный минорный цвет на темном фоне", + "enabled": false + }, + "textAccentMinorGradient": { + "value": "#FFFFFF", + "comment": "Акцентный минорный цвет с градиентом на темном фоне", + "enabled": false + }, + "textAccentMinorGradientHover": { + "value": "#000000FF", + "comment": "Акцентный минорный цвет с градиентом на темном фоне", + "enabled": false + }, + "textAccentMinorGradientActive": { + "value": "#CCCCCCFF", + "comment": "Акцентный минорный цвет с градиентом на темном фоне", + "enabled": false + }, + "textPromo": { + "value": "#FFFFFF", + "comment": "Промо цвет на темном фоне", + "enabled": false + }, + "textPromoHover": { + "value": "#000000FF", + "comment": "Промо цвет на темном фоне", + "enabled": false + }, + "textPromoActive": { + "value": "#CCCCCCFF", + "comment": "Промо цвет на темном фоне", + "enabled": false + }, + "textPromoGradient": { + "value": "#FFFFFF", + "comment": "Промо цвет на темном фоне с градиентом", + "enabled": false + }, + "textPromoGradientHover": { + "value": "#000000FF", + "comment": "Промо цвет на темном фоне с градиентом", + "enabled": false + }, + "textPromoGradientActive": { + "value": "#CCCCCCFF", + "comment": "Промо цвет на темном фоне с градиентом", + "enabled": false + }, + "textPromoMinor": { + "value": "#FFFFFF", + "comment": "Минорный промо цвет на темном фоне", + "enabled": false + }, + "textPromoMinorHover": { + "value": "#000000FF", + "comment": "Минорный промо цвет на темном фоне", + "enabled": false + }, + "textPromoMinorActive": { + "value": "#CCCCCCFF", + "comment": "Минорный промо цвет на темном фоне", + "enabled": false + }, + "textPromoMinorGradient": { + "value": "#FFFFFF", + "comment": "Минорный промо цвет на темном фоне с градиентом", + "enabled": false + }, + "textPromoMinorGradientHover": { + "value": "#000000FF", + "comment": "Минорный промо цвет на темном фоне с градиентом", + "enabled": false + }, + "textPromoMinorGradientActive": { + "value": "#CCCCCCFF", + "comment": "Минорный промо цвет на темном фоне с градиентом", + "enabled": false + }, + "textPositiveHover": { + "value": "#19D719FF", + "comment": "Цвет успеха на темном фоне", + "enabled": false + }, + "textPositiveActive": { + "value": "#118D11FF", + "comment": "Цвет успеха на темном фоне", + "enabled": false + }, + "textWarning": { + "value": "[general.orange.500]", + "comment": "Цвет предупреждения на темном фоне", + "enabled": false + }, + "textWarningHover": { + "value": "#FB782DFF", + "comment": "Цвет предупреждения на темном фоне", + "enabled": false + }, + "textWarningActive": { + "value": "#D25004FF", + "comment": "Цвет предупреждения на темном фоне", + "enabled": false + }, + "textNegativeHover": { + "value": "#FF5263FF", + "comment": "Цвет ошибки на темном фоне", + "enabled": false + }, + "textNegativeActive": { + "value": "#FF001AFF", + "comment": "Цвет ошибки на темном фоне", + "enabled": false + }, + "textInfo": { + "value": "[general.blue.500]", + "comment": "Цвет информации на темном фоне", + "enabled": false + }, + "textInfoHover": { + "value": "#2AA0EFFF", + "comment": "Цвет информации на темном фоне", + "enabled": false + }, + "textInfoActive": { + "value": "#0E75B9FF", + "comment": "Цвет информации на темном фоне", + "enabled": false + }, + "textPositiveMinor": { + "value": "[general.green.150]", + "comment": "Минорный цвет успеха на темном фоне", + "enabled": false + }, + "textPositiveMinorHover": { + "value": "#C5FCCFFF", + "comment": "Минорный цвет успеха на темном фоне", + "enabled": false + }, + "textPositiveMinorActive": { + "value": "#77F88FFF", + "comment": "Минорный цвет успеха на темном фоне", + "enabled": false + }, + "textWarningMinor": { + "value": "[general.orange.150]", + "comment": "Минорный цвет предупреждения на темном фоне", + "enabled": false + }, + "textWarningMinorHover": { + "value": "#FFFCFAFF", + "comment": "Минорный цвет предупреждения на темном фоне", + "enabled": false + }, + "textWarningMinorActive": { + "value": "#FDC9AAFF", + "comment": "Минорный цвет предупреждения на темном фоне", + "enabled": false + }, + "textNegativeMinor": { + "value": "[general.red.150]", + "comment": "Минорный цвет ошибки на темном фоне", + "enabled": false + }, + "textNegativeMinorHover": { + "value": "#FFFFFFFF", + "comment": "Минорный цвет ошибки на темном фоне", + "enabled": false + }, + "textNegativeMinorActive": { + "value": "#FFB8BFFF", + "comment": "Минорный цвет ошибки на темном фоне", + "enabled": false + }, + "textInfoMinor": { + "value": "[general.blue.150]", + "comment": "Минорный цвет информации на темном фоне", + "enabled": false + }, + "textInfoMinorHover": { + "value": "#FAFDFFFF", + "comment": "Минорный цвет информации на темном фоне", + "enabled": false + }, + "textInfoMinorActive": { + "value": "#A8DCFFFF", + "comment": "Минорный цвет информации на темном фоне", + "enabled": false + }, + "textPrimary": { + "value": "[general.coolGray.500]", + "comment": "Основной цвет текста на темном фоне", + "enabled": true + }, + "textSecondary": { + "value": "[general.coolGray.500]", + "comment": "Вторичный цвет текста на темном фоне", + "enabled": true + }, + "textAccent": { + "value": "[general.herbal.400]", + "comment": "Акцентный цвет на темном фоне", + "enabled": true + }, + "textAccentMinor": { + "value": "[general.herbal.150]", + "comment": "Акцентный минорный цвет на темном фоне", + "enabled": true + }, + "textNegative": { + "value": "[general.red.500]", + "comment": "Цвет ошибки на темном фоне", + "enabled": true + }, + "textPositive": { + "value": "[general.herbal.400]", + "comment": "Цвет успеха на темном фоне", + "enabled": true + } + }, + "onLight": { + "textPrimaryHover": { + "value": "#6A7E8AFF", + "comment": "Основной цвет текста на светлом фоне", + "enabled": false + }, + "textPrimaryActive": { + "value": "#47545CFF", + "comment": "Основной цвет текста на светлом фоне", + "enabled": false + }, + "textSecondaryHover": { + "value": "#000000FF", + "comment": "Вторичный цвет текста на светлом фоне", + "enabled": false + }, + "textSecondaryActive": { + "value": "#636D74FF", + "comment": "Вторичный цвет текста на светлом фоне", + "enabled": false + }, + "textTertiary": { + "value": "[general.coolGray.1000][-0.720]", + "comment": "Третичный цвет текста на светлом фоне", + "enabled": false + }, + "textTertiaryHover": { + "value": "#070B0EFF", + "comment": "Третичный цвет текста на светлом фоне", + "enabled": false + }, + "textTertiaryActive": { + "value": "#070B0E56", + "comment": "Третичный цвет текста на светлом фоне", + "enabled": false + }, + "textParagraph": { + "value": "[general.coolGray.1000][-0.200]", + "comment": "Сплошной наборный текст на светлом фоне", + "enabled": false + }, + "textParagraphHover": { + "value": "#070B0E7A", + "comment": "Сплошной наборный текст на светлом фоне", + "enabled": false + }, + "textParagraphActive": { + "value": "#070B0EA3", + "comment": "Сплошной наборный текст на светлом фоне", + "enabled": false + }, + "textAccentHover": { + "value": "#19CC19FF", + "comment": "Акцентный цвет на светлом фоне", + "enabled": false + }, + "textAccentActive": { + "value": "#15A815FF", + "comment": "Акцентный цвет на светлом фоне", + "enabled": false + }, + "textAccentGradient": { + "value": "#FFFFFF", + "comment": "Акцентный цвет с градиентом на светлом фоне", + "enabled": false + }, + "textAccentGradientHover": { + "value": "#000000FF", + "comment": "Акцентный цвет с градиентом на светлом фоне", + "enabled": false + }, + "textAccentGradientActive": { + "value": "#CCCCCCFF", + "comment": "Акцентный цвет с градиентом на светлом фоне", + "enabled": false + }, + "textAccentMinor": { + "value": "[general.herbal.900]", + "comment": "Акцентный минорный цвет на светлом фоне", + "enabled": false + }, + "textAccentMinorHover": { + "value": "#157015FF", + "comment": "Акцентный минорный цвет на светлом фоне", + "enabled": false + }, + "textAccentMinorActive": { + "value": "#0E4E0EFF", + "comment": "Акцентный минорный цвет на светлом фоне", + "enabled": false + }, + "textAccentMinorGradient": { + "value": "#FFFFFF", + "comment": "Акцентный минорный цвет с градиентом на светлом фоне", + "enabled": false + }, + "textAccentMinorGradientHover": { + "value": "#000000FF", + "comment": "Акцентный минорный цвет с градиентом на светлом фоне", + "enabled": false + }, + "textAccentMinorGradientActive": { + "value": "#CCCCCCFF", + "comment": "Акцентный минорный цвет с градиентом на светлом фоне", + "enabled": false + }, + "textPromo": { + "value": "#FFFFFF", + "comment": "Промо цвет на светлом фоне", + "enabled": false + }, + "textPromoHover": { + "value": "#000000FF", + "comment": "Промо цвет на светлом фоне", + "enabled": false + }, + "textPromoActive": { + "value": "#CCCCCCFF", + "comment": "Промо цвет на светлом фоне", + "enabled": false + }, + "textPromoGradient": { + "value": "#FFFFFF", + "comment": "Промо цвет на светлом фоне с градиентом", + "enabled": false + }, + "textPromoGradientHover": { + "value": "#000000FF", + "comment": "Промо цвет на светлом фоне с градиентом", + "enabled": false + }, + "textPromoGradientActive": { + "value": "#CCCCCCFF", + "comment": "Промо цвет на светлом фоне с градиентом", + "enabled": false + }, + "textPromoMinor": { + "value": "#FFFFFF", + "comment": "Минорный промо цвет на светлом фоне", + "enabled": false + }, + "textPromoMinorHover": { + "value": "#000000FF", + "comment": "Минорный промо цвет на светлом фоне", + "enabled": false + }, + "textPromoMinorActive": { + "value": "#CCCCCCFF", + "comment": "Минорный промо цвет на светлом фоне", + "enabled": false + }, + "textPromoMinorGradient": { + "value": "#FFFFFF", + "comment": "Минорный промо цвет на светлом фоне с градиентом", + "enabled": false + }, + "textPromoMinorGradientHover": { + "value": "#000000FF", + "comment": "Минорный промо цвет на светлом фоне с градиентом", + "enabled": false + }, + "textPromoMinorGradientActive": { + "value": "#CCCCCCFF", + "comment": "Минорный промо цвет на светлом фоне с градиентом", + "enabled": false + }, + "textPositiveHover": { + "value": "#19CC19FF", + "comment": "Цвет успеха на светлом фоне", + "enabled": false + }, + "textPositiveActive": { + "value": "#15A815FF", + "comment": "Цвет успеха на светлом фоне", + "enabled": false + }, + "textWarning": { + "value": "[general.orange.600]", + "comment": "Цвет предупреждения на светлом фоне", + "enabled": false + }, + "textWarningHover": { + "value": "#FD6B17FF", + "comment": "Цвет предупреждения на светлом фоне", + "enabled": false + }, + "textWarningActive": { + "value": "#C04802FF", + "comment": "Цвет предупреждения на светлом фоне", + "enabled": false + }, + "textNegativeHover": { + "value": "#EE2F43FF", + "comment": "Цвет ошибки на светлом фоне", + "enabled": false + }, + "textNegativeActive": { + "value": "#BD0F21FF", + "comment": "Цвет ошибки на светлом фоне", + "enabled": false + }, + "textInfo": { + "value": "[general.blue.600]", + "comment": "Цвет информации на светлом фоне", + "enabled": false + }, + "textInfoHover": { + "value": "#0D96F2FF", + "comment": "Цвет информации на светлом фоне", + "enabled": false + }, + "textInfoActive": { + "value": "#0966A5FF", + "comment": "Цвет информации на светлом фоне", + "enabled": false + }, + "textPositiveMinor": { + "value": "[general.green.900]", + "comment": "Минорный цвет успеха на светлом фоне", + "enabled": false + }, + "textPositiveMinorHover": { + "value": "#196B28FF", + "comment": "Минорный цвет успеха на светлом фоне", + "enabled": false + }, + "textPositiveMinorActive": { + "value": "#114A1CFF", + "comment": "Минорный цвет успеха на светлом фоне", + "enabled": false + }, + "textWarningMinor": { + "value": "[general.orange.900]", + "comment": "Минорный цвет предупреждения на светлом фоне", + "enabled": false + }, + "textWarningMinorHover": { + "value": "#843E15FF", + "comment": "Минорный цвет предупреждения на светлом фоне", + "enabled": false + }, + "textWarningMinorActive": { + "value": "#602D10FF", + "comment": "Минорный цвет предупреждения на светлом фоне", + "enabled": false + }, + "textNegativeMinor": { + "value": "[general.red.900]", + "comment": "Минорный цвет ошибки на светлом фоне", + "enabled": false + }, + "textNegativeMinorHover": { + "value": "#8F1925FF", + "comment": "Минорный цвет ошибки на светлом фоне", + "enabled": false + }, + "textNegativeMinorActive": { + "value": "#6C131CFF", + "comment": "Минорный цвет ошибки на светлом фоне", + "enabled": false + }, + "textInfoMinor": { + "value": "[general.blue.900]", + "comment": "Минорный цвет информации на светлом фоне", + "enabled": false + }, + "textInfoMinorHover": { + "value": "#1A577FFF", + "comment": "Минорный цвет информации на светлом фоне", + "enabled": false + }, + "textInfoMinorActive": { + "value": "#13405DFF", + "comment": "Минорный цвет информации на светлом фоне", + "enabled": false + }, + "textPrimary": { + "value": "[general.coolGray.900]", + "comment": "Основной цвет текста на светлом фоне", + "enabled": false + }, + "textSecondary": { + "value": "[general.coolGray.500]", + "comment": "Вторичный цвет текста на светлом фоне", + "enabled": false + }, + "textAccent": { + "value": "[general.herbal.700]", + "comment": "Акцентный цвет на светлом фоне", + "enabled": false + }, + "textPositive": { + "value": "[general.herbal.700]", + "comment": "Цвет успеха на светлом фоне", + "enabled": false + }, + "textNegative": { + "value": "[general.red.700]", + "comment": "Цвет ошибки на светлом фоне", + "enabled": false + } + }, + "inverse": { + "textPrimaryHover": { + "value": "#000000FF", + "comment": "Инвертированный основной цвет текста", + "enabled": false + }, + "textPrimaryActive": { + "value": "#B4C7D9FF", + "comment": "Инвертированный основной цвет текста", + "enabled": false + }, + "textSecondaryHover": { + "value": "#000000FF", + "comment": "Инвертированный вторичный цвет текста", + "enabled": false + }, + "textSecondaryActive": { + "value": "#636D74FF", + "comment": "Инвертированный вторичный цвет текста", + "enabled": false + }, + "textTertiary": { + "value": "rgba(255, 255, 255, 0.28)", + "comment": "Инвертированный третичный цвет текста", + "enabled": false + }, + "textTertiaryHover": { + "value": "#FFFFFFFF", + "comment": "Инвертированный третичный цвет текста", + "enabled": false + }, + "textTertiaryActive": { + "value": "#FFFFFF56", + "comment": "Инвертированный третичный цвет текста", + "enabled": false + }, + "textParagraph": { + "value": "rgba(255, 255, 255, 0.8)", + "comment": "Инвертированный сплошной наборный текст", + "enabled": false + }, + "textParagraphHover": { + "value": "#FFFFFF7A", + "comment": "Инвертированный сплошной наборный текст", + "enabled": false + }, + "textParagraphActive": { + "value": "#FFFFFFA3", + "comment": "Инвертированный сплошной наборный текст", + "enabled": false + }, + "textAccentHover": { + "value": "#19D719FF", + "comment": "Инвертированный акцентный цвет", + "enabled": false + }, + "textAccentActive": { + "value": "#118D11FF", + "comment": "Инвертированный акцентный цвет", + "enabled": false + }, + "textAccentGradient": { + "value": "#FFFFFF", + "comment": "Инвертированный акцентный цвет с градиентом", + "enabled": false + }, + "textAccentGradientHover": { + "value": "#000000FF", + "comment": "Инвертированный акцентный цвет с градиентом", + "enabled": false + }, + "textAccentGradientActive": { + "value": "#CCCCCCFF", + "comment": "Инвертированный акцентный цвет с градиентом", + "enabled": false + }, + "textAccentMinorHover": { + "value": "#BDFFBDFF", + "comment": "Инвертированный минорный акцентный цвет", + "enabled": false + }, + "textAccentMinorActive": { + "value": "#6BFF6BFF", + "comment": "Инвертированный минорный акцентный цвет", + "enabled": false + }, + "textAccentMinorGradient": { + "value": "#FFFFFF", + "comment": "Инвертированный акцентный минорный цвет с градиентом", + "enabled": false + }, + "textAccentMinorGradientHover": { + "value": "#000000FF", + "comment": "Инвертированный акцентный минорный цвет с градиентом", + "enabled": false + }, + "textAccentMinorGradientActive": { + "value": "#CCCCCCFF", + "comment": "Инвертированный акцентный минорный цвет с градиентом", + "enabled": false + }, + "textPromo": { + "value": "#FFFFFF", + "comment": "Инвертированный промо цвет", + "enabled": false + }, + "textPromoHover": { + "value": "#000000FF", + "comment": "Инвертированный промо цвет", + "enabled": false + }, + "textPromoActive": { + "value": "#CCCCCCFF", + "comment": "Инвертированный промо цвет", + "enabled": false + }, + "textPromoGradient": { + "value": "#FFFFFF", + "comment": "Инвертированный промо цвет с градиентом", + "enabled": false + }, + "textPromoGradientHover": { + "value": "#000000FF", + "comment": "Инвертированный промо цвет с градиентом", + "enabled": false + }, + "textPromoGradientActive": { + "value": "#CCCCCCFF", + "comment": "Инвертированный промо цвет с градиентом", + "enabled": false + }, + "textPromoMinor": { + "value": "#FFFFFF", + "comment": "Инвертированный минорный промо цвет", + "enabled": false + }, + "textPromoMinorHover": { + "value": "#000000FF", + "comment": "Инвертированный минорный промо цвет", + "enabled": false + }, + "textPromoMinorActive": { + "value": "#CCCCCCFF", + "comment": "Инвертированный минорный промо цвет", + "enabled": false + }, + "textPromoMinorGradient": { + "value": "#FFFFFF", + "comment": "Инвертированный минорный промо цвет с градиентом", + "enabled": false + }, + "textPromoMinorGradientHover": { + "value": "#000000FF", + "comment": "Инвертированный минорный промо цвет с градиентом", + "enabled": false + }, + "textPromoMinorGradientActive": { + "value": "#CCCCCCFF", + "comment": "Инвертированный минорный промо цвет с градиентом", + "enabled": false + }, + "textPositiveHover": { + "value": "#19D719FF", + "comment": "Инвертированный цвет успеха", + "enabled": false + }, + "textPositiveActive": { + "value": "#118D11FF", + "comment": "Инвертированный цвет успеха", + "enabled": false + }, + "textWarning": { + "value": "[general.orange.500]", + "comment": "Инвертированный цвет предупреждения", + "enabled": false + }, + "textWarningHover": { + "value": "#FB782DFF", + "comment": "Инвертированный цвет предупреждения", + "enabled": false + }, + "textWarningActive": { + "value": "#D25004FF", + "comment": "Инвертированный цвет предупреждения", + "enabled": false + }, + "textNegativeHover": { + "value": "#FF5263FF", + "comment": "Инвертированный цвет ошибки", + "enabled": false + }, + "textNegativeActive": { + "value": "#FF001AFF", + "comment": "Инвертированный цвет ошибки", + "enabled": false + }, + "textInfo": { + "value": "[general.blue.500]", + "comment": "Инвертированный цвет информации", + "enabled": false + }, + "textInfoHover": { + "value": "#2AA0EFFF", + "comment": "Инвертированный цвет информации", + "enabled": false + }, + "textInfoActive": { + "value": "#0E75B9FF", + "comment": "Инвертированный цвет информации", + "enabled": false + }, + "textPositiveMinor": { + "value": "[general.green.150]", + "comment": "Инвертированный минорный цвет успеха", + "enabled": false + }, + "textPositiveMinorHover": { + "value": "#C5FCCFFF", + "comment": "Инвертированный минорный цвет успеха", + "enabled": false + }, + "textPositiveMinorActive": { + "value": "#77F88FFF", + "comment": "Инвертированный минорный цвет успеха", + "enabled": false + }, + "textWarningMinor": { + "value": "[general.orange.150]", + "comment": "Инвертированный минорный цвет предупреждения", + "enabled": false + }, + "textWarningMinorHover": { + "value": "#FFFCFAFF", + "comment": "Инвертированный минорный цвет предупреждения", + "enabled": false + }, + "textWarningMinorActive": { + "value": "#FDC9AAFF", + "comment": "Инвертированный минорный цвет предупреждения", + "enabled": false + }, + "textNegativeMinor": { + "value": "[general.red.150]", + "comment": "Инвертированный минорный цвет ошибки", + "enabled": false + }, + "textNegativeMinorHover": { + "value": "#FFFFFFFF", + "comment": "Инвертированный минорный цвет ошибки", + "enabled": false + }, + "textNegativeMinorActive": { + "value": "#FFB8BFFF", + "comment": "Инвертированный минорный цвет ошибки", + "enabled": false + }, + "textInfoMinor": { + "value": "[general.blue.150]", + "comment": "Инвертированный минорный цвет информации", + "enabled": false + }, + "textInfoMinorHover": { + "value": "#FAFDFFFF", + "comment": "Инвертированный минорный цвет информации", + "enabled": false + }, + "textInfoMinorActive": { + "value": "#A8DCFFFF", + "comment": "Инвертированный минорный цвет информации", + "enabled": false + }, + "textPrimary": { + "value": "[general.coolGray.50]", + "comment": "Инвертированный основной цвет текста", + "enabled": true + }, + "textSecondary": { + "value": "[general.coolGray.500]", + "comment": "Инвертированный вторичный цвет текста", + "enabled": true + }, + "textAccent": { + "value": "[general.herbal.400]", + "comment": "Инвертированный акцентный цвет", + "enabled": true + }, + "textAccentMinor": { + "value": "[general.herbal.150]", + "comment": "Инвертированный минорный акцентный цвет", + "enabled": true + }, + "textPositive": { + "value": "[general.herbal.400]", + "comment": "Инвертированный цвет успеха", + "enabled": true + }, + "textNegative": { + "value": "[general.red.500]", + "comment": "Инвертированный цвет ошибки", + "enabled": true + } + } + }, + "surface": { + "default": { + "surfaceSolidPrimaryHover": { + "value": "#F5F8F9FF", + "comment": "Основной непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceSolidPrimaryActive": { + "value": "#E2E9EEFF", + "comment": "Основной непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceSolidSecondary": { + "value": "[general.coolGray.150]", + "comment": "Вторичный непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceSolidSecondaryHover": { + "value": "#F5F8F9FF", + "comment": "Вторичный непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceSolidSecondaryActive": { + "value": "#E2E9EEFF", + "comment": "Вторичный непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceSolidTertiary": { + "value": "[general.coolGray.200]", + "comment": "Третичный непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceSolidTertiaryHover": { + "value": "#E2E9EEFF", + "comment": "Третичный непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceSolidTertiaryActive": { + "value": "#C9D5DEFF", + "comment": "Третичный непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceSolidCardHover": { + "value": "#FFFFFFFF", + "comment": "Основной фон для карточек", + "enabled": false + }, + "surfaceSolidCardActive": { + "value": "#FFFFFFFF", + "comment": "Основной фон для карточек", + "enabled": false + }, + "surfaceSolidDefaultHover": { + "value": "#7A8790FF", + "comment": "Непрозрачный фон поверхности/контрола по умолчанию", + "enabled": false + }, + "surfaceSolidDefaultActive": { + "value": "#5D686FFF", + "comment": "Непрозрачный фон поверхности/контрола по умолчанию", + "enabled": false + }, + "surfaceTransparentPrimary": { + "value": "[general.coolGray.1000][-0.970]", + "comment": "Основной прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentPrimaryHover": { + "value": "#070B0E03", + "comment": "Основной прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentPrimaryActive": { + "value": "#070B0E0D", + "comment": "Основной прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentSecondary": { + "value": "[general.coolGray.1000][-0.940]", + "comment": "Вторичный прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentSecondaryHover": { + "value": "#070B0E05", + "comment": "Вторичный прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentSecondaryActive": { + "value": "#070B0E1A", + "comment": "Вторичный прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentTertiary": { + "value": "[general.coolGray.1000][-0.880]", + "comment": "Третичный прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentTertiaryHover": { + "value": "#070B0E0A", + "comment": "Третичный прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentTertiaryActive": { + "value": "#070B0E29", + "comment": "Третичный прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentDeep": { + "value": "[general.coolGray.1000][-0.360]", + "comment": "Глубокий прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentDeepHover": { + "value": "#070B0E8F", + "comment": "Глубокий прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentDeepActive": { + "value": "#070B0EAD", + "comment": "Глубокий прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentCard": { + "value": "[general.coolGray.1000][-0.940]", + "comment": "Прозрачный фон для карточек", + "enabled": false + }, + "surfaceTransparentCardHover": { + "value": "#070B0E05", + "comment": "Прозрачный фон для карточек", + "enabled": false + }, + "surfaceTransparentCardActive": { + "value": "#070B0E1A", + "comment": "Прозрачный фон для карточек", + "enabled": false + }, + "surfaceClear": { + "value": "#FFFFFF00", + "comment": "Фон поверхности/контрола без заливки", + "enabled": false + }, + "surfaceClearHover": { + "value": "#FFFFFF00", + "comment": "Фон поверхности/контрола без заливки", + "enabled": false + }, + "surfaceClearActive": { + "value": "#FFFFFF00", + "comment": "Фон поверхности/контрола без заливки", + "enabled": false + }, + "surfaceAccentHover": { + "value": "#0DA00DFF", + "comment": "Акцентный фон поверхности/контрола", + "enabled": false + }, + "surfaceAccentActive": { + "value": "#0A7B0AFF", + "comment": "Акцентный фон поверхности/контрола", + "enabled": false + }, + "surfaceAccentGradient": { + "value": "#FFFFFF", + "comment": "Акцентный фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceAccentGradientHover": { + "value": "#FFFFFFFF", + "comment": "Акцентный фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceAccentGradientActive": { + "value": "#FFFFFFFF", + "comment": "Акцентный фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceAccentMinor": { + "value": "[general.herbal.200]", + "comment": "Акцентный минорный непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceAccentMinorHover": { + "value": "#99FA99FF", + "comment": "Акцентный минорный непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceAccentMinorActive": { + "value": "#55F655FF", + "comment": "Акцентный минорный непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceAccentMinorGradient": { + "value": "#FFFFFF", + "comment": "Акцентный минорный фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceAccentMinorGradientHover": { + "value": "#FFFFFFFF", + "comment": "Акцентный минорный фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceAccentMinorGradientActive": { + "value": "#FFFFFFFF", + "comment": "Акцентный минорный фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceTransparentAccent": { + "value": "[general.herbal.700][-0.72]", + "comment": "Прозрачный акцентный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentAccentHover": { + "value": "#10841033", + "comment": "Прозрачный акцентный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentAccentActive": { + "value": "#10841052", + "comment": "Прозрачный акцентный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentAccentGradient": { + "value": "#FFFFFF", + "comment": "Прозрачный акцентный фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceTransparentAccentGradientHover": { + "value": "#FFFFFFFF", + "comment": "Прозрачный акцентный фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceTransparentAccentGradientActive": { + "value": "#FFFFFFFF", + "comment": "Прозрачный акцентный фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfacePromo": { + "value": "#FFFFFF", + "comment": "Промо фон поверхности/контрола", + "enabled": false + }, + "surfacePromoHover": { + "value": "#FFFFFFFF", + "comment": "Промо фон поверхности/контрола", + "enabled": false + }, + "surfacePromoActive": { + "value": "#FFFFFFFF", + "comment": "Промо фон поверхности/контрола", + "enabled": false + }, + "surfacePromoGradient": { + "value": "#FFFFFF", + "comment": "Промо фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfacePromoGradientHover": { + "value": "#FFFFFFFF", + "comment": "Промо фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfacePromoGradientActive": { + "value": "#FFFFFFFF", + "comment": "Промо фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfacePromoMinor": { + "value": "#FFFFFF", + "comment": "Минорный промо фон поверхности/контрола", + "enabled": false + }, + "surfacePromoMinorHover": { + "value": "#FFFFFFFF", + "comment": "Минорный промо фон поверхности/контрола", + "enabled": false + }, + "surfacePromoMinorActive": { + "value": "#FFFFFFFF", + "comment": "Минорный промо фон поверхности/контрола", + "enabled": false + }, + "surfacePromoMinorGradient": { + "value": "#FFFFFF", + "comment": "Минорный промо фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfacePromoMinorGradientHover": { + "value": "#FFFFFFFF", + "comment": "Минорный промо фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfacePromoMinorGradientActive": { + "value": "#FFFFFFFF", + "comment": "Минорный промо фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceTransparentPromo": { + "value": "#FFFFFF", + "comment": "Прозрачный промо фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentPromoHover": { + "value": "#FFFFFFFF", + "comment": "Прозрачный промо фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentPromoActive": { + "value": "#FFFFFFFF", + "comment": "Прозрачный промо фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentPromoGradient": { + "value": "#FFFFFF", + "comment": "Прозрачный промо фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceTransparentPromoGradientHover": { + "value": "#FFFFFFFF", + "comment": "Прозрачный промо фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceTransparentPromoGradientActive": { + "value": "#FFFFFFFF", + "comment": "Прозрачный промо фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfacePositiveHover": { + "value": "#0DA00DFF", + "comment": "Цвет фона поверхности/контрола успех", + "enabled": false + }, + "surfacePositiveActive": { + "value": "#0A7B0AFF", + "comment": "Цвет фона поверхности/контрола успех", + "enabled": false + }, + "surfaceWarning": { + "value": "[general.orange.500]", + "comment": "Цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceWarningHover": { + "value": "#FB782DFF", + "comment": "Цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceWarningActive": { + "value": "#E65705FF", + "comment": "Цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceNegativeHover": { + "value": "#F54254FF", + "comment": "Цвет фона поверхности/контрола ошибка", + "enabled": false + }, + "surfaceNegativeActive": { + "value": "#ED0C23FF", + "comment": "Цвет фона поверхности/контрола ошибка", + "enabled": false + }, + "surfaceInfoHover": { + "value": "#528DFAFF", + "comment": "Цвет фона поверхности/контрола информация", + "enabled": false + }, + "surfaceInfoActive": { + "value": "#1665F8FF", + "comment": "Цвет фона поверхности/контрола информация", + "enabled": false + }, + "surfacePositiveMinor": { + "value": "[general.green.200]", + "comment": "Минорный цвет фона поверхности/контрола успех", + "enabled": false + }, + "surfacePositiveMinorHover": { + "value": "#93F6A5FF", + "comment": "Минорный цвет фона поверхности/контрола успех", + "enabled": false + }, + "surfacePositiveMinorActive": { + "value": "#64F27EFF", + "comment": "Минорный цвет фона поверхности/контрола успех", + "enabled": false + }, + "surfaceWarningMinor": { + "value": "[general.orange.200]", + "comment": "Минорный цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceWarningMinorHover": { + "value": "#FFDECCFF", + "comment": "Минорный цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceWarningMinorActive": { + "value": "#FFC3A3FF", + "comment": "Минорный цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceNegativeMinor": { + "value": "[general.red.200]", + "comment": "Минорный цвет фона поверхности/контрола ошибка", + "enabled": false + }, + "surfaceNegativeMinorHover": { + "value": "#FEE1E4FF", + "comment": "Минорный цвет фона поверхности/контрола ошибка", + "enabled": false + }, + "surfaceNegativeMinorActive": { + "value": "#FEC3C9FF", + "comment": "Минорный цвет фона поверхности/контрола ошибка", + "enabled": false + }, + "surfaceInfoMinor": { + "value": "[general.blue.200]", + "comment": "Минорный цвет фона поверхности/контрола информация", + "enabled": false + }, + "surfaceInfoMinorHover": { + "value": "#C7E9FFFF", + "comment": "Минорный цвет фона поверхности/контрола информация", + "enabled": false + }, + "surfaceInfoMinorActive": { + "value": "#9ED8FFFF", + "comment": "Минорный цвет фона поверхности/контрола информация", + "enabled": false + }, + "surfaceTransparentPositive": { + "value": "[general.green.500][-0.72]", + "comment": "Прозрачный цвет фона поверхности/контрола успех", + "enabled": false + }, + "surfaceTransparentPositiveHover": { + "value": "#1A9E3233", + "comment": "Прозрачный цвет фона поверхности/контрола успех", + "enabled": false + }, + "surfaceTransparentPositiveActive": { + "value": "#1A9E3252", + "comment": "Прозрачный цвет фона поверхности/контрола успех", + "enabled": false + }, + "surfaceTransparentWarning": { + "value": "[general.orange.500][-0.72]", + "comment": "Прозрачный цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceTransparentWarningHover": { + "value": "#FA5F0533", + "comment": "Прозрачный цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceTransparentWarningActive": { + "value": "#FA5F0552", + "comment": "Прозрачный цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceTransparentNegative": { + "value": "[general.red.500][-0.72]", + "comment": "Прозрачный цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceTransparentNegativeHover": { + "value": "#FF293E33", + "comment": "Прозрачный цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceTransparentNegativeActive": { + "value": "#FF293E52", + "comment": "Прозрачный цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceTransparentInfo": { + "value": "[general.blue.500][-0.72]", + "comment": "Прозрачный цвет фона поверхности/контрола информация", + "enabled": false + }, + "surfaceTransparentInfoHover": { + "value": "#118CDF33", + "comment": "Прозрачный цвет фона поверхности/контрола информация", + "enabled": false + }, + "surfaceTransparentInfoActive": { + "value": "#118CDF52", + "comment": "Прозрачный цвет фона поверхности/контрола информация", + "enabled": false + }, + "surfaceSolidPrimary": { + "value": "[general.coolGray.150]", + "comment": "Основной непрозрачный фон поверхности/контрола", + "enabled": true + }, + "surfaceSolidCard": { + "value": "#FFFFFF", + "comment": "Основной фон для карточек", + "enabled": true + }, + "surfaceSolidDefault": { + "value": "[general.coolGray.700]", + "comment": "Непрозрачный фон поверхности/контрола по умолчанию", + "enabled": true + }, + "surfaceAccent": { + "value": "[general.herbal.600]", + "comment": "Акцентный фон поверхности/контрола", + "enabled": true + }, + "surfacePositive": { + "value": "[general.herbal.600]", + "comment": "Цвет фона поверхности/контрола успех", + "enabled": true + }, + "surfaceNegative": { + "value": "[general.red.600]", + "comment": "Цвет фона поверхности/контрола ошибка", + "enabled": true + }, + "surfaceInfo": { + "value": "[general.electricBlue.600]", + "comment": "Цвет фона поверхности/контрола информация", + "enabled": true + } + }, + "onDark": { + "surfaceSolidPrimaryHover": { + "value": "#394147FF", + "comment": "Основной непрозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceSolidPrimaryActive": { + "value": "#272C30FF", + "comment": "Основной непрозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceSolidSecondary": { + "value": "[general.coolGray.900]", + "comment": "Вторичный непрозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceSolidSecondaryHover": { + "value": "#2C343AFF", + "comment": "Вторичный непрозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceSolidSecondaryActive": { + "value": "#1B1F23FF", + "comment": "Вторичный непрозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceSolidTertiary": { + "value": "[general.coolGray.850]", + "comment": "Третичный непрозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceSolidTertiaryHover": { + "value": "#394147FF", + "comment": "Третичный непрозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceSolidTertiaryActive": { + "value": "#272C30FF", + "comment": "Третичный непрозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceSolidCardHover": { + "value": "#20282DFF", + "comment": "Основной фон для карточек на темном фоне", + "enabled": false + }, + "surfaceSolidCardActive": { + "value": "#0B0D0FFF", + "comment": "Основной фон для карточек на темном фоне", + "enabled": false + }, + "surfaceSolidDefaultHover": { + "value": "#F5F8F9FF", + "comment": "Непрозрачный фон поверхности/контрола по умолчанию на темном фоне", + "enabled": false + }, + "surfaceSolidDefaultActive": { + "value": "#E2E9EEFF", + "comment": "Непрозрачный фон поверхности/контрола по умолчанию на темном фоне", + "enabled": false + }, + "surfaceTransparentPrimary": { + "value": "[general.coolGray.50][-0.940]", + "comment": "Основной прозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceTransparentPrimaryHover": { + "value": "#F8FAFC05", + "comment": "Основной прозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceTransparentPrimaryActive": { + "value": "#F8FAFC1A", + "comment": "Основной прозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceTransparentSecondary": { + "value": "[general.coolGray.50][-0.880]", + "comment": "Вторичный прозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceTransparentSecondaryHover": { + "value": "#F8FAFC0A", + "comment": "Вторичный прозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceTransparentSecondaryActive": { + "value": "#F8FAFC29", + "comment": "Вторичный прозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceTransparentTertiary": { + "value": "[general.coolGray.50][-0.800]", + "comment": "Третичный прозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceTransparentTertiaryHover": { + "value": "#F8FAFC1F", + "comment": "Третичный прозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceTransparentTertiaryActive": { + "value": "#F8FAFC3D", + "comment": "Третичный прозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceTransparentDeep": { + "value": "[general.coolGray.50][-0.360]", + "comment": "Глубокий прозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceTransparentDeepHover": { + "value": "#F8FAFC8F", + "comment": "Глубокий прозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceTransparentDeepActive": { + "value": "#F8FAFCAD", + "comment": "Глубокий прозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceTransparentCard": { + "value": "[general.coolGray.50][-0.940]", + "comment": "Прозрачный фон для карточек на темном фоне", + "enabled": false + }, + "surfaceTransparentCardHover": { + "value": "#F8FAFC05", + "comment": "Прозрачный фон для карточек на темном фоне", + "enabled": false + }, + "surfaceTransparentCardActive": { + "value": "#F8FAFC1A", + "comment": "Прозрачный фон для карточек на темном фоне", + "enabled": false + }, + "surfaceClear": { + "value": "#FFFFFF00", + "comment": "Фон поверхности/контрола без заливки на темном фоне", + "enabled": false + }, + "surfaceClearHover": { + "value": "#FFFFFF00", + "comment": "Фон поверхности/контрола без заливки на темном фоне", + "enabled": false + }, + "surfaceClearActive": { + "value": "#FFFFFF00", + "comment": "Фон поверхности/контрола без заливки на темном фоне", + "enabled": false + }, + "surfaceAccentHover": { + "value": "#0DAF0DFF", + "comment": "Акцентный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceAccentActive": { + "value": "#0A8A0AFF", + "comment": "Акцентный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceAccentGradient": { + "value": "#FFFFFF", + "comment": "Акцентный фон поверхности/контрола с градиентом на темном фоне", + "enabled": false + }, + "surfaceAccentGradientHover": { + "value": "#FFFFFFFF", + "comment": "Акцентный фон поверхности/контрола с градиентом на темном фоне", + "enabled": false + }, + "surfaceAccentGradientActive": { + "value": "#FFFFFFFF", + "comment": "Акцентный фон поверхности/контрола с градиентом на темном фоне", + "enabled": false + }, + "surfaceAccentMinor": { + "value": "[general.herbal.900]", + "comment": "Акцентный минорный непрозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceAccentMinorHover": { + "value": "#0B3C0BFF", + "comment": "Акцентный минорный непрозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceAccentMinorActive": { + "value": "#051A05FF", + "comment": "Акцентный минорный непрозрачный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceAccentMinorGradient": { + "value": "#FFFFFF", + "comment": "Акцентный минорный фон поверхности/контрола с градиентом на темном фоне", + "enabled": false + }, + "surfaceAccentMinorGradientHover": { + "value": "#FFFFFFFF", + "comment": "Акцентный минорный фон поверхности/контрола с градиентом на темном фоне", + "enabled": false + }, + "surfaceAccentMinorGradientActive": { + "value": "#FFFFFFFF", + "comment": "Акцентный минорный фон поверхности/контрола с градиентом на темном фоне", + "enabled": false + }, + "surfaceTransparentAccent": { + "value": "[general.herbal.500][-0.72]", + "comment": "Прозрачный акцентный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceTransparentAccentHover": { + "value": "#0C9D0C33", + "comment": "Прозрачный акцентный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceTransparentAccentActive": { + "value": "#0C9D0C52", + "comment": "Прозрачный акцентный фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceTransparentAccentGradient": { + "value": "#FFFFFF", + "comment": "Прозрачный акцентный фон поверхности/контрола с градиентом на темном фоне", + "enabled": false + }, + "surfaceTransparentAccentGradientHover": { + "value": "#FFFFFFFF", + "comment": "Прозрачный акцентный фон поверхности/контрола с градиентом на темном фоне", + "enabled": false + }, + "surfaceTransparentAccentGradientActive": { + "value": "#FFFFFFFF", + "comment": "Прозрачный акцентный фон поверхности/контрола с градиентом на темном фоне", + "enabled": false + }, + "surfacePromo": { + "value": "#FFFFFF", + "comment": "Промо фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfacePromoHover": { + "value": "#FFFFFFFF", + "comment": "Промо фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfacePromoActive": { + "value": "#FFFFFFFF", + "comment": "Промо фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfacePromoGradient": { + "value": "#FFFFFF", + "comment": "Промо фон поверхности/контрола с градиентом на темном фоне", + "enabled": false + }, + "surfacePromoGradientHover": { + "value": "#FFFFFFFF", + "comment": "Промо фон поверхности/контрола с градиентом на темном фоне", + "enabled": false + }, + "surfacePromoGradientActive": { + "value": "#FFFFFFFF", + "comment": "Промо фон поверхности/контрола с градиентом на темном фоне", + "enabled": false + }, + "surfacePromoMinor": { + "value": "#FFFFFF", + "comment": "Минорный промо фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfacePromoMinorHover": { + "value": "#FFFFFFFF", + "comment": "Минорный промо фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfacePromoMinorActive": { + "value": "#FFFFFFFF", + "comment": "Минорный промо фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfacePromoMinorGradient": { + "value": "#FFFFFF", + "comment": "Минорный промо фон поверхности/контрола с градиентом на темном фоне", + "enabled": false + }, + "surfacePromoMinorGradientHover": { + "value": "#FFFFFFFF", + "comment": "Минорный промо фон поверхности/контрола с градиентом на темном фоне", + "enabled": false + }, + "surfacePromoMinorGradientActive": { + "value": "#FFFFFFFF", + "comment": "Минорный промо фон поверхности/контрола с градиентом на темном фоне", + "enabled": false + }, + "surfaceTransparentPromo": { + "value": "#FFFFFF", + "comment": "Прозрачный промо фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceTransparentPromoHover": { + "value": "#FFFFFFFF", + "comment": "Прозрачный промо фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceTransparentPromoActive": { + "value": "#FFFFFFFF", + "comment": "Прозрачный промо фон поверхности/контрола на темном фоне", + "enabled": false + }, + "surfaceTransparentPromoGradient": { + "value": "#FFFFFF", + "comment": "Прозрачный промо фон поверхности/контрола с градиентом на темном фоне", + "enabled": false + }, + "surfaceTransparentPromoGradientHover": { + "value": "#FFFFFFFF", + "comment": "Прозрачный промо фон поверхности/контрола с градиентом на темном фоне", + "enabled": false + }, + "surfaceTransparentPromoGradientActive": { + "value": "#FFFFFFFF", + "comment": "Прозрачный промо фон поверхности/контрола с градиентом на темном фоне", + "enabled": false + }, + "surfacePositiveHover": { + "value": "#0DAF0DFF", + "comment": "Цвет фона поверхности/контрола успех на темном фоне", + "enabled": false + }, + "surfacePositiveActive": { + "value": "#0A8A0AFF", + "comment": "Цвет фона поверхности/контрола успех на темном фоне", + "enabled": false + }, + "surfaceWarning": { + "value": "[general.orange.500]", + "comment": "Цвет фона поверхности/контрола предупреждение на темном фоне", + "enabled": false + }, + "surfaceWarningHover": { + "value": "#FB782DFF", + "comment": "Цвет фона поверхности/контрола предупреждение на темном фоне", + "enabled": false + }, + "surfaceWarningActive": { + "value": "#E65705FF", + "comment": "Цвет фона поверхности/контрола предупреждение на темном фоне", + "enabled": false + }, + "surfaceNegativeHover": { + "value": "#FF5263FF", + "comment": "Цвет фона поверхности/контрола ошибка на темном фоне", + "enabled": false + }, + "surfaceNegativeActive": { + "value": "#FF142CFF", + "comment": "Цвет фона поверхности/контрола ошибка на темном фоне", + "enabled": false + }, + "surfaceInfoHover": { + "value": "#689CFDFF", + "comment": "Цвет фона поверхности/контрола информация на темном фоне", + "enabled": false + }, + "surfaceInfoActive": { + "value": "#2B74FDFF", + "comment": "Цвет фона поверхности/контрола информация на темном фоне", + "enabled": false + }, + "surfacePositiveMinor": { + "value": "[general.green.900]", + "comment": "Минорный цвет фона поверхности/контрола успех на темном фоне", + "enabled": false + }, + "surfacePositiveMinorHover": { + "value": "#0E3A16FF", + "comment": "Минорный цвет фона поверхности/контрола успех на темном фоне", + "enabled": false + }, + "surfacePositiveMinorActive": { + "value": "#061909FF", + "comment": "Минорный цвет фона поверхности/контрола успех на темном фоне", + "enabled": false + }, + "surfaceWarningMinor": { + "value": "[general.orange.900]", + "comment": "Минорный цвет фона поверхности/контрола предупреждение на темном фоне", + "enabled": false + }, + "surfaceWarningMinorHover": { + "value": "#58290EFF", + "comment": "Минорный цвет фона поверхности/контрола предупреждение на темном фоне", + "enabled": false + }, + "surfaceWarningMinorActive": { + "value": "#2C1507FF", + "comment": "Минорный цвет фона поверхности/контрола предупреждение на темном фоне", + "enabled": false + }, + "surfaceNegativeMinor": { + "value": "[general.red.900]", + "comment": "Минорный цвет фона поверхности/контрола ошибка на темном фоне", + "enabled": false + }, + "surfaceNegativeMinorHover": { + "value": "#64121AFF", + "comment": "Минорный цвет фона поверхности/контрола ошибка на темном фоне", + "enabled": false + }, + "surfaceNegativeMinorActive": { + "value": "#380A0FFF", + "comment": "Минорный цвет фона поверхности/контрола ошибка на темном фоне", + "enabled": false + }, + "surfaceInfoMinor": { + "value": "[general.blue.900]", + "comment": "Минорный цвет фона поверхности/контрола информация на темном фоне", + "enabled": false + }, + "surfaceInfoMinorHover": { + "value": "#10344CFF", + "comment": "Минорный цвет фона поверхности/контрола информация на темном фоне", + "enabled": false + }, + "surfaceInfoMinorActive": { + "value": "#091D2AFF", + "comment": "Минорный цвет фона поверхности/контрола информация на темном фоне", + "enabled": false + }, + "surfaceTransparentPositive": { + "value": "[general.green.500][-0.72]", + "comment": "Прозрачный цвет фона поверхности/контрола успех на темном фоне", + "enabled": false + }, + "surfaceTransparentPositiveHover": { + "value": "#1A9E3233", + "comment": "Прозрачный цвет фона поверхности/контрола успех на темном фоне", + "enabled": false + }, + "surfaceTransparentPositiveActive": { + "value": "#1A9E3252", + "comment": "Прозрачный цвет фона поверхности/контрола успех на темном фоне", + "enabled": false + }, + "surfaceTransparentWarning": { + "value": "[general.orange.500][-0.72]", + "comment": "Прозрачный цвет фона поверхности/контрола предупреждение на темном фоне", + "enabled": false + }, + "surfaceTransparentWarningHover": { + "value": "#FA5F0533", + "comment": "Прозрачный цвет фона поверхности/контрола предупреждение на темном фоне", + "enabled": false + }, + "surfaceTransparentWarningActive": { + "value": "#FA5F0552", + "comment": "Прозрачный цвет фона поверхности/контрола предупреждение на темном фоне", + "enabled": false + }, + "surfaceTransparentNegative": { + "value": "[general.red.500][-0.72]", + "comment": "Прозрачный цвет фона поверхности/контрола предупреждение на темном фоне", + "enabled": false + }, + "surfaceTransparentNegativeHover": { + "value": "#FF293E33", + "comment": "Прозрачный цвет фона поверхности/контрола предупреждение на темном фоне", + "enabled": false + }, + "surfaceTransparentNegativeActive": { + "value": "#FF293E52", + "comment": "Прозрачный цвет фона поверхности/контрола предупреждение на темном фоне", + "enabled": false + }, + "surfaceTransparentInfo": { + "value": "[general.blue.500][-0.72]", + "comment": "Прозрачный цвет фона поверхности/контрола информация на темном фоне", + "enabled": false + }, + "surfaceTransparentInfoHover": { + "value": "#118CDF33", + "comment": "Прозрачный цвет фона поверхности/контрола информация на темном фоне", + "enabled": false + }, + "surfaceTransparentInfoActive": { + "value": "#118CDF52", + "comment": "Прозрачный цвет фона поверхности/контрола информация на темном фоне", + "enabled": false + }, + "surfaceSolidPrimary": { + "value": "[general.coolGray.850]", + "comment": "Основной непрозрачный фон поверхности/контрола на темном фоне", + "enabled": true + }, + "surfaceSolidCard": { + "value": "[general.coolGray.950]", + "comment": "Основной фон для карточек на темном фоне", + "enabled": true + }, + "surfaceSolidDefault": { + "value": "[general.coolGray.150]", + "comment": "Непрозрачный фон поверхности/контрола по умолчанию на темном фоне", + "enabled": true + }, + "surfaceAccent": { + "value": "[general.herbal.500]", + "comment": "Акцентный фон поверхности/контрола на темном фоне", + "enabled": true + }, + "surfacePositive": { + "value": "[general.herbal.500]", + "comment": "Цвет фона поверхности/контрола успех на темном фоне", + "enabled": true + }, + "surfaceNegative": { + "value": "[general.red.500]", + "comment": "Цвет фона поверхности/контрола ошибка на темном фоне", + "enabled": true + }, + "surfaceInfo": { + "value": "[general.electricBlue.500]", + "comment": "Цвет фона поверхности/контрола информация на темном фоне", + "enabled": true + } + }, + "onLight": { + "surfaceSolidPrimaryHover": { + "value": "#F5F8F9FF", + "comment": "Основной непрозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceSolidPrimaryActive": { + "value": "#E2E9EEFF", + "comment": "Основной непрозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceSolidSecondary": { + "value": "[general.coolGray.150]", + "comment": "Вторичный непрозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceSolidSecondaryHover": { + "value": "#F5F8F9FF", + "comment": "Вторичный непрозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceSolidSecondaryActive": { + "value": "#E2E9EEFF", + "comment": "Вторичный непрозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceSolidTertiary": { + "value": "[general.coolGray.200]", + "comment": "Третичный непрозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceSolidTertiaryHover": { + "value": "#E2E9EEFF", + "comment": "Третичный непрозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceSolidTertiaryActive": { + "value": "#C9D5DEFF", + "comment": "Третичный непрозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceSolidCardHover": { + "value": "#FFFFFFFF", + "comment": "Основной фон для карточек на светлом фоне", + "enabled": false + }, + "surfaceSolidCardActive": { + "value": "#FFFFFFFF", + "comment": "Основной фон для карточек на светлом фоне", + "enabled": false + }, + "surfaceSolidDefaultHover": { + "value": "#7A8790FF", + "comment": "Непрозрачный фон поверхности/контрола по умолчанию на светлом фоне", + "enabled": false + }, + "surfaceSolidDefaultActive": { + "value": "#5D686FFF", + "comment": "Непрозрачный фон поверхности/контрола по умолчанию на светлом фоне", + "enabled": false + }, + "surfaceTransparentPrimary": { + "value": "[general.coolGray.1000][-0.970]", + "comment": "Основной прозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceTransparentPrimaryHover": { + "value": "#070B0E03", + "comment": "Основной прозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceTransparentPrimaryActive": { + "value": "#070B0E0D", + "comment": "Основной прозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceTransparentSecondary": { + "value": "[general.coolGray.1000][-0.940]", + "comment": "Вторичный прозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceTransparentSecondaryHover": { + "value": "#070B0E05", + "comment": "Вторичный прозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceTransparentSecondaryActive": { + "value": "#070B0E1A", + "comment": "Вторичный прозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceTransparentTertiary": { + "value": "[general.coolGray.1000][-0.880]", + "comment": "Третичный прозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceTransparentTertiaryHover": { + "value": "#070B0E0A", + "comment": "Третичный прозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceTransparentTertiaryActive": { + "value": "#070B0E29", + "comment": "Третичный прозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceTransparentDeep": { + "value": "[general.coolGray.1000][-0.360]", + "comment": "Глубокий прозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceTransparentDeepHover": { + "value": "#070B0E8F", + "comment": "Глубокий прозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceTransparentDeepActive": { + "value": "#070B0EAD", + "comment": "Глубокий прозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceTransparentCard": { + "value": "[general.coolGray.1000][-0.940]", + "comment": "Прозрачный фон для карточек на светлом фоне", + "enabled": false + }, + "surfaceTransparentCardHover": { + "value": "#070B0E05", + "comment": "Прозрачный фон для карточек на светлом фоне", + "enabled": false + }, + "surfaceTransparentCardActive": { + "value": "#070B0E1A", + "comment": "Прозрачный фон для карточек на светлом фоне", + "enabled": false + }, + "surfaceClear": { + "value": "#FFFFFF00", + "comment": "Фон поверхности/контрола без заливки на светлом фоне", + "enabled": false + }, + "surfaceClearHover": { + "value": "#FFFFFF00", + "comment": "Фон поверхности/контрола без заливки на светлом фоне", + "enabled": false + }, + "surfaceClearActive": { + "value": "#FFFFFF00", + "comment": "Фон поверхности/контрола без заливки на светлом фоне", + "enabled": false + }, + "surfaceAccentHover": { + "value": "#0DA00DFF", + "comment": "Акцентный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceAccentActive": { + "value": "#0A7B0AFF", + "comment": "Акцентный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceAccentGradient": { + "value": "#FFFFFF", + "comment": "Акцентный фон поверхности/контрола с градиентом на светлом фоне", + "enabled": false + }, + "surfaceAccentGradientHover": { + "value": "#FFFFFFFF", + "comment": "Акцентный фон поверхности/контрола с градиентом на светлом фоне", + "enabled": false + }, + "surfaceAccentGradientActive": { + "value": "#FFFFFFFF", + "comment": "Акцентный фон поверхности/контрола с градиентом на светлом фоне", + "enabled": false + }, + "surfaceAccentMinor": { + "value": "[general.herbal.200]", + "comment": "Акцентный минорный непрозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceAccentMinorHover": { + "value": "#99FA99FF", + "comment": "Акцентный минорный непрозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceAccentMinorActive": { + "value": "#55F655FF", + "comment": "Акцентный минорный непрозрачный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceAccentMinorGradient": { + "value": "#FFFFFF", + "comment": "Акцентный минорный фон поверхности/контрола с градиентом на светлом фоне", + "enabled": false + }, + "surfaceAccentMinorGradientHover": { + "value": "#FFFFFFFF", + "comment": "Акцентный минорный фон поверхности/контрола с градиентом на светлом фоне", + "enabled": false + }, + "surfaceAccentMinorGradientActive": { + "value": "#FFFFFFFF", + "comment": "Акцентный минорный фон поверхности/контрола с градиентом на светлом фоне", + "enabled": false + }, + "surfaceTransparentAccent": { + "value": "[general.herbal.700][-0.72]", + "comment": "Прозрачный акцентный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceTransparentAccentHover": { + "value": "#10841033", + "comment": "Прозрачный акцентный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceTransparentAccentActive": { + "value": "#10841052", + "comment": "Прозрачный акцентный фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceTransparentAccentGradient": { + "value": "#FFFFFF", + "comment": "Прозрачный акцентный фон поверхности/контрола с градиентом на светлом фоне", + "enabled": false + }, + "surfaceTransparentAccentGradientHover": { + "value": "#FFFFFFFF", + "comment": "Прозрачный акцентный фон поверхности/контрола с градиентом на светлом фоне", + "enabled": false + }, + "surfaceTransparentAccentGradientActive": { + "value": "#FFFFFFFF", + "comment": "Прозрачный акцентный фон поверхности/контрола с градиентом на светлом фоне", + "enabled": false + }, + "surfacePromo": { + "value": "#FFFFFF", + "comment": "Промо фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfacePromoHover": { + "value": "#FFFFFFFF", + "comment": "Промо фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfacePromoActive": { + "value": "#FFFFFFFF", + "comment": "Промо фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfacePromoGradient": { + "value": "#FFFFFF", + "comment": "Промо фон поверхности/контрола с градиентом на светлом фоне", + "enabled": false + }, + "surfacePromoGradientHover": { + "value": "#FFFFFFFF", + "comment": "Промо фон поверхности/контрола с градиентом на светлом фоне", + "enabled": false + }, + "surfacePromoGradientActive": { + "value": "#FFFFFFFF", + "comment": "Промо фон поверхности/контрола с градиентом на светлом фоне", + "enabled": false + }, + "surfacePromoMinor": { + "value": "#FFFFFF", + "comment": "Минорный промо фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfacePromoMinorHover": { + "value": "#FFFFFFFF", + "comment": "Минорный промо фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfacePromoMinorActive": { + "value": "#FFFFFFFF", + "comment": "Минорный промо фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfacePromoMinorGradient": { + "value": "#FFFFFF", + "comment": "Минорный промо фон поверхности/контрола с градиентом на светлом фоне", + "enabled": false + }, + "surfacePromoMinorGradientHover": { + "value": "#FFFFFFFF", + "comment": "Минорный промо фон поверхности/контрола с градиентом на светлом фоне", + "enabled": false + }, + "surfacePromoMinorGradientActive": { + "value": "#FFFFFFFF", + "comment": "Минорный промо фон поверхности/контрола с градиентом на светлом фоне", + "enabled": false + }, + "surfaceTransparentPromo": { + "value": "#FFFFFF", + "comment": "Прозрачный промо фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceTransparentPromoHover": { + "value": "#FFFFFFFF", + "comment": "Прозрачный промо фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceTransparentPromoActive": { + "value": "#FFFFFFFF", + "comment": "Прозрачный промо фон поверхности/контрола на светлом фоне", + "enabled": false + }, + "surfaceTransparentPromoGradient": { + "value": "#FFFFFF", + "comment": "Прозрачный промо фон поверхности/контрола с градиентом на светлом фоне", + "enabled": false + }, + "surfaceTransparentPromoGradientHover": { + "value": "#FFFFFFFF", + "comment": "Прозрачный промо фон поверхности/контрола с градиентом на светлом фоне", + "enabled": false + }, + "surfaceTransparentPromoGradientActive": { + "value": "#FFFFFFFF", + "comment": "Прозрачный промо фон поверхности/контрола с градиентом на светлом фоне", + "enabled": false + }, + "surfacePositiveHover": { + "value": "#0DA00DFF", + "comment": "Цвет фона поверхности/контрола успех на светлом фоне", + "enabled": false + }, + "surfacePositiveActive": { + "value": "#0A7B0AFF", + "comment": "Цвет фона поверхности/контрола успех на светлом фоне", + "enabled": false + }, + "surfaceWarning": { + "value": "[general.orange.500]", + "comment": "Цвет фона поверхности/контрола предупреждение на светлом фоне", + "enabled": false + }, + "surfaceWarningHover": { + "value": "#FB782DFF", + "comment": "Цвет фона поверхности/контрола предупреждение на светлом фоне", + "enabled": false + }, + "surfaceWarningActive": { + "value": "#E65705FF", + "comment": "Цвет фона поверхности/контрола предупреждение на светлом фоне", + "enabled": false + }, + "surfaceNegativeHover": { + "value": "#F54254FF", + "comment": "Цвет фона поверхности/контрола ошибка на светлом фоне", + "enabled": false + }, + "surfaceNegativeActive": { + "value": "#ED0C23FF", + "comment": "Цвет фона поверхности/контрола ошибка на светлом фоне", + "enabled": false + }, + "surfaceInfoHover": { + "value": "#528DFAFF", + "comment": "Цвет фона поверхности/контрола информация на светлом фоне", + "enabled": false + }, + "surfaceInfoActive": { + "value": "#1665F8FF", + "comment": "Цвет фона поверхности/контрола информация на светлом фоне", + "enabled": false + }, + "surfacePositiveMinor": { + "value": "[general.green.200]", + "comment": "Минорный цвет фона поверхности/контрола успех на светлом фоне", + "enabled": false + }, + "surfacePositiveMinorHover": { + "value": "#93F6A5FF", + "comment": "Минорный цвет фона поверхности/контрола успех на светлом фоне", + "enabled": false + }, + "surfacePositiveMinorActive": { + "value": "#64F27EFF", + "comment": "Минорный цвет фона поверхности/контрола успех на светлом фоне", + "enabled": false + }, + "surfaceWarningMinor": { + "value": "[general.orange.200]", + "comment": "Минорный цвет фона поверхности/контрола предупреждение на светлом фоне", + "enabled": false + }, + "surfaceWarningMinorHover": { + "value": "#FFDECCFF", + "comment": "Минорный цвет фона поверхности/контрола предупреждение на светлом фоне", + "enabled": false + }, + "surfaceWarningMinorActive": { + "value": "#FFC3A3FF", + "comment": "Минорный цвет фона поверхности/контрола предупреждение на светлом фоне", + "enabled": false + }, + "surfaceNegativeMinor": { + "value": "[general.red.200]", + "comment": "Минорный цвет фона поверхности/контрола ошибка на светлом фоне", + "enabled": false + }, + "surfaceNegativeMinorHover": { + "value": "#FEE1E4FF", + "comment": "Минорный цвет фона поверхности/контрола ошибка на светлом фоне", + "enabled": false + }, + "surfaceNegativeMinorActive": { + "value": "#FEC3C9FF", + "comment": "Минорный цвет фона поверхности/контрола ошибка на светлом фоне", + "enabled": false + }, + "surfaceInfoMinor": { + "value": "[general.blue.200]", + "comment": "Минорный цвет фона поверхности/контрола информация на светлом фоне", + "enabled": false + }, + "surfaceInfoMinorHover": { + "value": "#C7E9FFFF", + "comment": "Минорный цвет фона поверхности/контрола информация на светлом фоне", + "enabled": false + }, + "surfaceInfoMinorActive": { + "value": "#9ED8FFFF", + "comment": "Минорный цвет фона поверхности/контрола информация на светлом фоне", + "enabled": false + }, + "surfaceTransparentPositive": { + "value": "[general.green.500][-0.72]", + "comment": "Прозрачный цвет фона поверхности/контрола успех на светлом фоне", + "enabled": false + }, + "surfaceTransparentPositiveHover": { + "value": "#1A9E3233", + "comment": "Прозрачный цвет фона поверхности/контрола успех на светлом фоне", + "enabled": false + }, + "surfaceTransparentPositiveActive": { + "value": "#1A9E3252", + "comment": "Прозрачный цвет фона поверхности/контрола успех на светлом фоне", + "enabled": false + }, + "surfaceTransparentWarning": { + "value": "[general.orange.500][-0.72]", + "comment": "Прозрачный цвет фона поверхности/контрола предупреждение на светлом фоне", + "enabled": false + }, + "surfaceTransparentWarningHover": { + "value": "#FA5F0533", + "comment": "Прозрачный цвет фона поверхности/контрола предупреждение на светлом фоне", + "enabled": false + }, + "surfaceTransparentWarningActive": { + "value": "#FA5F0552", + "comment": "Прозрачный цвет фона поверхности/контрола предупреждение на светлом фоне", + "enabled": false + }, + "surfaceTransparentNegative": { + "value": "[general.red.500][-0.72]", + "comment": "Прозрачный цвет фона поверхности/контрола предупреждение на светлом фоне", + "enabled": false + }, + "surfaceTransparentNegativeHover": { + "value": "#FF293E33", + "comment": "Прозрачный цвет фона поверхности/контрола предупреждение на светлом фоне", + "enabled": false + }, + "surfaceTransparentNegativeActive": { + "value": "#FF293E52", + "comment": "Прозрачный цвет фона поверхности/контрола предупреждение на светлом фоне", + "enabled": false + }, + "surfaceTransparentInfo": { + "value": "[general.blue.500][-0.72]", + "comment": "Прозрачный цвет фона поверхности/контрола информация на светлом фоне", + "enabled": false + }, + "surfaceTransparentInfoHover": { + "value": "#118CDF33", + "comment": "Прозрачный цвет фона поверхности/контрола информация на светлом фоне", + "enabled": false + }, + "surfaceTransparentInfoActive": { + "value": "#118CDF52", + "comment": "Прозрачный цвет фона поверхности/контрола информация на светлом фоне", + "enabled": false + }, + "surfaceSolidPrimary": { + "value": "[general.coolGray.150]", + "comment": "Основной непрозрачный фон поверхности/контрола на светлом фоне", + "enabled": true + }, + "surfaceSolidCard": { + "value": "#FFFFFF", + "comment": "Основной фон для карточек на светлом фоне", + "enabled": true + }, + "surfaceSolidDefault": { + "value": "[general.coolGray.700]", + "comment": "Непрозрачный фон поверхности/контрола по умолчанию на светлом фоне", + "enabled": true + }, + "surfaceAccent": { + "value": "[general.herbal.600]", + "comment": "Акцентный фон поверхности/контрола на светлом фоне", + "enabled": true + }, + "surfacePositive": { + "value": "[general.herbal.600]", + "comment": "Цвет фона поверхности/контрола успех на светлом фоне", + "enabled": true + }, + "surfaceNegative": { + "value": "[general.red.600]", + "comment": "Цвет фона поверхности/контрола ошибка на светлом фоне", + "enabled": true + }, + "surfaceInfo": { + "value": "[general.electricBlue.600]", + "comment": "Цвет фона поверхности/контрола информация на светлом фоне", + "enabled": true + } + }, + "inverse": { + "surfaceSolidPrimaryHover": { + "value": "#394147FF", + "comment": "Инвертированный основной непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceSolidPrimaryActive": { + "value": "#272C30FF", + "comment": "Инвертированный основной непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceSolidSecondary": { + "value": "[general.coolGray.900]", + "comment": "Инвертированный вторичный непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceSolidSecondaryHover": { + "value": "#2C343AFF", + "comment": "Инвертированный вторичный непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceSolidSecondaryActive": { + "value": "#1B1F23FF", + "comment": "Инвертированный вторичный непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceSolidTertiary": { + "value": "[general.coolGray.850]", + "comment": "Инвертированный третичный непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceSolidTertiaryHover": { + "value": "#394147FF", + "comment": "Инвертированный третичный непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceSolidTertiaryActive": { + "value": "#272C30FF", + "comment": "Инвертированный третичный непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceSolidCardHover": { + "value": "#20282DFF", + "comment": "Инвертированный основной фон для карточек", + "enabled": false + }, + "surfaceSolidCardActive": { + "value": "#0B0D0FFF", + "comment": "Инвертированный основной фон для карточек", + "enabled": false + }, + "surfaceSolidDefaultHover": { + "value": "#F5F8F9FF", + "comment": "Инвертированный непрозрачный фон поверхности/контрола по умолчанию", + "enabled": false + }, + "surfaceSolidDefaultActive": { + "value": "#E2E9EEFF", + "comment": "Инвертированный непрозрачный фон поверхности/контрола по умолчанию", + "enabled": false + }, + "surfaceTransparentPrimary": { + "value": "[general.coolGray.50][-0.940]", + "comment": "Инвертированный основной прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentPrimaryHover": { + "value": "#F8FAFC05", + "comment": "Инвертированный основной прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentPrimaryActive": { + "value": "#F8FAFC1A", + "comment": "Инвертированный основной прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentSecondary": { + "value": "[general.coolGray.50][-0.880]", + "comment": "Инвертированный вторичный прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentSecondaryHover": { + "value": "#F8FAFC0A", + "comment": "Инвертированный вторичный прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentSecondaryActive": { + "value": "#F8FAFC29", + "comment": "Инвертированный вторичный прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentTertiary": { + "value": "[general.coolGray.50][-0.800]", + "comment": "Инвертированный третичный прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentTertiaryHover": { + "value": "#F8FAFC1F", + "comment": "Инвертированный третичный прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentTertiaryActive": { + "value": "#F8FAFC3D", + "comment": "Инвертированный третичный прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentDeep": { + "value": "[general.coolGray.50][-0.360]", + "comment": "Инвертированный глубокий прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentDeepHover": { + "value": "#F8FAFC8F", + "comment": "Инвертированный глубокий прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentDeepActive": { + "value": "#F8FAFCAD", + "comment": "Инвертированный глубокий прозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentCard": { + "value": "[general.coolGray.50][-0.940]", + "comment": "Инвертированный прозрачный фон для карточек", + "enabled": false + }, + "surfaceTransparentCardHover": { + "value": "#F8FAFC05", + "comment": "Инвертированный прозрачный фон для карточек", + "enabled": false + }, + "surfaceTransparentCardActive": { + "value": "#F8FAFC1A", + "comment": "Инвертированный прозрачный фон для карточек", + "enabled": false + }, + "surfaceClear": { + "value": "#FFFFFF00", + "comment": "Инвертированный фон поверхности/контрола без заливки", + "enabled": false + }, + "surfaceClearHover": { + "value": "#FFFFFF00", + "comment": "Инвертированный фон поверхности/контрола без заливки", + "enabled": false + }, + "surfaceClearActive": { + "value": "#FFFFFF00", + "comment": "Инвертированный фон поверхности/контрола без заливки", + "enabled": false + }, + "surfaceAccentHover": { + "value": "#0DAF0DFF", + "comment": "Инвертированный акцентный фон поверхности/контрола", + "enabled": false + }, + "surfaceAccentActive": { + "value": "#0A8A0AFF", + "comment": "Инвертированный акцентный фон поверхности/контрола", + "enabled": false + }, + "surfaceAccentGradient": { + "value": "#FFFFFF", + "comment": "Инвертированный акцентный фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceAccentGradientHover": { + "value": "#FFFFFFFF", + "comment": "Инвертированный акцентный фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceAccentGradientActive": { + "value": "#FFFFFFFF", + "comment": "Инвертированный акцентный фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceAccentMinor": { + "value": "[general.herbal.900]", + "comment": "Инвертированный акцентный минорный непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceAccentMinorHover": { + "value": "#0B3C0BFF", + "comment": "Инвертированный акцентный минорный непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceAccentMinorActive": { + "value": "#051A05FF", + "comment": "Инвертированный акцентный минорный непрозрачный фон поверхности/контрола", + "enabled": false + }, + "surfaceAccentMinorGradient": { + "value": "#FFFFFF", + "comment": "Инвертированный акцентный минорный фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceAccentMinorGradientHover": { + "value": "#FFFFFFFF", + "comment": "Инвертированный акцентный минорный фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceAccentMinorGradientActive": { + "value": "#FFFFFFFF", + "comment": "Инвертированный акцентный минорный фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceTransparentAccent": { + "value": "[general.herbal.500][-0.72]", + "comment": "Прозрачный инвертированный акцентный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentAccentHover": { + "value": "#0C9D0C33", + "comment": "Прозрачный инвертированный акцентный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentAccentActive": { + "value": "#0C9D0C52", + "comment": "Прозрачный инвертированный акцентный фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentAccentGradient": { + "value": "#FFFFFF", + "comment": "Прозрачный инвертированный акцентный фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceTransparentAccentGradientHover": { + "value": "#FFFFFFFF", + "comment": "Прозрачный инвертированный акцентный фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceTransparentAccentGradientActive": { + "value": "#FFFFFFFF", + "comment": "Прозрачный инвертированный акцентный фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfacePromo": { + "value": "#FFFFFF", + "comment": "Инвертированный промо фон поверхности/контрола", + "enabled": false + }, + "surfacePromoHover": { + "value": "#FFFFFFFF", + "comment": "Инвертированный промо фон поверхности/контрола", + "enabled": false + }, + "surfacePromoActive": { + "value": "#FFFFFFFF", + "comment": "Инвертированный промо фон поверхности/контрола", + "enabled": false + }, + "surfacePromoGradient": { + "value": "#FFFFFF", + "comment": "Инвертированный промо фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfacePromoGradientHover": { + "value": "#FFFFFFFF", + "comment": "Инвертированный промо фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfacePromoGradientActive": { + "value": "#FFFFFFFF", + "comment": "Инвертированный промо фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfacePromoMinor": { + "value": "#FFFFFF", + "comment": "Инвертированный минорный промо фон поверхности/контрола", + "enabled": false + }, + "surfacePromoMinorHover": { + "value": "#FFFFFFFF", + "comment": "Инвертированный минорный промо фон поверхности/контрола", + "enabled": false + }, + "surfacePromoMinorActive": { + "value": "#FFFFFFFF", + "comment": "Инвертированный минорный промо фон поверхности/контрола", + "enabled": false + }, + "surfacePromoMinorGradient": { + "value": "#FFFFFF", + "comment": "Инвертированный минорный промо фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfacePromoMinorGradientHover": { + "value": "#FFFFFFFF", + "comment": "Инвертированный минорный промо фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfacePromoMinorGradientActive": { + "value": "#FFFFFFFF", + "comment": "Инвертированный минорный промо фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceTransparentPromo": { + "value": "#FFFFFF", + "comment": "Инвертированный прозрачный промо фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentPromoHover": { + "value": "#FFFFFFFF", + "comment": "Инвертированный прозрачный промо фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentPromoActive": { + "value": "#FFFFFFFF", + "comment": "Инвертированный прозрачный промо фон поверхности/контрола", + "enabled": false + }, + "surfaceTransparentPromoGradient": { + "value": "#FFFFFF", + "comment": "Инвертированный прозрачный промо фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceTransparentPromoGradientHover": { + "value": "#FFFFFFFF", + "comment": "Инвертированный прозрачный промо фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfaceTransparentPromoGradientActive": { + "value": "#FFFFFFFF", + "comment": "Инвертированный прозрачный промо фон поверхности/контрола с градиентом", + "enabled": false + }, + "surfacePositiveHover": { + "value": "#0DAF0DFF", + "comment": "Инвертированный цвет фона поверхности/контрола успех", + "enabled": false + }, + "surfacePositiveActive": { + "value": "#0A8A0AFF", + "comment": "Инвертированный цвет фона поверхности/контрола успех", + "enabled": false + }, + "surfaceWarning": { + "value": "[general.orange.500]", + "comment": "Инвертированный цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceWarningHover": { + "value": "#FB782DFF", + "comment": "Инвертированный цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceWarningActive": { + "value": "#E65705FF", + "comment": "Инвертированный цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceNegativeHover": { + "value": "#FF5263FF", + "comment": "Инвертированный цвет фона поверхности/контрола ошибка", + "enabled": false + }, + "surfaceNegativeActive": { + "value": "#FF142CFF", + "comment": "Инвертированный цвет фона поверхности/контрола ошибка", + "enabled": false + }, + "surfaceInfoHover": { + "value": "#689CFDFF", + "comment": "Инвертированный цвет фона поверхности/контрола информация", + "enabled": false + }, + "surfaceInfoActive": { + "value": "#2B74FDFF", + "comment": "Инвертированный цвет фона поверхности/контрола информация", + "enabled": false + }, + "surfacePositiveMinor": { + "value": "[general.green.900]", + "comment": "Инвертированный минорный цвет фона поверхности/контрола успех", + "enabled": false + }, + "surfacePositiveMinorHover": { + "value": "#0E3A16FF", + "comment": "Инвертированный минорный цвет фона поверхности/контрола успех", + "enabled": false + }, + "surfacePositiveMinorActive": { + "value": "#061909FF", + "comment": "Инвертированный минорный цвет фона поверхности/контрола успех", + "enabled": false + }, + "surfaceWarningMinor": { + "value": "[general.orange.900]", + "comment": "Инвертированный минорный цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceWarningMinorHover": { + "value": "#58290EFF", + "comment": "Инвертированный минорный цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceWarningMinorActive": { + "value": "#2C1507FF", + "comment": "Инвертированный минорный цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceNegativeMinor": { + "value": "[general.red.900]", + "comment": "Инвертированный минорный цвет фона поверхности/контрола ошибка", + "enabled": false + }, + "surfaceNegativeMinorHover": { + "value": "#64121AFF", + "comment": "Инвертированный минорный цвет фона поверхности/контрола ошибка", + "enabled": false + }, + "surfaceNegativeMinorActive": { + "value": "#380A0FFF", + "comment": "Инвертированный минорный цвет фона поверхности/контрола ошибка", + "enabled": false + }, + "surfaceInfoMinor": { + "value": "[general.blue.900]", + "comment": "Инвертированный минорный цвет фона поверхности/контрола информация", + "enabled": false + }, + "surfaceInfoMinorHover": { + "value": "#10344CFF", + "comment": "Инвертированный минорный цвет фона поверхности/контрола информация", + "enabled": false + }, + "surfaceInfoMinorActive": { + "value": "#091D2AFF", + "comment": "Инвертированный минорный цвет фона поверхности/контрола информация", + "enabled": false + }, + "surfaceTransparentPositive": { + "value": "[general.green.500][-0.72]", + "comment": "Прозрачный инвертированный цвет фона поверхности/контрола успех", + "enabled": false + }, + "surfaceTransparentPositiveHover": { + "value": "#1A9E3233", + "comment": "Прозрачный инвертированный цвет фона поверхности/контрола успех", + "enabled": false + }, + "surfaceTransparentPositiveActive": { + "value": "#1A9E3252", + "comment": "Прозрачный инвертированный цвет фона поверхности/контрола успех", + "enabled": false + }, + "surfaceTransparentWarning": { + "value": "[general.orange.500][-0.72]", + "comment": "Прозрачный инвертированный цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceTransparentWarningHover": { + "value": "#FA5F0533", + "comment": "Прозрачный инвертированный цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceTransparentWarningActive": { + "value": "#FA5F0552", + "comment": "Прозрачный инвертированный цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceTransparentNegative": { + "value": "[general.red.500][-0.72]", + "comment": "Прозрачный инвертированный цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceTransparentNegativeHover": { + "value": "#FF293E33", + "comment": "Прозрачный инвертированный цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceTransparentNegativeActive": { + "value": "#FF293E52", + "comment": "Прозрачный инвертированный цвет фона поверхности/контрола предупреждение", + "enabled": false + }, + "surfaceTransparentInfo": { + "value": "[general.blue.500][-0.72]", + "comment": "Прозрачный инвертированный цвет фона поверхности/контрола информация", + "enabled": false + }, + "surfaceTransparentInfoHover": { + "value": "#118CDF33", + "comment": "Прозрачный инвертированный цвет фона поверхности/контрола информация", + "enabled": false + }, + "surfaceTransparentInfoActive": { + "value": "#118CDF52", + "comment": "Прозрачный инвертированный цвет фона поверхности/контрола информация", + "enabled": false + }, + "surfaceSolidPrimary": { + "value": "[general.coolGray.850]", + "comment": "Инвертированный основной непрозрачный фон поверхности/контрола", + "enabled": true + }, + "surfaceSolidCard": { + "value": "[general.coolGray.950]", + "comment": "Инвертированный основной фон для карточек", + "enabled": true + }, + "surfaceSolidDefault": { + "value": "[general.coolGray.150]", + "comment": "Инвертированный непрозрачный фон поверхности/контрола по умолчанию", + "enabled": true + }, + "surfaceAccent": { + "value": "[general.herbal.500]", + "comment": "Инвертированный акцентный фон поверхности/контрола", + "enabled": true + }, + "surfacePositive": { + "value": "[general.herbal.500]", + "comment": "Инвертированный цвет фона поверхности/контрола успех", + "enabled": true + }, + "surfaceNegative": { + "value": "[general.red.500]", + "comment": "Инвертированный цвет фона поверхности/контрола ошибка", + "enabled": true + }, + "surfaceInfo": { + "value": "[general.electricBlue.500]", + "comment": "Инвертированный цвет фона поверхности/контрола информация", + "enabled": true + } + } + }, + "background": { + "default": { + "backgroundSecondary": { + "value": "#FFFFFF", + "comment": "Вторичный фон", + "enabled": false + }, + "backgroundTertiary": { + "value": "#FFFFFF", + "comment": "Третичный фон", + "enabled": false + }, + "backgroundPrimary": { + "value": "[general.coolGray.100]", + "comment": "Основной фон", + "enabled": true + } + }, + "dark": { + "backgroundSecondary": { + "value": "#FFFFFF", + "comment": "Вторичный фон на темном фоне", + "enabled": false + }, + "backgroundTertiary": { + "value": "#FFFFFF", + "comment": "Третичный фон на темном фоне", + "enabled": false + }, + "backgroundPrimary": { + "value": "[general.coolGray.1000]", + "comment": "Основной фон на темном фоне", + "enabled": true + } + }, + "light": { + "backgroundSecondary": { + "value": "#FFFFFF", + "comment": "Вторичный фон на светлом фоне", + "enabled": false + }, + "backgroundTertiary": { + "value": "#FFFFFF", + "comment": "Третичный фон на светлом фоне", + "enabled": false + }, + "backgroundPrimary": { + "value": "[general.coolGray.100]", + "comment": "Основной фон на светлом фоне", + "enabled": true + } + }, + "inverse": { + "backgroundSecondary": { + "value": "#FFFFFF", + "comment": "Инвертированный вторичный фон", + "enabled": false + }, + "backgroundTertiary": { + "value": "#FFFFFF", + "comment": "Инвертированный третичный фон", + "enabled": false + }, + "backgroundPrimary": { + "value": "[general.coolGray.1000]", + "comment": "Инвертированный основной фон", + "enabled": true + } + } + }, + "overlay": { + "default": { + "overlaySoft": { + "value": "[general.coolGray.50][-0.440]", + "comment": "Цвет фона паранжи светлый", + "enabled": false + }, + "overlayHard": { + "value": "[general.coolGray.50][-0.0400]", + "comment": "Цвет фона паранжи темный", + "enabled": false + }, + "overlayBlur": { + "value": "[general.coolGray.50][-0.800]", + "comment": "Цвет фона паранжи размытый", + "enabled": false + } + }, + "onDark": { + "overlaySoft": { + "value": "[general.coolGray.1000][-0.440]", + "comment": "Цвет фона паранжи светлый на темном фоне", + "enabled": false + }, + "overlayHard": { + "value": "[general.coolGray.1000][-0.0400]", + "comment": "Цвет фона паранжи темный на темном фоне", + "enabled": false + }, + "overlayBlur": { + "value": "[general.coolGray.1000][-0.800]", + "comment": "Цвет фона паранжи размытый на темном фоне", + "enabled": false + } + }, + "onLight": { + "overlaySoft": { + "value": "[general.coolGray.50][-0.440]", + "comment": "Цвет фона паранжи светлый на светлом фоне", + "enabled": false + }, + "overlayHard": { + "value": "[general.coolGray.50][-0.0400]", + "comment": "Цвет фона паранжи темный на светлом фоне", + "enabled": false + }, + "overlayBlur": { + "value": "[general.coolGray.50][-0.800]", + "comment": "Цвет фона паранжи размытый на светлом фоне", + "enabled": false + } + }, + "inverse": { + "overlaySoft": { + "value": "[general.coolGray.1000][-0.440]", + "comment": "Инвертированный цвет фона паранжи светлый", + "enabled": false + }, + "overlayHard": { + "value": "[general.coolGray.1000][-0.0400]", + "comment": "Инвертированный цвет фона паранжи темный", + "enabled": false + }, + "overlayBlur": { + "value": "[general.coolGray.1000][-0.800]", + "comment": "Инвертированный цвет фона паранжи размытый", + "enabled": false + } + } + }, + "outline": { + "default": { + "outlineSolidPrimaryHover": { + "value": "#000000FF", + "comment": "Основной непрозрачный цвет обводки", + "enabled": false + }, + "outlineSolidPrimaryActive": { + "value": "#90A3B2FF", + "comment": "Основной непрозрачный цвет обводки", + "enabled": false + }, + "outlineSolidSecondaryHover": { + "value": "#000000FF", + "comment": "Вторичный непрозрачный цвет обводки", + "enabled": false + }, + "outlineSolidSecondaryActive": { + "value": "#636D74FF", + "comment": "Вторичный непрозрачный цвет обводки", + "enabled": false + }, + "outlineSolidTertiary": { + "value": "[general.coolGray.700]", + "comment": "Третичный непрозрачный цвет обводки", + "enabled": false + }, + "outlineSolidTertiaryHover": { + "value": "#000000FF", + "comment": "Третичный непрозрачный цвет обводки", + "enabled": false + }, + "outlineSolidTertiaryActive": { + "value": "#515B61FF", + "comment": "Третичный непрозрачный цвет обводки", + "enabled": false + }, + "outlineTransparentDefault": { + "value": "[general.coolGray.1000][-0.0400]", + "comment": "Прозрачный цвет обводки по умолчанию", + "enabled": false + }, + "outlineTransparentDefaultHover": { + "value": "#070B0E93", + "comment": "Прозрачный цвет обводки по умолчанию", + "enabled": false + }, + "outlineTransparentDefaultActive": { + "value": "#070B0EC4", + "comment": "Прозрачный цвет обводки по умолчанию", + "enabled": false + }, + "outlineTransparentPrimary": { + "value": "[general.coolGray.1000][-0.880]", + "comment": "Основной прозрачный цвет обводки", + "enabled": false + }, + "outlineTransparentPrimaryHover": { + "value": "#070B0EFF", + "comment": "Основной прозрачный цвет обводки", + "enabled": false + }, + "outlineTransparentPrimaryActive": { + "value": "#070B0E25", + "comment": "Основной прозрачный цвет обводки", + "enabled": false + }, + "outlineTransparentSecondary": { + "value": "[general.coolGray.1000][-0.720]", + "comment": "Вторичный прозрачный цвет обводки", + "enabled": false + }, + "outlineTransparentSecondaryHover": { + "value": "#070B0EFF", + "comment": "Вторичный прозрачный цвет обводки", + "enabled": false + }, + "outlineTransparentSecondaryActive": { + "value": "#070B0E56", + "comment": "Вторичный прозрачный цвет обводки", + "enabled": false + }, + "outlineTransparentTertiary": { + "value": "[general.coolGray.1000][-0.440]", + "comment": "Третичный прозрачный цвет обводки", + "enabled": false + }, + "outlineTransparentTertiaryHover": { + "value": "#070B0EFF", + "comment": "Третичный прозрачный цвет обводки", + "enabled": false + }, + "outlineTransparentTertiaryActive": { + "value": "#070B0EAB", + "comment": "Третичный прозрачный цвет обводки", + "enabled": false + }, + "outlineClear": { + "value": "#FFFFFF00", + "comment": "Бесцветная обводка", + "enabled": false + }, + "outlineClearHover": { + "value": "#FFFFFF00", + "comment": "Бесцветная обводка", + "enabled": false + }, + "outlineClearActive": { + "value": "#FFFFFF00", + "comment": "Бесцветная обводка", + "enabled": false + }, + "outlineAccentHover": { + "value": "#19CC19FF", + "comment": "Акцентный цвет обводки", + "enabled": false + }, + "outlineAccentActive": { + "value": "#15A815FF", + "comment": "Акцентный цвет обводки", + "enabled": false + }, + "outlineAccentGradient": { + "value": "#FFFFFF", + "comment": "Акцентный цвет обводки с градиентом", + "enabled": false + }, + "outlineAccentGradientHover": { + "value": "#000000FF", + "comment": "Акцентный цвет обводки с градиентом", + "enabled": false + }, + "outlineAccentGradientActive": { + "value": "#CCCCCCFF", + "comment": "Акцентный цвет обводки с градиентом", + "enabled": false + }, + "outlineAccentMinor": { + "value": "[general.herbal.250]", + "comment": "Акцентный минорный непрозрачный цвет обводки", + "enabled": false + }, + "outlineAccentMinorHover": { + "value": "#60EB60FF", + "comment": "Акцентный минорный непрозрачный цвет обводки", + "enabled": false + }, + "outlineAccentMinorActive": { + "value": "#1BDE1BFF", + "comment": "Акцентный минорный непрозрачный цвет обводки", + "enabled": false + }, + "outlineAccentMinorGradient": { + "value": "#FFFFFF", + "comment": "Акцентный минорный цвет обводки с градиентом", + "enabled": false + }, + "outlineAccentMinorGradientHover": { + "value": "#000000FF", + "comment": "Акцентный минорный цвет обводки с градиентом", + "enabled": false + }, + "outlineAccentMinorGradientActive": { + "value": "#CCCCCCFF", + "comment": "Акцентный минорный цвет обводки с градиентом", + "enabled": false + }, + "outlineTransparentAccent": { + "value": "[general.herbal.700][-0.6]", + "comment": "Прозрачный акцентный цвет обводки", + "enabled": false + }, + "outlineTransparentAccentHover": { + "value": "#108410FF", + "comment": "Прозрачный акцентный цвет обводки", + "enabled": false + }, + "outlineTransparentAccentActive": { + "value": "#1084107A", + "comment": "Прозрачный акцентный цвет обводки", + "enabled": false + }, + "outlineTransparentAccentGradient": { + "value": "#FFFFFF", + "comment": "Прозрачный акцентный цвет обводки с градиентом", + "enabled": false + }, + "outlineTransparentAccentGradientHover": { + "value": "#000000FF", + "comment": "Прозрачный акцентный цвет обводки с градиентом", + "enabled": false + }, + "outlineTransparentAccentGradientActive": { + "value": "#CCCCCCFF", + "comment": "Прозрачный акцентный цвет обводки с градиентом", + "enabled": false + }, + "outlinePromo": { + "value": "#FFFFFF", + "comment": "Промо цвет обводки", + "enabled": false + }, + "outlinePromoHover": { + "value": "#000000FF", + "comment": "Промо цвет обводки", + "enabled": false + }, + "outlinePromoActive": { + "value": "#CCCCCCFF", + "comment": "Промо цвет обводки", + "enabled": false + }, + "outlinePromoGradient": { + "value": "#FFFFFF", + "comment": "Промо цвет обводки с градиентом", + "enabled": false + }, + "outlinePromoGradientHover": { + "value": "#000000FF", + "comment": "Промо цвет обводки с градиентом", + "enabled": false + }, + "outlinePromoGradientActive": { + "value": "#CCCCCCFF", + "comment": "Промо цвет обводки с градиентом", + "enabled": false + }, + "outlinePromoMinor": { + "value": "#FFFFFF", + "comment": "Минорный промо цвет обводки", + "enabled": false + }, + "outlinePromoMinorHover": { + "value": "#000000FF", + "comment": "Минорный промо цвет обводки", + "enabled": false + }, + "outlinePromoMinorActive": { + "value": "#CCCCCCFF", + "comment": "Минорный промо цвет обводки", + "enabled": false + }, + "outlinePromoMinorGradient": { + "value": "#FFFFFF", + "comment": "Минорный промо цвет обводки с градиентом", + "enabled": false + }, + "outlinePromoMinorGradientHover": { + "value": "#000000FF", + "comment": "Минорный промо цвет обводки с градиентом", + "enabled": false + }, + "outlinePromoMinorGradientActive": { + "value": "#CCCCCCFF", + "comment": "Минорный промо цвет обводки с градиентом", + "enabled": false + }, + "outlinePositiveHover": { + "value": "#19CC19FF", + "comment": "Цвет обводки успех", + "enabled": false + }, + "outlinePositiveActive": { + "value": "#15A815FF", + "comment": "Цвет обводки успех", + "enabled": false + }, + "outlineWarning": { + "value": "[general.orange.600]", + "comment": "Цвет обводки предупреждение", + "enabled": false + }, + "outlineWarningHover": { + "value": "#FD6B17FF", + "comment": "Цвет обводки предупреждение", + "enabled": false + }, + "outlineWarningActive": { + "value": "#C04802FF", + "comment": "Цвет обводки предупреждение", + "enabled": false + }, + "outlineNegativeHover": { + "value": "#EE2F43FF", + "comment": "Цвет обводки ошибка", + "enabled": false + }, + "outlineNegativeActive": { + "value": "#BD0F21FF", + "comment": "Цвет обводки ошибка", + "enabled": false + }, + "outlineInfoHover": { + "value": "#000000FF", + "comment": "Цвет обводки информация", + "enabled": false + }, + "outlineInfoActive": { + "value": "#1952BEFF", + "comment": "Цвет обводки информация", + "enabled": false + }, + "outlinePositiveMinor": { + "value": "[general.green.250]", + "comment": "Минорный цвет обводки успех", + "enabled": false + }, + "outlinePositiveMinorHover": { + "value": "#68E880FF", + "comment": "Минорный цвет обводки успех", + "enabled": false + }, + "outlinePositiveMinorActive": { + "value": "#21DE44FF", + "comment": "Минорный цвет обводки успех", + "enabled": false + }, + "outlineWarningMinor": { + "value": "[general.orange.250]", + "comment": "Минорный цвет обводки предупреждение", + "enabled": false + }, + "outlineWarningMinorHover": { + "value": "#FFCDB3FF", + "comment": "Минорный цвет обводки предупреждение", + "enabled": false + }, + "outlineWarningMinorActive": { + "value": "#FF9861FF", + "comment": "Минорный цвет обводки предупреждение", + "enabled": false + }, + "outlineNegativeMinor": { + "value": "[general.red.250]", + "comment": "Минорный цвет обводки ошибка", + "enabled": false + }, + "outlineNegativeMinorHover": { + "value": "#FEDCDFFF", + "comment": "Минорный цвет обводки ошибка", + "enabled": false + }, + "outlineNegativeMinorActive": { + "value": "#FD8B97FF", + "comment": "Минорный цвет обводки ошибка", + "enabled": false + }, + "outlineInfoMinor": { + "value": "[general.blue.250]", + "comment": "Минорный цвет обводки информация", + "enabled": false + }, + "outlineInfoMinorHover": { + "value": "#ADDEFFFF", + "comment": "Минорный цвет обводки информация", + "enabled": false + }, + "outlineInfoMinorActive": { + "value": "#5CBEFFFF", + "comment": "Минорный цвет обводки информация", + "enabled": false + }, + "outlineTransparentPositive": { + "value": "[general.green.600][-0.72]", + "comment": "Прозрачный цвет обводки успех", + "enabled": false + }, + "outlineTransparentPositiveHover": { + "value": "#108E25FF", + "comment": "Прозрачный цвет обводки успех", + "enabled": false + }, + "outlineTransparentPositiveActive": { + "value": "#108E2556", + "comment": "Прозрачный цвет обводки успех", + "enabled": false + }, + "outlineTransparentWarning": { + "value": "[general.orange.600][-0.72]", + "comment": "Прозрачный цвет обводки предупреждение", + "enabled": false + }, + "outlineTransparentWarningHover": { + "value": "#E85702FF", + "comment": "Прозрачный цвет обводки предупреждение", + "enabled": false + }, + "outlineTransparentWarningActive": { + "value": "#E8570256", + "comment": "Прозрачный цвет обводки предупреждение", + "enabled": false + }, + "outlineTransparentNegative": { + "value": "[general.red.600][-0.72]", + "comment": "Прозрачный цвет обводки предупреждение", + "enabled": false + }, + "outlineTransparentNegativeHover": { + "value": "#F31B31FF", + "comment": "Прозрачный цвет обводки предупреждение", + "enabled": false + }, + "outlineTransparentNegativeActive": { + "value": "#F31B3156", + "comment": "Прозрачный цвет обводки предупреждение", + "enabled": false + }, + "outlineTransparentInfo": { + "value": "[general.blue.600][-0.72]", + "comment": "Прозрачный цвет обводки информация", + "enabled": false + }, + "outlineTransparentInfoHover": { + "value": "#0B7ECBFF", + "comment": "Прозрачный цвет обводки информация", + "enabled": false + }, + "outlineTransparentInfoActive": { + "value": "#0B7ECB56", + "comment": "Прозрачный цвет обводки информация", + "enabled": false + }, + "outlineSolidPrimary": { + "value": "[general.coolGray.250]", + "comment": "Основной непрозрачный цвет обводки", + "enabled": true + }, + "outlineSolidSecondary": { + "value": "[general.coolGray.500]", + "comment": "Вторичный непрозрачный цвет обводки", + "enabled": true + }, + "outlinePositive": { + "value": "[general.herbal.700]", + "comment": "Цвет обводки успех", + "enabled": true + }, + "outlineAccent": { + "value": "[general.herbal.700]", + "comment": "Акцентный цвет обводки", + "enabled": true + }, + "outlineNegative": { + "value": "[general.red.700]", + "comment": "Цвет обводки ошибка", + "enabled": true + }, + "outlineInfo": { + "value": "[general.electricBlue.700]", + "comment": "Цвет обводки информация", + "enabled": true + } + }, + "onDark": { + "outlineSolidPrimaryHover": { + "value": "#7A8994FF", + "comment": "Основной непрозрачный цвет обводки на темном фоне", + "enabled": false + }, + "outlineSolidPrimaryActive": { + "value": "#546069FF", + "comment": "Основной непрозрачный цвет обводки на темном фоне", + "enabled": false + }, + "outlineSolidSecondaryHover": { + "value": "#000000FF", + "comment": "Вторичный непрозрачный цвет обводки на темном фоне", + "enabled": false + }, + "outlineSolidSecondaryActive": { + "value": "#636D74FF", + "comment": "Вторичный непрозрачный цвет обводки на темном фоне", + "enabled": false + }, + "outlineSolidTertiary": { + "value": "[general.coolGray.800]", + "comment": "Третичный непрозрачный цвет обводки на темном фоне", + "enabled": false + }, + "outlineSolidTertiaryHover": { + "value": "#000000FF", + "comment": "Третичный непрозрачный цвет обводки на темном фоне", + "enabled": false + }, + "outlineSolidTertiaryActive": { + "value": "#3A4145FF", + "comment": "Третичный непрозрачный цвет обводки на темном фоне", + "enabled": false + }, + "outlineTransparentDefault": { + "value": "[general.coolGray.50][-0.0400]", + "comment": "Прозрачный цвет обводки по умолчанию на темном фоне", + "enabled": false + }, + "outlineTransparentDefaultHover": { + "value": "#F8FAFC93", + "comment": "Прозрачный цвет обводки по умолчанию на темном фоне", + "enabled": false + }, + "outlineTransparentDefaultActive": { + "value": "#F8FAFCC4", + "comment": "Прозрачный цвет обводки по умолчанию на темном фоне", + "enabled": false + }, + "outlineTransparentPrimary": { + "value": "[general.coolGray.50][-0.880]", + "comment": "Основной прозрачный цвет обводки на темном фоне", + "enabled": false + }, + "outlineTransparentPrimaryHover": { + "value": "#F8FAFCFF", + "comment": "Основной прозрачный цвет обводки на темном фоне", + "enabled": false + }, + "outlineTransparentPrimaryActive": { + "value": "#F8FAFC25", + "comment": "Основной прозрачный цвет обводки на темном фоне", + "enabled": false + }, + "outlineTransparentSecondary": { + "value": "[general.coolGray.50][-0.800]", + "comment": "Вторичный прозрачный цвет обводки на темном фоне", + "enabled": false + }, + "outlineTransparentSecondaryHover": { + "value": "#F8FAFCFF", + "comment": "Вторичный прозрачный цвет обводки на темном фоне", + "enabled": false + }, + "outlineTransparentSecondaryActive": { + "value": "#F8FAFC3D", + "comment": "Вторичный прозрачный цвет обводки на темном фоне", + "enabled": false + }, + "outlineTransparentTertiary": { + "value": "[general.coolGray.50][-0.720]", + "comment": "Третичный прозрачный цвет обводки на темном фоне", + "enabled": false + }, + "outlineTransparentTertiaryHover": { + "value": "#F8FAFCFF", + "comment": "Третичный прозрачный цвет обводки на темном фоне", + "enabled": false + }, + "outlineTransparentTertiaryActive": { + "value": "#F8FAFC56", + "comment": "Третичный прозрачный цвет обводки на темном фоне", + "enabled": false + }, + "outlineClear": { + "value": "#FFFFFF00", + "comment": "Бесцветная обводка на темном фоне", + "enabled": false + }, + "outlineClearHover": { + "value": "#FFFFFF00", + "comment": "Бесцветная обводка на темном фоне", + "enabled": false + }, + "outlineClearActive": { + "value": "#FFFFFF00", + "comment": "Бесцветная обводка на темном фоне", + "enabled": false + }, + "outlineAccentHover": { + "value": "#0FC20FFF", + "comment": "Акцентный цвет обводки на темном фоне", + "enabled": false + }, + "outlineAccentActive": { + "value": "#097709FF", + "comment": "Акцентный цвет обводки на темном фоне", + "enabled": false + }, + "outlineAccentGradient": { + "value": "#FFFFFF", + "comment": "Акцентный цвет обводки с градиентом на темном фоне", + "enabled": false + }, + "outlineAccentGradientHover": { + "value": "#000000FF", + "comment": "Акцентный цвет обводки с градиентом на темном фоне", + "enabled": false + }, + "outlineAccentGradientActive": { + "value": "#CCCCCCFF", + "comment": "Акцентный цвет обводки с градиентом на темном фоне", + "enabled": false + }, + "outlineAccentMinor": { + "value": "[general.herbal.850]", + "comment": "Акцентный минорный непрозрачный цвет обводки на темном фоне", + "enabled": false + }, + "outlineAccentMinorHover": { + "value": "#118811FF", + "comment": "Акцентный минорный непрозрачный цвет обводки на темном фоне", + "enabled": false + }, + "outlineAccentMinorActive": { + "value": "#0C640CFF", + "comment": "Акцентный минорный непрозрачный цвет обводки на темном фоне", + "enabled": false + }, + "outlineAccentMinorGradient": { + "value": "#FFFFFF", + "comment": "Акцентный минорный цвет обводки с градиентом на темном фоне", + "enabled": false + }, + "outlineAccentMinorGradientHover": { + "value": "#000000FF", + "comment": "Акцентный минорный цвет обводки с градиентом на темном фоне", + "enabled": false + }, + "outlineAccentMinorGradientActive": { + "value": "#CCCCCCFF", + "comment": "Акцентный минорный цвет обводки с градиентом на темном фоне", + "enabled": false + }, + "outlineTransparentAccent": { + "value": "[general.herbal.500][-0.6]", + "comment": "Прозрачный акцентный цвет обводки на темном фоне", + "enabled": false + }, + "outlineTransparentAccentHover": { + "value": "#0C9D0CFF", + "comment": "Прозрачный акцентный цвет обводки на темном фоне", + "enabled": false + }, + "outlineTransparentAccentActive": { + "value": "#0C9D0C7A", + "comment": "Прозрачный акцентный цвет обводки на темном фоне", + "enabled": false + }, + "outlineTransparentAccentGradient": { + "value": "#FFFFFF", + "comment": "Прозрачный акцентный цвет обводки с градиентом на темном фоне", + "enabled": false + }, + "outlineTransparentAccentGradientHover": { + "value": "#000000FF", + "comment": "Прозрачный акцентный цвет обводки с градиентом на темном фоне", + "enabled": false + }, + "outlineTransparentAccentGradientActive": { + "value": "#CCCCCCFF", + "comment": "Прозрачный акцентный цвет обводки с градиентом на темном фоне", + "enabled": false + }, + "outlinePromo": { + "value": "#FFFFFF", + "comment": "Промо цвет обводки на темном фоне", + "enabled": false + }, + "outlinePromoHover": { + "value": "#000000FF", + "comment": "Промо цвет обводки на темном фоне", + "enabled": false + }, + "outlinePromoActive": { + "value": "#CCCCCCFF", + "comment": "Промо цвет обводки на темном фоне", + "enabled": false + }, + "outlinePromoGradient": { + "value": "#FFFFFF", + "comment": "Промо цвет обводки с градиентом на темном фоне", + "enabled": false + }, + "outlinePromoGradientHover": { + "value": "#000000FF", + "comment": "Промо цвет обводки с градиентом на темном фоне", + "enabled": false + }, + "outlinePromoGradientActive": { + "value": "#CCCCCCFF", + "comment": "Промо цвет обводки с градиентом на темном фоне", + "enabled": false + }, + "outlinePromoMinor": { + "value": "#FFFFFF", + "comment": "Минорный промо цвет обводки на темном фоне", + "enabled": false + }, + "outlinePromoMinorHover": { + "value": "#000000FF", + "comment": "Минорный промо цвет обводки на темном фоне", + "enabled": false + }, + "outlinePromoMinorActive": { + "value": "#CCCCCCFF", + "comment": "Минорный промо цвет обводки на темном фоне", + "enabled": false + }, + "outlinePromoMinorGradient": { + "value": "#FFFFFF", + "comment": "Минорный промо цвет обводки с градиентом на темном фоне", + "enabled": false + }, + "outlinePromoMinorGradientHover": { + "value": "#000000FF", + "comment": "Минорный промо цвет обводки с градиентом на темном фоне", + "enabled": false + }, + "outlinePromoMinorGradientActive": { + "value": "#CCCCCCFF", + "comment": "Минорный промо цвет обводки с градиентом на темном фоне", + "enabled": false + }, + "outlinePositiveHover": { + "value": "#0FC20FFF", + "comment": "Цвет обводки успех на темном фоне", + "enabled": false + }, + "outlinePositiveActive": { + "value": "#097709FF", + "comment": "Цвет обводки успех на темном фоне", + "enabled": false + }, + "outlineWarning": { + "value": "[general.orange.500]", + "comment": "Цвет обводки предупреждение на темном фоне", + "enabled": false + }, + "outlineWarningHover": { + "value": "#FB782DFF", + "comment": "Цвет обводки предупреждение на темном фоне", + "enabled": false + }, + "outlineWarningActive": { + "value": "#D25004FF", + "comment": "Цвет обводки предупреждение на темном фоне", + "enabled": false + }, + "outlineNegativeHover": { + "value": "#FF5263FF", + "comment": "Цвет обводки ошибка на темном фоне", + "enabled": false + }, + "outlineNegativeActive": { + "value": "#FF001AFF", + "comment": "Цвет обводки ошибка на темном фоне", + "enabled": false + }, + "outlineInfoHover": { + "value": "#689CFDFF", + "comment": "Цвет обводки информация на темном фоне", + "enabled": false + }, + "outlineInfoActive": { + "value": "#1767FDFF", + "comment": "Цвет обводки информация на темном фоне", + "enabled": false + }, + "outlinePositiveMinor": { + "value": "[general.green.850]", + "comment": "Минорный цвет обводки успех на темном фоне", + "enabled": false + }, + "outlinePositiveMinorHover": { + "value": "#15892BFF", + "comment": "Минорный цвет обводки успех на темном фоне", + "enabled": false + }, + "outlinePositiveMinorActive": { + "value": "#106520FF", + "comment": "Минорный цвет обводки успех на темном фоне", + "enabled": false + }, + "outlineWarningMinor": { + "value": "[general.orange.850]", + "comment": "Минорный цвет обводки предупреждение на темном фоне", + "enabled": false + }, + "outlineWarningMinorHover": { + "value": "#A74811FF", + "comment": "Минорный цвет обводки предупреждение на темном фоне", + "enabled": false + }, + "outlineWarningMinorActive": { + "value": "#82380DFF", + "comment": "Минорный цвет обводки предупреждение на темном фоне", + "enabled": false + }, + "outlineNegativeMinor": { + "value": "[general.red.850]", + "comment": "Минорный цвет обводки ошибка на темном фоне", + "enabled": false + }, + "outlineNegativeMinorHover": { + "value": "#B11B2AFF", + "comment": "Минорный цвет обводки ошибка на темном фоне", + "enabled": false + }, + "outlineNegativeMinorActive": { + "value": "#8E1521FF", + "comment": "Минорный цвет обводки ошибка на темном фоне", + "enabled": false + }, + "outlineInfoMinor": { + "value": "[general.blue.850]", + "comment": "Минорный цвет обводки информация на темном фоне", + "enabled": false + }, + "outlineInfoMinorHover": { + "value": "#176AA1FF", + "comment": "Минорный цвет обводки информация на темном фоне", + "enabled": false + }, + "outlineInfoMinorActive": { + "value": "#12527DFF", + "comment": "Минорный цвет обводки информация на темном фоне", + "enabled": false + }, + "outlineTransparentPositive": { + "value": "[general.green.500][-0.72]", + "comment": "Прозрачный цвет обводки успех на темном фоне", + "enabled": false + }, + "outlineTransparentPositiveHover": { + "value": "#1A9E32FF", + "comment": "Прозрачный цвет обводки успех на темном фоне", + "enabled": false + }, + "outlineTransparentPositiveActive": { + "value": "#1A9E3256", + "comment": "Прозрачный цвет обводки успех на темном фоне", + "enabled": false + }, + "outlineTransparentWarning": { + "value": "[general.orange.500][-0.72]", + "comment": "Прозрачный цвет обводки предупреждение на темном фоне", + "enabled": false + }, + "outlineTransparentWarningHover": { + "value": "#FA5F05FF", + "comment": "Прозрачный цвет обводки предупреждение на темном фоне", + "enabled": false + }, + "outlineTransparentWarningActive": { + "value": "#FA5F0556", + "comment": "Прозрачный цвет обводки предупреждение на темном фоне", + "enabled": false + }, + "outlineTransparentNegative": { + "value": "[general.red.500][-0.72]", + "comment": "Прозрачный цвет обводки предупреждение на темном фоне", + "enabled": false + }, + "outlineTransparentNegativeHover": { + "value": "#FF293EFF", + "comment": "Прозрачный цвет обводки предупреждение на темном фоне", + "enabled": false + }, + "outlineTransparentNegativeActive": { + "value": "#FF293E56", + "comment": "Прозрачный цвет обводки предупреждение на темном фоне", + "enabled": false + }, + "outlineTransparentInfo": { + "value": "[general.blue.500][-0.72]", + "comment": "Прозрачный цвет обводки информация на темном фоне", + "enabled": false + }, + "outlineTransparentInfoHover": { + "value": "#118CDFFF", + "comment": "Прозрачный цвет обводки информация на темном фоне", + "enabled": false + }, + "outlineTransparentInfoActive": { + "value": "#118CDF56", + "comment": "Прозрачный цвет обводки информация на темном фоне", + "enabled": false + }, + "outlineSolidPrimary": { + "value": "[general.coolGray.850]", + "comment": "Основной непрозрачный цвет обводки на темном фоне", + "enabled": true + }, + "outlineSolidSecondary": { + "value": "[general.coolGray.500]", + "comment": "Вторичный непрозрачный цвет обводки на темном фоне", + "enabled": true + }, + "outlineAccent": { + "value": "[general.herbal.500]", + "comment": "Акцентный цвет обводки на темном фоне", + "enabled": true + }, + "outlinePositive": { + "value": "[general.herbal.500]", + "comment": "Цвет обводки успех на темном фоне", + "enabled": true + }, + "outlineNegative": { + "value": "[general.red.500]", + "comment": "Цвет обводки ошибка на темном фоне", + "enabled": true + }, + "outlineInfo": { + "value": "[general.electricBlue.500]", + "comment": "Цвет обводки информация на темном фоне", + "enabled": true + } + }, + "onLight": { + "outlineSolidPrimaryHover": { + "value": "#000000FF", + "comment": "Основной непрозрачный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineSolidPrimaryActive": { + "value": "#90A3B2FF", + "comment": "Основной непрозрачный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineSolidSecondaryHover": { + "value": "#000000FF", + "comment": "Вторичный непрозрачный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineSolidSecondaryActive": { + "value": "#636D74FF", + "comment": "Вторичный непрозрачный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineSolidTertiary": { + "value": "[general.coolGray.700]", + "comment": "Третичный непрозрачный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineSolidTertiaryHover": { + "value": "#000000FF", + "comment": "Третичный непрозрачный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineSolidTertiaryActive": { + "value": "#515B61FF", + "comment": "Третичный непрозрачный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineTransparentDefault": { + "value": "[general.coolGray.1000][-0.0400]", + "comment": "Прозрачный цвет обводки по умолчанию на светлом фоне", + "enabled": false + }, + "outlineTransparentDefaultHover": { + "value": "#070B0E93", + "comment": "Прозрачный цвет обводки по умолчанию на светлом фоне", + "enabled": false + }, + "outlineTransparentDefaultActive": { + "value": "#070B0EC4", + "comment": "Прозрачный цвет обводки по умолчанию на светлом фоне", + "enabled": false + }, + "outlineTransparentPrimary": { + "value": "[general.coolGray.1000][-0.880]", + "comment": "Основной прозрачный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineTransparentPrimaryHover": { + "value": "#070B0EFF", + "comment": "Основной прозрачный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineTransparentPrimaryActive": { + "value": "#070B0E25", + "comment": "Основной прозрачный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineTransparentSecondary": { + "value": "[general.coolGray.1000][-0.720]", + "comment": "Вторичный прозрачный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineTransparentSecondaryHover": { + "value": "#070B0EFF", + "comment": "Вторичный прозрачный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineTransparentSecondaryActive": { + "value": "#070B0E56", + "comment": "Вторичный прозрачный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineTransparentTertiary": { + "value": "[general.coolGray.1000][-0.440]", + "comment": "Третичный прозрачный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineTransparentTertiaryHover": { + "value": "#070B0EFF", + "comment": "Третичный прозрачный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineTransparentTertiaryActive": { + "value": "#070B0EAB", + "comment": "Третичный прозрачный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineClear": { + "value": "#FFFFFF00", + "comment": "Бесцветная обводка на светлом фоне", + "enabled": false + }, + "outlineClearHover": { + "value": "#FFFFFF00", + "comment": "Бесцветная обводка на светлом фоне", + "enabled": false + }, + "outlineClearActive": { + "value": "#FFFFFF00", + "comment": "Бесцветная обводка на светлом фоне", + "enabled": false + }, + "outlineAccentHover": { + "value": "#19CC19FF", + "comment": "Акцентный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineAccentActive": { + "value": "#15A815FF", + "comment": "Акцентный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineAccentGradient": { + "value": "#FFFFFF", + "comment": "Акцентный цвет обводки с градиентом на светлом фоне", + "enabled": false + }, + "outlineAccentGradientHover": { + "value": "#000000FF", + "comment": "Акцентный цвет обводки с градиентом на светлом фоне", + "enabled": false + }, + "outlineAccentGradientActive": { + "value": "#CCCCCCFF", + "comment": "Акцентный цвет обводки с градиентом на светлом фоне", + "enabled": false + }, + "outlineAccentMinor": { + "value": "[general.herbal.250]", + "comment": "Акцентный минорный непрозрачный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineAccentMinorHover": { + "value": "#60EB60FF", + "comment": "Акцентный минорный непрозрачный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineAccentMinorActive": { + "value": "#1BDE1BFF", + "comment": "Акцентный минорный непрозрачный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineAccentMinorGradient": { + "value": "#FFFFFF", + "comment": "Акцентный минорный цвет обводки с градиентом на светлом фоне", + "enabled": false + }, + "outlineAccentMinorGradientHover": { + "value": "#000000FF", + "comment": "Акцентный минорный цвет обводки с градиентом на светлом фоне", + "enabled": false + }, + "outlineAccentMinorGradientActive": { + "value": "#CCCCCCFF", + "comment": "Акцентный минорный цвет обводки с градиентом на светлом фоне", + "enabled": false + }, + "outlineTransparentAccent": { + "value": "[general.herbal.700][-0.6]", + "comment": "Прозрачный акцентный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineTransparentAccentHover": { + "value": "#108410FF", + "comment": "Прозрачный акцентный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineTransparentAccentActive": { + "value": "#1084107A", + "comment": "Прозрачный акцентный цвет обводки на светлом фоне", + "enabled": false + }, + "outlineTransparentAccentGradient": { + "value": "#FFFFFF", + "comment": "Прозрачный акцентный цвет обводки с градиентом на светлом фоне", + "enabled": false + }, + "outlineTransparentAccentGradientHover": { + "value": "#000000FF", + "comment": "Прозрачный акцентный цвет обводки с градиентом на светлом фоне", + "enabled": false + }, + "outlineTransparentAccentGradientActive": { + "value": "#CCCCCCFF", + "comment": "Прозрачный акцентный цвет обводки с градиентом на светлом фоне", + "enabled": false + }, + "outlinePromo": { + "value": "#FFFFFF", + "comment": "Промо цвет обводки на светлом фоне", + "enabled": false + }, + "outlinePromoHover": { + "value": "#000000FF", + "comment": "Промо цвет обводки на светлом фоне", + "enabled": false + }, + "outlinePromoActive": { + "value": "#CCCCCCFF", + "comment": "Промо цвет обводки на светлом фоне", + "enabled": false + }, + "outlinePromoGradient": { + "value": "#FFFFFF", + "comment": "Промо цвет обводки с градиентом на светлом фоне", + "enabled": false + }, + "outlinePromoGradientHover": { + "value": "#000000FF", + "comment": "Промо цвет обводки с градиентом на светлом фоне", + "enabled": false + }, + "outlinePromoGradientActive": { + "value": "#CCCCCCFF", + "comment": "Промо цвет обводки с градиентом на светлом фоне", + "enabled": false + }, + "outlinePromoMinor": { + "value": "#FFFFFF", + "comment": "Минорный промо цвет обводки на светлом фоне", + "enabled": false + }, + "outlinePromoMinorHover": { + "value": "#000000FF", + "comment": "Минорный промо цвет обводки на светлом фоне", + "enabled": false + }, + "outlinePromoMinorActive": { + "value": "#CCCCCCFF", + "comment": "Минорный промо цвет обводки на светлом фоне", + "enabled": false + }, + "outlinePromoMinorGradient": { + "value": "#FFFFFF", + "comment": "Минорный промо цвет обводки с градиентом на светлом фоне", + "enabled": false + }, + "outlinePromoMinorGradientHover": { + "value": "#000000FF", + "comment": "Минорный промо цвет обводки с градиентом на светлом фоне", + "enabled": false + }, + "outlinePromoMinorGradientActive": { + "value": "#CCCCCCFF", + "comment": "Минорный промо цвет обводки с градиентом на светлом фоне", + "enabled": false + }, + "outlinePositiveHover": { + "value": "#15D137FF", + "comment": "Цвет обводки успех на светлом фоне", + "enabled": false + }, + "outlinePositiveActive": { + "value": "#11AC2DFF", + "comment": "Цвет обводки успех на светлом фоне", + "enabled": false + }, + "outlineWarning": { + "value": "[general.orange.600]", + "comment": "Цвет обводки предупреждение на светлом фоне", + "enabled": false + }, + "outlineWarningHover": { + "value": "#FD6B17FF", + "comment": "Цвет обводки предупреждение на светлом фоне", + "enabled": false + }, + "outlineWarningActive": { + "value": "#C04802FF", + "comment": "Цвет обводки предупреждение на светлом фоне", + "enabled": false + }, + "outlineNegativeHover": { + "value": "#EE2F43FF", + "comment": "Цвет обводки ошибка на светлом фоне", + "enabled": false + }, + "outlineNegativeActive": { + "value": "#BD0F21FF", + "comment": "Цвет обводки ошибка на светлом фоне", + "enabled": false + }, + "outlineInfoHover": { + "value": "#000000FF", + "comment": "Цвет обводки информация на светлом фоне", + "enabled": false + }, + "outlineInfoActive": { + "value": "#1952BEFF", + "comment": "Цвет обводки информация на светлом фоне", + "enabled": false + }, + "outlinePositiveMinor": { + "value": "[general.green.250]", + "comment": "Минорный цвет обводки успех на светлом фоне", + "enabled": false + }, + "outlinePositiveMinorHover": { + "value": "#68E880FF", + "comment": "Минорный цвет обводки успех на светлом фоне", + "enabled": false + }, + "outlinePositiveMinorActive": { + "value": "#21DE44FF", + "comment": "Минорный цвет обводки успех на светлом фоне", + "enabled": false + }, + "outlineWarningMinor": { + "value": "[general.orange.250]", + "comment": "Минорный цвет обводки предупреждение на светлом фоне", + "enabled": false + }, + "outlineWarningMinorHover": { + "value": "#FFCDB3FF", + "comment": "Минорный цвет обводки предупреждение на светлом фоне", + "enabled": false + }, + "outlineWarningMinorActive": { + "value": "#FF9861FF", + "comment": "Минорный цвет обводки предупреждение на светлом фоне", + "enabled": false + }, + "outlineNegativeMinor": { + "value": "[general.red.250]", + "comment": "Минорный цвет обводки ошибка на светлом фоне", + "enabled": false + }, + "outlineNegativeMinorHover": { + "value": "#FEDCDFFF", + "comment": "Минорный цвет обводки ошибка на светлом фоне", + "enabled": false + }, + "outlineNegativeMinorActive": { + "value": "#FD8B97FF", + "comment": "Минорный цвет обводки ошибка на светлом фоне", + "enabled": false + }, + "outlineInfoMinor": { + "value": "[general.blue.250]", + "comment": "Минорный цвет обводки информация на светлом фоне", + "enabled": false + }, + "outlineInfoMinorHover": { + "value": "#ADDEFFFF", + "comment": "Минорный цвет обводки информация на светлом фоне", + "enabled": false + }, + "outlineInfoMinorActive": { + "value": "#5CBEFFFF", + "comment": "Минорный цвет обводки информация на светлом фоне", + "enabled": false + }, + "outlineTransparentPositive": { + "value": "[general.green.600][-0.72]", + "comment": "Прозрачный цвет обводки успех на светлом фоне", + "enabled": false + }, + "outlineTransparentPositiveHover": { + "value": "#108E25FF", + "comment": "Прозрачный цвет обводки успех на светлом фоне", + "enabled": false + }, + "outlineTransparentPositiveActive": { + "value": "#108E2556", + "comment": "Прозрачный цвет обводки успех на светлом фоне", + "enabled": false + }, + "outlineTransparentWarning": { + "value": "[general.orange.600][-0.72]", + "comment": "Прозрачный цвет обводки предупреждение на светлом фоне", + "enabled": false + }, + "outlineTransparentWarningHover": { + "value": "#E85702FF", + "comment": "Прозрачный цвет обводки предупреждение на светлом фоне", + "enabled": false + }, + "outlineTransparentWarningActive": { + "value": "#E8570256", + "comment": "Прозрачный цвет обводки предупреждение на светлом фоне", + "enabled": false + }, + "outlineTransparentNegative": { + "value": "[general.red.600][-0.72]", + "comment": "Прозрачный цвет обводки предупреждение на светлом фоне", + "enabled": false + }, + "outlineTransparentNegativeHover": { + "value": "#F31B31FF", + "comment": "Прозрачный цвет обводки предупреждение на светлом фоне", + "enabled": false + }, + "outlineTransparentNegativeActive": { + "value": "#F31B3156", + "comment": "Прозрачный цвет обводки предупреждение на светлом фоне", + "enabled": false + }, + "outlineTransparentInfo": { + "value": "[general.blue.600][-0.72]", + "comment": "Прозрачный цвет обводки информация на светлом фоне", + "enabled": false + }, + "outlineTransparentInfoHover": { + "value": "#0B7ECBFF", + "comment": "Прозрачный цвет обводки информация на светлом фоне", + "enabled": false + }, + "outlineTransparentInfoActive": { + "value": "#0B7ECB56", + "comment": "Прозрачный цвет обводки информация на светлом фоне", + "enabled": false + }, + "outlineSolidPrimary": { + "value": "[general.coolGray.250]", + "comment": "Основной непрозрачный цвет обводки на светлом фоне", + "enabled": true + }, + "outlineSolidSecondary": { + "value": "[general.coolGray.500]", + "comment": "Вторичный непрозрачный цвет обводки на светлом фоне", + "enabled": true + }, + "outlineAccent": { + "value": "[general.herbal.700]", + "comment": "Акцентный цвет обводки на светлом фоне", + "enabled": true + }, + "outlinePositive": { + "value": "[general.green.700]", + "comment": "Цвет обводки успех на светлом фоне", + "enabled": true + }, + "outlineNegative": { + "value": "[general.red.700]", + "comment": "Цвет обводки ошибка на светлом фоне", + "enabled": true + }, + "outlineInfo": { + "value": "[general.electricBlue.700]", + "comment": "Цвет обводки информация на светлом фоне", + "enabled": true + } + }, + "inverse": { + "outlineSolidPrimaryHover": { + "value": "#7A8994FF", + "comment": "Инвертированный основной непрозрачный цвет обводки", + "enabled": false + }, + "outlineSolidPrimaryActive": { + "value": "#546069FF", + "comment": "Инвертированный основной непрозрачный цвет обводки", + "enabled": false + }, + "outlineSolidSecondaryHover": { + "value": "#000000FF", + "comment": "Инвертированный вторичный непрозрачный цвет обводки", + "enabled": false + }, + "outlineSolidSecondaryActive": { + "value": "#636D74FF", + "comment": "Инвертированный вторичный непрозрачный цвет обводки", + "enabled": false + }, + "outlineSolidTertiary": { + "value": "[general.coolGray.800]", + "comment": "Инвертированный третичный непрозрачный цвет обводки", + "enabled": false + }, + "outlineSolidTertiaryHover": { + "value": "#000000FF", + "comment": "Инвертированный третичный непрозрачный цвет обводки", + "enabled": false + }, + "outlineSolidTertiaryActive": { + "value": "#3A4145FF", + "comment": "Инвертированный третичный непрозрачный цвет обводки", + "enabled": false + }, + "outlineTransparentDefault": { + "value": "[general.coolGray.50][-0.0400]", + "comment": "Инвертированный прозрачный цвет обводки по умолчанию", + "enabled": false + }, + "outlineTransparentDefaultHover": { + "value": "#F8FAFC93", + "comment": "Инвертированный прозрачный цвет обводки по умолчанию", + "enabled": false + }, + "outlineTransparentDefaultActive": { + "value": "#F8FAFCC4", + "comment": "Инвертированный прозрачный цвет обводки по умолчанию", + "enabled": false + }, + "outlineTransparentPrimary": { + "value": "[general.coolGray.50][-0.880]", + "comment": "Инвертированный основной прозрачный цвет обводки", + "enabled": false + }, + "outlineTransparentPrimaryHover": { + "value": "#F8FAFCFF", + "comment": "Инвертированный основной прозрачный цвет обводки", + "enabled": false + }, + "outlineTransparentPrimaryActive": { + "value": "#F8FAFC25", + "comment": "Инвертированный основной прозрачный цвет обводки", + "enabled": false + }, + "outlineTransparentSecondary": { + "value": "[general.coolGray.50][-0.800]", + "comment": "Инвертированный вторичный прозрачный цвет обводки", + "enabled": false + }, + "outlineTransparentSecondaryHover": { + "value": "#F8FAFCFF", + "comment": "Инвертированный вторичный прозрачный цвет обводки", + "enabled": false + }, + "outlineTransparentSecondaryActive": { + "value": "#F8FAFC3D", + "comment": "Инвертированный вторичный прозрачный цвет обводки", + "enabled": false + }, + "outlineTransparentTertiary": { + "value": "[general.coolGray.50][-0.720]", + "comment": "Инвертированный третичный прозрачный цвет обводки", + "enabled": false + }, + "outlineTransparentTertiaryHover": { + "value": "#F8FAFCFF", + "comment": "Инвертированный третичный прозрачный цвет обводки", + "enabled": false + }, + "outlineTransparentTertiaryActive": { + "value": "#F8FAFC56", + "comment": "Инвертированный третичный прозрачный цвет обводки", + "enabled": false + }, + "outlineClear": { + "value": "#FFFFFF00", + "comment": "Инвертированная бесцветная обводка", + "enabled": false + }, + "outlineClearHover": { + "value": "#FFFFFF00", + "comment": "Инвертированная бесцветная обводка", + "enabled": false + }, + "outlineClearActive": { + "value": "#FFFFFF00", + "comment": "Инвертированная бесцветная обводка", + "enabled": false + }, + "outlineAccentHover": { + "value": "#0FC20FFF", + "comment": "Инвертированный акцентный цвет обводки", + "enabled": false + }, + "outlineAccentActive": { + "value": "#097709FF", + "comment": "Инвертированный акцентный цвет обводки", + "enabled": false + }, + "outlineAccentGradient": { + "value": "#FFFFFF", + "comment": "Инвертированный акцентный цвет обводки с градиентом", + "enabled": false + }, + "outlineAccentGradientHover": { + "value": "#000000FF", + "comment": "Инвертированный акцентный цвет обводки с градиентом", + "enabled": false + }, + "outlineAccentGradientActive": { + "value": "#CCCCCCFF", + "comment": "Инвертированный акцентный цвет обводки с градиентом", + "enabled": false + }, + "outlineAccentMinor": { + "value": "[general.herbal.850]", + "comment": "Инвертированный акцентный минорный непрозрачный цвет обводки", + "enabled": false + }, + "outlineAccentMinorHover": { + "value": "#118811FF", + "comment": "Инвертированный акцентный минорный непрозрачный цвет обводки", + "enabled": false + }, + "outlineAccentMinorActive": { + "value": "#0C640CFF", + "comment": "Инвертированный акцентный минорный непрозрачный цвет обводки", + "enabled": false + }, + "outlineAccentMinorGradient": { + "value": "#FFFFFF", + "comment": "Инвертированный акцентный минорный цвет обводки с градиентом", + "enabled": false + }, + "outlineAccentMinorGradientHover": { + "value": "#000000FF", + "comment": "Инвертированный акцентный минорный цвет обводки с градиентом", + "enabled": false + }, + "outlineAccentMinorGradientActive": { + "value": "#CCCCCCFF", + "comment": "Инвертированный акцентный минорный цвет обводки с градиентом", + "enabled": false + }, + "outlineTransparentAccent": { + "value": "[general.herbal.500][-0.6]", + "comment": "Прозрачный инвертированный акцентный цвет обводки", + "enabled": false + }, + "outlineTransparentAccentHover": { + "value": "#0C9D0CFF", + "comment": "Прозрачный инвертированный акцентный цвет обводки", + "enabled": false + }, + "outlineTransparentAccentActive": { + "value": "#0C9D0C7A", + "comment": "Прозрачный инвертированный акцентный цвет обводки", + "enabled": false + }, + "outlineTransparentAccentGradient": { + "value": "#FFFFFF", + "comment": "Прозрачный инвертированный акцентный цвет обводки с градиентом", + "enabled": false + }, + "outlineTransparentAccentGradientHover": { + "value": "#000000FF", + "comment": "Прозрачный инвертированный акцентный цвет обводки с градиентом", + "enabled": false + }, + "outlineTransparentAccentGradientActive": { + "value": "#CCCCCCFF", + "comment": "Прозрачный инвертированный акцентный цвет обводки с градиентом", + "enabled": false + }, + "outlinePromo": { + "value": "#FFFFFF", + "comment": "Инвертированный промо цвет обводки", + "enabled": false + }, + "outlinePromoHover": { + "value": "#000000FF", + "comment": "Инвертированный промо цвет обводки", + "enabled": false + }, + "outlinePromoActive": { + "value": "#CCCCCCFF", + "comment": "Инвертированный промо цвет обводки", + "enabled": false + }, + "outlinePromoGradient": { + "value": "#FFFFFF", + "comment": "Инвертированный промо цвет обводки с градиентом", + "enabled": false + }, + "outlinePromoGradientHover": { + "value": "#000000FF", + "comment": "Инвертированный промо цвет обводки с градиентом", + "enabled": false + }, + "outlinePromoGradientActive": { + "value": "#CCCCCCFF", + "comment": "Инвертированный промо цвет обводки с градиентом", + "enabled": false + }, + "outlinePromoMinor": { + "value": "#FFFFFF", + "comment": "Инвертированный минорный промо цвет обводки", + "enabled": false + }, + "outlinePromoMinorHover": { + "value": "#000000FF", + "comment": "Инвертированный минорный промо цвет обводки", + "enabled": false + }, + "outlinePromoMinorActive": { + "value": "#CCCCCCFF", + "comment": "Инвертированный минорный промо цвет обводки", + "enabled": false + }, + "outlinePromoMinorGradient": { + "value": "#FFFFFF", + "comment": "Инвертированный минорный промо цвет обводки с градиентом", + "enabled": false + }, + "outlinePromoMinorGradientHover": { + "value": "#000000FF", + "comment": "Инвертированный минорный промо цвет обводки с градиентом", + "enabled": false + }, + "outlinePromoMinorGradientActive": { + "value": "#CCCCCCFF", + "comment": "Инвертированный минорный промо цвет обводки с градиентом", + "enabled": false + }, + "outlinePositiveHover": { + "value": "#0FC20FFF", + "comment": "Инвертированный цвет обводки успех", + "enabled": false + }, + "outlinePositiveActive": { + "value": "#097709FF", + "comment": "Инвертированный цвет обводки успех", + "enabled": false + }, + "outlineWarning": { + "value": "[general.orange.500]", + "comment": "Инвертированный цвет обводки предупреждение", + "enabled": false + }, + "outlineWarningHover": { + "value": "#FB782DFF", + "comment": "Инвертированный цвет обводки предупреждение", + "enabled": false + }, + "outlineWarningActive": { + "value": "#D25004FF", + "comment": "Инвертированный цвет обводки предупреждение", + "enabled": false + }, + "outlineNegativeHover": { + "value": "#FF5263FF", + "comment": "Инвертированный цвет обводки ошибка", + "enabled": false + }, + "outlineNegativeActive": { + "value": "#FF001AFF", + "comment": "Инвертированный цвет обводки ошибка", + "enabled": false + }, + "outlineInfoHover": { + "value": "#689CFDFF", + "comment": "Инвертированный цвет обводки информация", + "enabled": false + }, + "outlineInfoActive": { + "value": "#1767FDFF", + "comment": "Инвертированный цвет обводки информация", + "enabled": false + }, + "outlinePositiveMinor": { + "value": "[general.green.850]", + "comment": "Инвертированный минорный цвет обводки успех", + "enabled": false + }, + "outlinePositiveMinorHover": { + "value": "#15892BFF", + "comment": "Инвертированный минорный цвет обводки успех", + "enabled": false + }, + "outlinePositiveMinorActive": { + "value": "#106520FF", + "comment": "Инвертированный минорный цвет обводки успех", + "enabled": false + }, + "outlineWarningMinor": { + "value": "[general.orange.850]", + "comment": "Инвертированный минорный цвет обводки предупреждение", + "enabled": false + }, + "outlineWarningMinorHover": { + "value": "#A74811FF", + "comment": "Инвертированный минорный цвет обводки предупреждение", + "enabled": false + }, + "outlineWarningMinorActive": { + "value": "#82380DFF", + "comment": "Инвертированный минорный цвет обводки предупреждение", + "enabled": false + }, + "outlineNegativeMinor": { + "value": "[general.red.850]", + "comment": "Инвертированный минорный цвет обводки ошибка", + "enabled": false + }, + "outlineNegativeMinorHover": { + "value": "#B11B2AFF", + "comment": "Инвертированный минорный цвет обводки ошибка", + "enabled": false + }, + "outlineNegativeMinorActive": { + "value": "#8E1521FF", + "comment": "Инвертированный минорный цвет обводки ошибка", + "enabled": false + }, + "outlineInfoMinor": { + "value": "[general.blue.850]", + "comment": "Инвертированный минорный цвет обводки информация", + "enabled": false + }, + "outlineInfoMinorHover": { + "value": "#176AA1FF", + "comment": "Инвертированный минорный цвет обводки информация", + "enabled": false + }, + "outlineInfoMinorActive": { + "value": "#12527DFF", + "comment": "Инвертированный минорный цвет обводки информация", + "enabled": false + }, + "outlineTransparentPositive": { + "value": "[general.green.500][-0.72]", + "comment": "Прозрачный инвертированный цвет обводки успех", + "enabled": false + }, + "outlineTransparentPositiveHover": { + "value": "#1A9E32FF", + "comment": "Прозрачный инвертированный цвет обводки успех", + "enabled": false + }, + "outlineTransparentPositiveActive": { + "value": "#1A9E3256", + "comment": "Прозрачный инвертированный цвет обводки успех", + "enabled": false + }, + "outlineTransparentWarning": { + "value": "[general.orange.500][-0.72]", + "comment": "Прозрачный инвертированный цвет обводки предупреждение", + "enabled": false + }, + "outlineTransparentWarningHover": { + "value": "#FA5F05FF", + "comment": "Прозрачный инвертированный цвет обводки предупреждение", + "enabled": false + }, + "outlineTransparentWarningActive": { + "value": "#FA5F0556", + "comment": "Прозрачный инвертированный цвет обводки предупреждение", + "enabled": false + }, + "outlineTransparentNegative": { + "value": "[general.red.500][-0.72]", + "comment": "Прозрачный инвертированный цвет обводки предупреждение", + "enabled": false + }, + "outlineTransparentNegativeHover": { + "value": "#FF293EFF", + "comment": "Прозрачный инвертированный цвет обводки предупреждение", + "enabled": false + }, + "outlineTransparentNegativeActive": { + "value": "#FF293E56", + "comment": "Прозрачный инвертированный цвет обводки предупреждение", + "enabled": false + }, + "outlineTransparentInfo": { + "value": "[general.blue.500][-0.72]", + "comment": "Прозрачный инвертированный цвет обводки информация", + "enabled": false + }, + "outlineTransparentInfoHover": { + "value": "#118CDFFF", + "comment": "Прозрачный инвертированный цвет обводки информация", + "enabled": false + }, + "outlineTransparentInfoActive": { + "value": "#118CDF56", + "comment": "Прозрачный инвертированный цвет обводки информация", + "enabled": false + }, + "outlineSolidPrimary": { + "value": "[general.coolGray.850]", + "comment": "Инвертированный основной непрозрачный цвет обводки", + "enabled": true + }, + "outlineSolidSecondary": { + "value": "[general.coolGray.500]", + "comment": "Инвертированный вторичный непрозрачный цвет обводки", + "enabled": true + }, + "outlineAccent": { + "value": "[general.herbal.500]", + "comment": "Инвертированный акцентный цвет обводки", + "enabled": true + }, + "outlineNegative": { + "value": "[general.red.500]", + "comment": "Инвертированный цвет обводки ошибка", + "enabled": true + }, + "outlineInfo": { + "value": "[general.electricBlue.500]", + "comment": "Инвертированный цвет обводки информация", + "enabled": true + }, + "outlinePositive": { + "value": "[general.herbal.500]", + "comment": "Инвертированный цвет обводки успех", + "enabled": true + } + } + } + } +} diff --git a/packages/plasma-tokens/package-lock.json b/packages/plasma-tokens/package-lock.json index e50e424b58..635f22a9b6 100644 --- a/packages/plasma-tokens/package-lock.json +++ b/packages/plasma-tokens/package-lock.json @@ -1,12 +1,12 @@ { "name": "@salutejs/plasma-tokens", - "version": "1.83.0", + "version": "1.84.0-dev.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@salutejs/plasma-tokens", - "version": "1.83.0", + "version": "1.84.0-dev.0", "license": "MIT", "devDependencies": { "@diez/web-sdk-common": "10.6.0", diff --git a/packages/plasma-tokens/package.json b/packages/plasma-tokens/package.json index ecc835d179..10ad6c8fa7 100644 --- a/packages/plasma-tokens/package.json +++ b/packages/plasma-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@salutejs/plasma-tokens", - "version": "1.83.0", + "version": "1.84.0-dev.0", "description": "plasma-tokens package", "author": "Salute Frontend Team ", "license": "MIT", @@ -57,4 +57,4 @@ "Vasiliy Loginevskiy" ], "sideEffects": false -} +} \ No newline at end of file diff --git a/packages/plasma-tokens/src/brands/sdds_cs/index.ts b/packages/plasma-tokens/src/brands/sdds_cs/index.ts new file mode 100644 index 0000000000..16ee090cf9 --- /dev/null +++ b/packages/plasma-tokens/src/brands/sdds_cs/index.ts @@ -0,0 +1,271 @@ +// Generated by robots, do not change this manually! + +/** Основной цвет текста */ +export const textPrimary = 'var(--text-primary, rgba(255, 255, 255, 0.96))'; + +/** Вторичный цвет текста */ +export const textSecondary = 'var(--text-secondary, rgba(255, 255, 255, 0.56))'; + +/** Акцентный цвет */ +export const textAccent = 'var(--text-accent, #0C9C0C)'; + +/** Цвет успеха */ +export const textPositive = 'var(--text-positive, #1A9E32)'; + +/** Цвет ошибки */ +export const textNegative = 'var(--text-negative, #FF293E)'; + +/** Основной цвет текста на темном фоне */ +export const onDarkTextPrimary = 'var(--on-dark-text-primary, rgba(255, 255, 255, 0.96))'; + +/** Вторичный цвет текста на темном фоне */ +export const onDarkTextSecondary = 'var(--on-dark-text-secondary, rgba(255, 255, 255, 0.56))'; + +/** Акцентный цвет на темном фоне */ +export const onDarkTextAccent = 'var(--on-dark-text-accent, #0C9C0C)'; + +/** Акцентный минорный цвет на темном фоне */ +export const onDarkTextAccentMinor = 'var(--on-dark-text-accent-minor, #94FF94)'; + +/** Цвет успеха на темном фоне */ +export const onDarkTextPositive = 'var(--on-dark-text-positive, #1A9E32)'; + +/** Цвет ошибки на темном фоне */ +export const onDarkTextNegative = 'var(--on-dark-text-negative, #FF293E)'; + +/** Инвертированный основной цвет текста */ +export const inverseTextPrimary = 'var(--inverse-text-primary, #060A0CF5)'; + +/** Инвертированный вторичный цвет текста */ +export const inverseTextSecondary = 'var(--inverse-text-secondary, #060A0C8F)'; + +/** Инвертированный акцентный цвет */ +export const inverseTextAccent = 'var(--inverse-text-accent, #108210)'; + +/** Инвертированный минорный акцентный цвет */ +export const inverseTextAccentMinor = 'var(--inverse-text-accent-minor, #082B08)'; + +/** Инвертированный цвет успеха */ +export const inverseTextPositive = 'var(--inverse-text-positive, #108E26)'; + +/** Инвертированный цвет ошибки */ +export const inverseTextNegative = 'var(--inverse-text-negative, #F31B31)'; + +/** Основной непрозрачный фон поверхности/контрола */ +export const surfaceSolidPrimary = 'var(--surface-solid-primary, #13181B)'; + +/** Основной фон для карточек */ +export const surfaceSolidCard = 'var(--surface-solid-card, #13181B)'; + +/** Непрозрачный фон поверхности/контрола по умолчанию */ +export const surfaceSolidDefault = 'var(--surface-solid-default, #F7F9FB)'; + +/** Акцентный фон поверхности/контрола */ +export const surfaceAccent = 'var(--surface-accent, #0C9C0C)'; + +/** Цвет фона поверхности/контрола успех */ +export const surfacePositive = 'var(--surface-positive, #1A9E32)'; + +/** Цвет фона поверхности/контрола ошибка */ +export const surfaceNegative = 'var(--surface-negative, #FF293E)'; + +/** Цвет фона поверхности/контрола информация */ +export const surfaceInfo = 'var(--surface-info, #118CDF)'; + +/** Основной непрозрачный фон поверхности/контрола на темном фоне */ +export const onDarkSurfaceSolidPrimary = 'var(--on-dark-surface-solid-primary, #13181B)'; + +/** Основной фон для карточек на темном фоне */ +export const onDarkSurfaceSolidCard = 'var(--on-dark-surface-solid-card, #13181B)'; + +/** Непрозрачный фон поверхности/контрола по умолчанию на темном фоне */ +export const onDarkSurfaceSolidDefault = 'var(--on-dark-surface-solid-default, #F7F9FB)'; + +/** Акцентный фон поверхности/контрола на темном фоне */ +export const onDarkSurfaceAccent = 'var(--on-dark-surface-accent, #0C9C0C)'; + +/** Цвет фона поверхности/контрола успех на темном фоне */ +export const onDarkSurfacePositive = 'var(--on-dark-surface-positive, #1A9E32)'; + +/** Цвет фона поверхности/контрола ошибка на темном фоне */ +export const onDarkSurfaceNegative = 'var(--on-dark-surface-negative, #FF293E)'; + +/** Цвет фона поверхности/контрола информация на темном фоне */ +export const onDarkSurfaceInfo = 'var(--on-dark-surface-info, #118CDF)'; + +/** Основной непрозрачный фон поверхности/контрола на светлом фоне */ +export const onLightSurfaceSolidPrimary = 'var(--on-light-surface-solid-primary, #F2F5F8)'; + +/** Основной фон для карточек на светлом фоне */ +export const onLightSurfaceSolidCard = 'var(--on-light-surface-solid-card, #FFFFFF)'; + +/** Непрозрачный фон поверхности/контрола по умолчанию на светлом фоне */ +export const onLightSurfaceSolidDefault = 'var(--on-light-surface-solid-default, #060A0C)'; + +/** Акцентный фон поверхности/контрола на светлом фоне */ +export const onLightSurfaceAccent = 'var(--on-light-surface-accent, #108210)'; + +/** Цвет фона поверхности/контрола успех на светлом фоне */ +export const onLightSurfacePositive = 'var(--on-light-surface-positive, #1A9E32)'; + +/** Цвет фона поверхности/контрола ошибка на светлом фоне */ +export const onLightSurfaceNegative = 'var(--on-light-surface-negative, #FF293E)'; + +/** Цвет фона поверхности/контрола информация на светлом фоне */ +export const onLightSurfaceInfo = 'var(--on-light-surface-info, #118CDF)'; + +/** Инвертированный основной непрозрачный фон поверхности/контрола */ +export const inverseSurfaceSolidPrimary = 'var(--inverse-surface-solid-primary, #F2F5F8)'; + +/** Инвертированный основной фон для карточек */ +export const inverseSurfaceSolidCard = 'var(--inverse-surface-solid-card, #FFFFFF)'; + +/** Инвертированный непрозрачный фон поверхности/контрола по умолчанию */ +export const inverseSurfaceSolidDefault = 'var(--inverse-surface-solid-default, #060A0C)'; + +/** Инвертированный акцентный фон поверхности/контрола */ +export const inverseSurfaceAccent = 'var(--inverse-surface-accent, #108210)'; + +/** Инвертированный цвет фона поверхности/контрола успех */ +export const inverseSurfacePositive = 'var(--inverse-surface-positive, #1A9E32)'; + +/** Инвертированный цвет фона поверхности/контрола ошибка */ +export const inverseSurfaceNegative = 'var(--inverse-surface-negative, #FF293E)'; + +/** Инвертированный цвет фона поверхности/контрола информация */ +export const inverseSurfaceInfo = 'var(--inverse-surface-info, #118CDF)'; + +/** Основной фон */ +export const backgroundPrimary = 'var(--background-primary, #060A0C)'; + +/** Основной фон на темном фоне */ +export const darkBackgroundPrimary = 'var(--dark-background-primary, #060A0C)'; + +/** Основной фон на светлом фоне */ +export const lightBackgroundPrimary = 'var(--light-background-primary, #F7F9FB)'; + +/** Инвертированный основной фон */ +export const inverseBackgroundPrimary = 'var(--inverse-background-primary, #F7F9FB)'; + +/** Основной непрозрачный цвет обводки */ +export const outlineDefaultOutlineSolidPrimary = 'var(--outline-default-outline-solid-primary, #23292D)'; + +/** Вторичный непрозрачный цвет обводки */ +export const outlineDefaultOutlineSolidSecondary = 'var(--outline-default-outline-solid-secondary, #30373C)'; + +/** Акцентный цвет обводки */ +export const outlineDefaultOutlineAccent = 'var(--outline-default-outline-accent, #0C9C0C)'; + +/** Цвет обводки успех */ +export const outlineDefaultOutlinePositive = 'var(--outline-default-outline-positive, #1A9E32)'; + +/** Цвет обводки ошибка */ +export const outlineDefaultOutlineNegative = 'var(--outline-default-outline-negative, #FF293E)'; + +/** Цвет обводки информация */ +export const outlineDefaultOutlineInfo = 'var(--outline-default-outline-info, #118CDF)'; + +/** Основной непрозрачный цвет обводки на темном фоне */ +export const outlineOnDarkOutlineSolidPrimary = 'var(--outline-on-dark-outline-solid-primary, #23292D)'; + +/** Вторичный непрозрачный цвет обводки на темном фоне */ +export const outlineOnDarkOutlineSolidSecondary = 'var(--outline-on-dark-outline-solid-secondary, #30373C)'; + +/** Акцентный цвет обводки на темном фоне */ +export const outlineOnDarkOutlineAccent = 'var(--outline-on-dark-outline-accent, #0C9C0C)'; + +/** Цвет обводки успех на темном фоне */ +export const outlineOnDarkOutlinePositive = 'var(--outline-on-dark-outline-positive, #1A9E32)'; + +/** Цвет обводки ошибка на темном фоне */ +export const outlineOnDarkOutlineNegative = 'var(--outline-on-dark-outline-negative, #FF293E)'; + +/** Цвет обводки информация на темном фоне */ +export const outlineOnDarkOutlineInfo = 'var(--outline-on-dark-outline-info, #118CDF)'; + +/** Основной непрозрачный цвет обводки на светлом фоне */ +export const outlineOnLightOutlineSolidPrimary = 'var(--outline-on-light-outline-solid-primary, #D5DFE6)'; + +/** Вторичный непрозрачный цвет обводки на светлом фоне */ +export const outlineOnLightOutlineSolidSecondary = 'var(--outline-on-light-outline-solid-secondary, #ADB9C2)'; + +/** Акцентный цвет обводки на светлом фоне */ +export const outlineOnLightOutlineAccent = 'var(--outline-on-light-outline-accent, #108210)'; + +/** Цвет обводки успех на светлом фоне */ +export const outlineOnLightOutlinePositive = 'var(--outline-on-light-outline-positive, #108E26)'; + +/** Цвет обводки ошибка на светлом фоне */ +export const outlineOnLightOutlineNegative = 'var(--outline-on-light-outline-negative, #F31B31)'; + +/** Цвет обводки информация на светлом фоне */ +export const outlineOnLightOutlineInfo = 'var(--outline-on-light-outline-info, #0B7ECB)'; + +/** Инвертированный основной непрозрачный цвет обводки */ +export const outlineInverseOutlineSolidPrimary = 'var(--outline-inverse-outline-solid-primary, #D5DFE6)'; + +/** Инвертированный вторичный непрозрачный цвет обводки */ +export const outlineInverseOutlineSolidSecondary = 'var(--outline-inverse-outline-solid-secondary, #ADB9C2)'; + +/** Инвертированный акцентный цвет обводки */ +export const outlineInverseOutlineAccent = 'var(--outline-inverse-outline-accent, #108210)'; + +/** Инвертированный цвет обводки успех */ +export const outlineInverseOutlinePositive = 'var(--outline-inverse-outline-positive, #108E26)'; + +/** Инвертированный цвет обводки ошибка */ +export const outlineInverseOutlineNegative = 'var(--outline-inverse-outline-negative, #F31B31)'; + +/** Инвертированный цвет обводки информация */ +export const outlineInverseOutlineInfo = 'var(--outline-inverse-outline-info, #0B7ECB)'; + +export const skeletonGradient = + 'var(--skeleton-gradient, linear-gradient( 90deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.08) 6.25%, rgba(255, 255, 255, 0.05) 12.5%, rgba(255, 255, 255, 0.01) 25%, rgba(255, 255, 255, 0.05) 37.5%, rgba(255, 255, 255, 0.08) 43.75%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.08) 56.25%, rgba(255, 255, 255, 0.05) 62.5%, rgba(255, 255, 255, 0.01) 75%, rgba(255, 255, 255, 0.05) 87.5%, rgba(255, 255, 255, 0.08) 93.75%, rgba(255, 255, 255, 0.09) 100% ))'; + +export const skeletonGradientLighter = + 'var(--skeleton-gradient-lighter, linear-gradient( 90deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.32) 6.25%, rgba(255, 255, 255, 0.20) 12.5%, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.20) 37.5%, rgba(255, 255, 255, 0.32) 43.75%, rgba(255, 255, 255, 0.36) 50%, rgba(255, 255, 255, 0.08) 56.25%, rgba(255, 255, 255, 0.20) 62.5%, rgba(255, 255, 255, 0.04) 75%, rgba(255, 255, 255, 0.20) 87.5%, rgba(255, 255, 255, 0.32) 93.75%, rgba(255, 255, 255, 0.36) 100% ))'; + +/** @deprecated instead use onDarkTextPrimary */ +export const whitePrimary = 'var(--plasma-colors-white-primary, var(--on-dark-text-primary))'; + +/** @deprecated instead use onDarkTextSecondary */ +export const whiteSecondary = 'var(--plasma-colors-white-secondary, var(--on-dark-text-secondary))'; + +/** @deprecated instead use onLightSurfaceSolidDefault */ +export const buttonBlack = 'var(--plasma-colors-button-black, var(--on-light-surface-solid-default))'; + +/** @deprecated instead use onDarkSurfaceSolidDefault */ +export const buttonWhite = 'var(--plasma-colors-button-white, var(--on-dark-surface-solid-default))'; + +/** @deprecated instead use textPrimary */ +export const text = 'var(--plasma-colors-text, var(--text-primary))'; + +/** @deprecated instead use textPrimary */ +export const primary = 'var(--plasma-colors-primary, var(--text-primary))'; + +/** @deprecated instead use textSecondary */ +export const secondary = 'var(--plasma-colors-secondary, var(--text-secondary))'; + +/** @deprecated instead use backgroundPrimary */ +export const background = 'var(--plasma-colors-background, var(--background-primary))'; + +/** @deprecated instead use textAccent */ +export const accent = 'var(--plasma-colors-accent, var(--text-accent))'; + +/** @deprecated instead use textPositive */ +export const success = 'var(--plasma-colors-success, var(--text-positive))'; + +/** @deprecated instead use textNegative */ +export const critical = 'var(--plasma-colors-critical, var(--text-negative))'; + +/** @deprecated instead use surfaceSolidPrimary */ +export const surfaceSolid01 = 'var(--plasma-colors-surface-solid01, var(--surface-solid-primary))'; + +/** @deprecated instead use textAccent */ +export const buttonAccent = 'var(--plasma-colors-button-accent, var(--text-accent))'; + +/** @deprecated instead use surfacePositive */ +export const buttonSuccess = 'var(--plasma-colors-button-success, var(--surface-positive))'; + +/** @deprecated instead use surfaceNegative */ +export const buttonCritical = 'var(--plasma-colors-button-critical, var(--surface-negative))'; diff --git a/packages/plasma-tokens/src/themes/index.ts b/packages/plasma-tokens/src/themes/index.ts index 64f3b7e4cd..9deb56525c 100644 --- a/packages/plasma-tokens/src/themes/index.ts +++ b/packages/plasma-tokens/src/themes/index.ts @@ -24,6 +24,8 @@ export { sberonline__dark, darkSberonline } from './sberonline__dark'; export { sberonline__light, lightSberonline } from './sberonline__light'; export { sberprime__dark, darkSberprime } from './sberprime__dark'; export { sberprime__light, lightSberprime } from './sberprime__light'; +export { sdds_cs__dark, darkSdds_cs } from './sdds_cs__dark'; +export { sdds_cs__light, lightSdds_cs } from './sdds_cs__light'; export { sdds_dfa__dark, darkSdds_dfa } from './sdds_dfa__dark'; export { sdds_dfa__light, lightSdds_dfa } from './sdds_dfa__light'; export { sdds_serv__dark, darkSdds_serv } from './sdds_serv__dark'; diff --git a/packages/plasma-tokens/src/themes/sdds_cs__dark.ts b/packages/plasma-tokens/src/themes/sdds_cs__dark.ts new file mode 100644 index 0000000000..89f6dd5d4b --- /dev/null +++ b/packages/plasma-tokens/src/themes/sdds_cs__dark.ts @@ -0,0 +1,102 @@ +// Generated by robots, do not change this manually! + +export const sdds_cs__dark = { + ':root': { + '--text-primary': 'rgba(255, 255, 255, 0.96)', + '--text-secondary': 'rgba(255, 255, 255, 0.56)', + '--text-accent': '#0C9C0C', + '--text-positive': '#1A9E32', + '--text-negative': '#FF293E', + '--on-dark-text-primary': 'rgba(255, 255, 255, 0.96)', + '--on-dark-text-secondary': 'rgba(255, 255, 255, 0.56)', + '--on-dark-text-accent': '#0C9C0C', + '--on-dark-text-accent-minor': '#94FF94', + '--on-dark-text-positive': '#1A9E32', + '--on-dark-text-negative': '#FF293E', + '--inverse-text-primary': '#060A0CF5', + '--inverse-text-secondary': '#060A0C8F', + '--inverse-text-accent': '#108210', + '--inverse-text-accent-minor': '#082B08', + '--inverse-text-positive': '#108E26', + '--inverse-text-negative': '#F31B31', + '--surface-solid-primary': '#13181B', + '--surface-solid-card': '#13181B', + '--surface-solid-default': '#F7F9FB', + '--surface-accent': '#0C9C0C', + '--surface-positive': '#1A9E32', + '--surface-negative': '#FF293E', + '--surface-info': '#118CDF', + '--on-dark-surface-solid-primary': '#13181B', + '--on-dark-surface-solid-card': '#13181B', + '--on-dark-surface-solid-default': '#F7F9FB', + '--on-dark-surface-accent': '#0C9C0C', + '--on-dark-surface-positive': '#1A9E32', + '--on-dark-surface-negative': '#FF293E', + '--on-dark-surface-info': '#118CDF', + '--on-light-surface-solid-primary': '#F2F5F8', + '--on-light-surface-solid-card': '#FFFFFF', + '--on-light-surface-solid-default': '#060A0C', + '--on-light-surface-accent': '#108210', + '--on-light-surface-positive': '#1A9E32', + '--on-light-surface-negative': '#FF293E', + '--on-light-surface-info': '#118CDF', + '--inverse-surface-solid-primary': '#F2F5F8', + '--inverse-surface-solid-card': '#FFFFFF', + '--inverse-surface-solid-default': '#060A0C', + '--inverse-surface-accent': '#108210', + '--inverse-surface-positive': '#1A9E32', + '--inverse-surface-negative': '#FF293E', + '--inverse-surface-info': '#118CDF', + '--background-primary': '#060A0C', + '--dark-background-primary': '#060A0C', + '--light-background-primary': '#F7F9FB', + '--inverse-background-primary': '#F7F9FB', + '--outline-default-outline-solid-primary': '#23292D', + '--outline-default-outline-solid-secondary': '#30373C', + '--outline-default-outline-accent': '#0C9C0C', + '--outline-default-outline-positive': '#1A9E32', + '--outline-default-outline-negative': '#FF293E', + '--outline-default-outline-info': '#118CDF', + '--outline-on-dark-outline-solid-primary': '#23292D', + '--outline-on-dark-outline-solid-secondary': '#30373C', + '--outline-on-dark-outline-accent': '#0C9C0C', + '--outline-on-dark-outline-positive': '#1A9E32', + '--outline-on-dark-outline-negative': '#FF293E', + '--outline-on-dark-outline-info': '#118CDF', + '--outline-on-light-outline-solid-primary': '#D5DFE6', + '--outline-on-light-outline-solid-secondary': '#ADB9C2', + '--outline-on-light-outline-accent': '#108210', + '--outline-on-light-outline-positive': '#108E26', + '--outline-on-light-outline-negative': '#F31B31', + '--outline-on-light-outline-info': '#0B7ECB', + '--outline-inverse-outline-solid-primary': '#D5DFE6', + '--outline-inverse-outline-solid-secondary': '#ADB9C2', + '--outline-inverse-outline-accent': '#108210', + '--outline-inverse-outline-positive': '#108E26', + '--outline-inverse-outline-negative': '#F31B31', + '--outline-inverse-outline-info': '#0B7ECB', + '--skeleton-gradient': + 'linear-gradient( 90deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.08) 6.25%, rgba(255, 255, 255, 0.05) 12.5%, rgba(255, 255, 255, 0.01) 25%, rgba(255, 255, 255, 0.05) 37.5%, rgba(255, 255, 255, 0.08) 43.75%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.08) 56.25%, rgba(255, 255, 255, 0.05) 62.5%, rgba(255, 255, 255, 0.01) 75%, rgba(255, 255, 255, 0.05) 87.5%, rgba(255, 255, 255, 0.08) 93.75%, rgba(255, 255, 255, 0.09) 100% )', + '--skeleton-gradient-lighter': + 'linear-gradient( 90deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.32) 6.25%, rgba(255, 255, 255, 0.20) 12.5%, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.20) 37.5%, rgba(255, 255, 255, 0.32) 43.75%, rgba(255, 255, 255, 0.36) 50%, rgba(255, 255, 255, 0.08) 56.25%, rgba(255, 255, 255, 0.20) 62.5%, rgba(255, 255, 255, 0.04) 75%, rgba(255, 255, 255, 0.20) 87.5%, rgba(255, 255, 255, 0.32) 93.75%, rgba(255, 255, 255, 0.36) 100% )', + '--plasma-colors-white-primary': 'var(--on-dark-text-primary)', + '--plasma-colors-white-secondary': 'var(--on-dark-text-secondary)', + '--plasma-colors-button-black': 'var(--on-light-surface-solid-default)', + '--plasma-colors-button-white': 'var(--on-dark-surface-solid-default)', + '--plasma-colors-text': 'var(--text-primary)', + '--plasma-colors-primary': 'var(--text-primary)', + '--plasma-colors-secondary': 'var(--text-secondary)', + '--plasma-colors-background': 'var(--background-primary)', + '--plasma-colors-accent': 'var(--text-accent)', + '--plasma-colors-success': 'var(--text-positive)', + '--plasma-colors-critical': 'var(--text-negative)', + '--plasma-colors-surface-solid01': 'var(--surface-solid-primary)', + '--plasma-colors-button-accent': 'var(--text-accent)', + '--plasma-colors-button-success': 'var(--surface-positive)', + '--plasma-colors-button-critical': 'var(--surface-negative)', + color: 'var(--text-primary)', + 'background-color': 'var(--background-primary)', + }, +}; +/** @deprecated использовать вместо этого sdds_cs__dark */ +export const darkSdds_cs = sdds_cs__dark; diff --git a/packages/plasma-tokens/src/themes/sdds_cs__light.ts b/packages/plasma-tokens/src/themes/sdds_cs__light.ts new file mode 100644 index 0000000000..9fdcf97443 --- /dev/null +++ b/packages/plasma-tokens/src/themes/sdds_cs__light.ts @@ -0,0 +1,102 @@ +// Generated by robots, do not change this manually! + +export const sdds_cs__light = { + ':root': { + '--text-primary': '#23292D', + '--text-secondary': '#7B868E', + '--text-accent': '#108210', + '--text-negative': '#E31227', + '--text-positive': '#108210', + '--on-dark-text-primary': '#7B868E', + '--on-dark-text-secondary': '#7B868E', + '--on-dark-text-accent': '#15B015', + '--on-dark-text-accent-minor': '#94FF94', + '--on-dark-text-negative': '#FF293E', + '--on-dark-text-positive': '#15B015', + '--inverse-text-primary': '#F7F9FB', + '--inverse-text-secondary': '#7B868E', + '--inverse-text-accent': '#15B015', + '--inverse-text-accent-minor': '#94FF94', + '--inverse-text-positive': '#15B015', + '--inverse-text-negative': '#FF293E', + '--surface-solid-primary': '#E8EEF2', + '--surface-solid-card': '#FFFFFF', + '--surface-solid-default': '#657179', + '--surface-accent': '#0B8C0B', + '--surface-positive': '#0B8C0B', + '--surface-negative': '#F31B31', + '--surface-info': '#2A72F8', + '--on-dark-surface-solid-primary': '#30373C', + '--on-dark-surface-solid-card': '#13181B', + '--on-dark-surface-solid-default': '#E8EEF2', + '--on-dark-surface-accent': '#0C9C0C', + '--on-dark-surface-positive': '#0C9C0C', + '--on-dark-surface-negative': '#FF293E', + '--on-dark-surface-info': '#3F81FD', + '--on-light-surface-solid-primary': '#E8EEF2', + '--on-light-surface-solid-card': '#FFFFFF', + '--on-light-surface-solid-default': '#657179', + '--on-light-surface-accent': '#0B8C0B', + '--on-light-surface-positive': '#0B8C0B', + '--on-light-surface-negative': '#F31B31', + '--on-light-surface-info': '#2A72F8', + '--inverse-surface-solid-primary': '#30373C', + '--inverse-surface-solid-card': '#13181B', + '--inverse-surface-solid-default': '#E8EEF2', + '--inverse-surface-accent': '#0C9C0C', + '--inverse-surface-positive': '#0C9C0C', + '--inverse-surface-negative': '#FF293E', + '--inverse-surface-info': '#3F81FD', + '--background-primary': '#F2F5F8', + '--dark-background-primary': '#060A0C', + '--light-background-primary': '#F2F5F8', + '--inverse-background-primary': '#060A0C', + '--outline-default-outline-solid-primary': '#C0CBD3', + '--outline-default-outline-solid-secondary': '#7B868E', + '--outline-default-outline-positive': '#108210', + '--outline-default-outline-accent': '#108210', + '--outline-default-outline-negative': '#E31227', + '--outline-default-outline-info': '#2969E3', + '--outline-on-dark-outline-solid-primary': '#30373C', + '--outline-on-dark-outline-solid-secondary': '#7B868E', + '--outline-on-dark-outline-accent': '#0C9C0C', + '--outline-on-dark-outline-positive': '#0C9C0C', + '--outline-on-dark-outline-negative': '#FF293E', + '--outline-on-dark-outline-info': '#3F81FD', + '--outline-on-light-outline-solid-primary': '#C0CBD3', + '--outline-on-light-outline-solid-secondary': '#7B868E', + '--outline-on-light-outline-accent': '#108210', + '--outline-on-light-outline-positive': '#0D8523', + '--outline-on-light-outline-negative': '#E31227', + '--outline-on-light-outline-info': '#2969E3', + '--outline-inverse-outline-solid-primary': '#30373C', + '--outline-inverse-outline-solid-secondary': '#7B868E', + '--outline-inverse-outline-accent': '#0C9C0C', + '--outline-inverse-outline-negative': '#FF293E', + '--outline-inverse-outline-info': '#3F81FD', + '--outline-inverse-outline-positive': '#0C9C0C', + '--skeleton-gradient': + 'linear-gradient( 90deg, rgba(8, 8, 8, 0.09) 0%, rgba(8, 8, 8, 0.08) 6.25%, rgba(8, 8, 8, 0.05) 12.5%, rgba(8, 8, 8, 0.01) 25%, rgba(8, 8, 8, 0.05) 37.5%, rgba(8, 8, 8, 0.08) 43.75%, rgba(8, 8, 8, 0.09) 50%, rgba(8, 8, 8, 0.08) 56.25%, rgba(8, 8, 8, 0.05) 62.5%, rgba(8, 8, 8, 0.01) 75%, rgba(8, 8, 8, 0.05) 87.5%, rgba(8, 8, 8, 0.08) 93.75%, rgba(8, 8, 8, 0.09) 100% )', + '--skeleton-gradient-lighter': + 'linear-gradient( 90deg, rgba(8, 8, 8, 0.36) 0%, rgba(8, 8, 8, 0.32) 6.25%, rgba(8, 8, 8, 0.20) 12.5%, rgba(8, 8, 8, 0.04) 25%, rgba(8, 8, 8, 0.20) 37.5%, rgba(8, 8, 8, 0.32) 43.75%, rgba(8, 8, 8, 0.36) 50%, rgba(8, 8, 8, 0.08) 56.25%, rgba(8, 8, 8, 0.20) 62.5%, rgba(8, 8, 8, 0.04) 75%, rgba(8, 8, 8, 0.20) 87.5%, rgba(8, 8, 8, 0.32) 93.75%, rgba(8, 8, 8, 0.36) 100% )', + '--plasma-colors-white-primary': 'var(--on-dark-text-primary)', + '--plasma-colors-white-secondary': 'var(--on-dark-text-secondary)', + '--plasma-colors-button-black': 'var(--on-light-surface-solid-default)', + '--plasma-colors-button-white': 'var(--on-dark-surface-solid-default)', + '--plasma-colors-text': 'var(--text-primary)', + '--plasma-colors-primary': 'var(--text-primary)', + '--plasma-colors-secondary': 'var(--text-secondary)', + '--plasma-colors-background': 'var(--background-primary)', + '--plasma-colors-accent': 'var(--text-accent)', + '--plasma-colors-success': 'var(--text-positive)', + '--plasma-colors-critical': 'var(--text-negative)', + '--plasma-colors-surface-solid01': 'var(--surface-solid-primary)', + '--plasma-colors-button-accent': 'var(--text-accent)', + '--plasma-colors-button-success': 'var(--surface-positive)', + '--plasma-colors-button-critical': 'var(--surface-negative)', + color: 'var(--text-primary)', + 'background-color': 'var(--background-primary)', + }, +}; +/** @deprecated использовать вместо этого sdds_cs__light */ +export const lightSdds_cs = sdds_cs__light; diff --git a/packages/plasma-ui/package-lock.json b/packages/plasma-ui/package-lock.json index b3bc66671a..daa162a6d6 100644 --- a/packages/plasma-ui/package-lock.json +++ b/packages/plasma-ui/package-lock.json @@ -1,15 +1,15 @@ { "name": "@salutejs/plasma-ui", - "version": "1.258.0", + "version": "1.260.1-dev.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@salutejs/plasma-ui", - "version": "1.258.0", + "version": "1.260.1-dev.0", "license": "MIT", "dependencies": { - "@salutejs/plasma-core": "1.162.0", + "@salutejs/plasma-core": "1.163.1-dev.0", "@salutejs/plasma-typo": "0.40.0", "color": "3.1.2", "lodash.throttle": "4.1.1", @@ -23,10 +23,10 @@ "@babel/preset-env": "7.24.4", "@babel/preset-react": "7.24.1", "@babel/preset-typescript": "7.24.1", - "@salutejs/plasma-cy-utils": "0.94.0", + "@salutejs/plasma-cy-utils": "0.95.1-dev.0", "@salutejs/plasma-icons": "1.199.0", - "@salutejs/plasma-sb-utils": "0.160.0", - "@salutejs/plasma-tokens": "1.83.0", + "@salutejs/plasma-sb-utils": "0.161.1-dev.0", + "@salutejs/plasma-tokens": "1.84.0-dev.0", "@salutejs/use-virtual": "2.0.0", "@storybook/addon-docs": "7.6.17", "@storybook/addon-essentials": "7.6.17", @@ -4393,9 +4393,9 @@ "dev": true }, "node_modules/@salutejs/plasma-core": { - "version": "1.162.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-core/-/plasma-core-1.162.0.tgz", - "integrity": "sha512-+RmyuJb58tuGgbjvbcby5jjFG5VpZLyD2xTD7JrQaKyI355wYXS6vCXWhMH5JgevOBSNMWfEkRvDuL+YfW/r9w==", + "version": "1.163.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-core/-/plasma-core-1.163.1-dev.0.tgz", + "integrity": "sha512-KHf3PJW6X+aBnOEW6UqKGiyOueEDsFy+3tNT1KAkkPC1ZL3n/On3hmVaDrpzc7sSD+slGdpqQLAvYjR28ZgG0g==", "dependencies": { "@popperjs/core": "2.9.2", "@salutejs/plasma-typo": "0.40.0", @@ -4411,9 +4411,9 @@ } }, "node_modules/@salutejs/plasma-cy-utils": { - "version": "0.94.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-cy-utils/-/plasma-cy-utils-0.94.0.tgz", - "integrity": "sha512-VmyuJHXoV2BmWDrfRpJC7RE7A4FaWoKO5YZmrphQm7bTECvhdvS19V8h/POzG/qT6d2soOX+Bs20MmnPazPy9g==", + "version": "0.95.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-cy-utils/-/plasma-cy-utils-0.95.1-dev.0.tgz", + "integrity": "sha512-wD+TF1KODuJYB/GOKC3QTf42qt6jzNL+zhUMJJTuNU7a7JnPmRxXXJa+wGqbwSTtZvpLwO6qRs3Qf47vqZl2jg==", "dev": true, "peerDependencies": { "react": ">=16.13.1", @@ -4433,13 +4433,13 @@ } }, "node_modules/@salutejs/plasma-sb-utils": { - "version": "0.160.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-sb-utils/-/plasma-sb-utils-0.160.0.tgz", - "integrity": "sha512-+9HfFOprKcd072koF0+FNyYFXATCxjDgNtZfonBhn04o8T80ts58PWYylMhzCr1uZvenszqYDEffIaCM+r5LTQ==", + "version": "0.161.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-sb-utils/-/plasma-sb-utils-0.161.1-dev.0.tgz", + "integrity": "sha512-ft4Owu34dlhr384S2EeSIfpCTW78RwvBsjf/VjiEcnESYnF7wuPwD8UK5euCHJW7IXGaxAAPLTY/6cObiL26VQ==", "dev": true, "dependencies": { "@salutejs/plasma-colors": "0.13.0", - "@salutejs/plasma-core": "1.162.0", + "@salutejs/plasma-core": "1.163.1-dev.0", "param-case": "^3.0.4" }, "peerDependencies": { @@ -4449,9 +4449,9 @@ } }, "node_modules/@salutejs/plasma-tokens": { - "version": "1.83.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-tokens/-/plasma-tokens-1.83.0.tgz", - "integrity": "sha512-k8AgoXKvigigcrqkEmvy3ztDleCt4zeEqzhIPuCyl2CuSSAnhF8Fs3oT1fV7COSoR9BUQpdfjTZEKQ9/b3tZCA==", + "version": "1.84.0-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-tokens/-/plasma-tokens-1.84.0-dev.0.tgz", + "integrity": "sha512-1r66tfwU24rdIEumO+a5CMxpWjp9LGX0MIaVCxITk/3FfY854BXlPywVKGxoAlFwcTku5VliKpQrbBxndLldMQ==", "dev": true, "peerDependencies": { "styled-components": "^5.1.1" @@ -23464,9 +23464,9 @@ "dev": true }, "@salutejs/plasma-core": { - "version": "1.162.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-core/-/plasma-core-1.162.0.tgz", - "integrity": "sha512-+RmyuJb58tuGgbjvbcby5jjFG5VpZLyD2xTD7JrQaKyI355wYXS6vCXWhMH5JgevOBSNMWfEkRvDuL+YfW/r9w==", + "version": "1.163.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-core/-/plasma-core-1.163.1-dev.0.tgz", + "integrity": "sha512-KHf3PJW6X+aBnOEW6UqKGiyOueEDsFy+3tNT1KAkkPC1ZL3n/On3hmVaDrpzc7sSD+slGdpqQLAvYjR28ZgG0g==", "requires": { "@popperjs/core": "2.9.2", "@salutejs/plasma-typo": "0.40.0", @@ -23477,9 +23477,9 @@ } }, "@salutejs/plasma-cy-utils": { - "version": "0.94.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-cy-utils/-/plasma-cy-utils-0.94.0.tgz", - "integrity": "sha512-VmyuJHXoV2BmWDrfRpJC7RE7A4FaWoKO5YZmrphQm7bTECvhdvS19V8h/POzG/qT6d2soOX+Bs20MmnPazPy9g==", + "version": "0.95.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-cy-utils/-/plasma-cy-utils-0.95.1-dev.0.tgz", + "integrity": "sha512-wD+TF1KODuJYB/GOKC3QTf42qt6jzNL+zhUMJJTuNU7a7JnPmRxXXJa+wGqbwSTtZvpLwO6qRs3Qf47vqZl2jg==", "dev": true }, "@salutejs/plasma-icons": { @@ -23489,20 +23489,20 @@ "dev": true }, "@salutejs/plasma-sb-utils": { - "version": "0.160.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-sb-utils/-/plasma-sb-utils-0.160.0.tgz", - "integrity": "sha512-+9HfFOprKcd072koF0+FNyYFXATCxjDgNtZfonBhn04o8T80ts58PWYylMhzCr1uZvenszqYDEffIaCM+r5LTQ==", + "version": "0.161.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-sb-utils/-/plasma-sb-utils-0.161.1-dev.0.tgz", + "integrity": "sha512-ft4Owu34dlhr384S2EeSIfpCTW78RwvBsjf/VjiEcnESYnF7wuPwD8UK5euCHJW7IXGaxAAPLTY/6cObiL26VQ==", "dev": true, "requires": { "@salutejs/plasma-colors": "0.13.0", - "@salutejs/plasma-core": "1.162.0", + "@salutejs/plasma-core": "1.163.1-dev.0", "param-case": "^3.0.4" } }, "@salutejs/plasma-tokens": { - "version": "1.83.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-tokens/-/plasma-tokens-1.83.0.tgz", - "integrity": "sha512-k8AgoXKvigigcrqkEmvy3ztDleCt4zeEqzhIPuCyl2CuSSAnhF8Fs3oT1fV7COSoR9BUQpdfjTZEKQ9/b3tZCA==", + "version": "1.84.0-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-tokens/-/plasma-tokens-1.84.0-dev.0.tgz", + "integrity": "sha512-1r66tfwU24rdIEumO+a5CMxpWjp9LGX0MIaVCxITk/3FfY854BXlPywVKGxoAlFwcTku5VliKpQrbBxndLldMQ==", "dev": true }, "@salutejs/plasma-typo": { diff --git a/packages/plasma-ui/package.json b/packages/plasma-ui/package.json index bf44aeef8f..751e2c6974 100644 --- a/packages/plasma-ui/package.json +++ b/packages/plasma-ui/package.json @@ -1,6 +1,6 @@ { "name": "@salutejs/plasma-ui", - "version": "1.258.0", + "version": "1.260.1-dev.0", "description": "Salute Design System.", "main": "index.js", "module": "es/index.js", @@ -12,7 +12,7 @@ "author": "Salute Frontend Team ", "license": "MIT", "dependencies": { - "@salutejs/plasma-core": "1.162.0", + "@salutejs/plasma-core": "1.163.1-dev.0", "@salutejs/plasma-typo": "0.40.0", "color": "3.1.2", "lodash.throttle": "4.1.1", @@ -33,10 +33,10 @@ "@babel/preset-env": "7.24.4", "@babel/preset-react": "7.24.1", "@babel/preset-typescript": "7.24.1", - "@salutejs/plasma-cy-utils": "0.94.0", + "@salutejs/plasma-cy-utils": "0.95.1-dev.0", "@salutejs/plasma-icons": "1.199.0", - "@salutejs/plasma-sb-utils": "0.160.0", - "@salutejs/plasma-tokens": "1.83.0", + "@salutejs/plasma-sb-utils": "0.161.1-dev.0", + "@salutejs/plasma-tokens": "1.84.0-dev.0", "@salutejs/use-virtual": "2.0.0", "@storybook/addon-docs": "7.6.17", "@storybook/addon-essentials": "7.6.17", @@ -109,4 +109,4 @@ "Чельцов Евгений Олегович" ], "sideEffects": false -} +} \ No newline at end of file diff --git a/packages/plasma-ui/src/components/Price/Price.stories.tsx b/packages/plasma-ui/src/components/Price/Price.stories.tsx index 10869d999b..231758a757 100644 --- a/packages/plasma-ui/src/components/Price/Price.stories.tsx +++ b/packages/plasma-ui/src/components/Price/Price.stories.tsx @@ -15,7 +15,7 @@ const meta: Meta = { decorators: [InSpacing], argTypes: { currency: { - options: ['rub', 'usd', 'eur'], + options: ['rub', 'usd', 'eur', 'inr'], control: { type: 'inline-radio', }, diff --git a/packages/plasma-web/api/plasma-web.api.md b/packages/plasma-web/api/plasma-web.api.md index 28cad61751..b65a3eca50 100644 --- a/packages/plasma-web/api/plasma-web.api.md +++ b/packages/plasma-web/api/plasma-web.api.md @@ -38,6 +38,8 @@ import { BadgeProps } from '@salutejs/plasma-new-hope/styled-components'; import { BaseboxProps } from '@salutejs/plasma-new-hope/styled-components'; import { BaseCallbackChangeInstance } from '@salutejs/plasma-new-hope/types/components/Range/Range.types'; import { BaseCallbackKeyboardInstance } from '@salutejs/plasma-new-hope/types/components/Range/Range.types'; +import { BaseProps } from '@salutejs/plasma-new-hope/types/components/Autocomplete/Autocomplete.types'; +import { BasicProps } from '@salutejs/plasma-new-hope/types/components/Select/Select.types'; import { BlurProps } from '@salutejs/plasma-core'; import { blurs } from '@salutejs/plasma-core'; import { BoldProps } from '@salutejs/plasma-new-hope/types/components/Typography/Typography.types'; @@ -49,6 +51,7 @@ import { ButtonHTMLAttributes } from 'react'; import { ButtonProps } from '@salutejs/plasma-new-hope/styled-components'; import { Calendar as Calendar_2 } from '@salutejs/plasma-new-hope/types/components/Calendar/Calendar.types'; import { CalendarBaseProps } from '@salutejs/plasma-new-hope/styled-components'; +import { CalendarConfigProps } from '@salutejs/plasma-new-hope/types/components/Calendar/Calendar.types'; import { CalendarDoubleProps } from '@salutejs/plasma-new-hope/styled-components'; import { CalendarProps } from '@salutejs/plasma-new-hope/styled-components'; import { CalendarRange } from '@salutejs/plasma-new-hope/types/components/Calendar/Calendar.types'; @@ -95,8 +98,8 @@ 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 { DateInfo } from '@salutejs/plasma-new-hope/types/components/Calendar/Calendar.types'; +import { DatePickerCalendarProps } from '@salutejs/plasma-new-hope/types/components/DatePicker/DatePickerBase.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'; @@ -143,6 +146,7 @@ import { ImgHTMLAttributes } from 'react'; import { IndicatorProps } from '@salutejs/plasma-new-hope/styled-components'; import { InputHTMLAttributes } from '@salutejs/plasma-core'; import { InputHTMLAttributes as InputHTMLAttributes_2 } from '@salutejs/plasma-new-hope/types/types'; +import { InputHTMLAttributes as InputHTMLAttributes_3 } from 'react'; import { JSXElementConstructor } from 'react'; import { LineSkeletonProps } from '@salutejs/plasma-new-hope/styled-components'; import { LinkCustomProps } from '@salutejs/plasma-new-hope/types/components/Link/Link'; @@ -185,13 +189,15 @@ import { PopupProps as PopupBaseProps } from '@salutejs/plasma-new-hope/styled-c import { PopupProvider as PopupBaseProvider } from '@salutejs/plasma-new-hope/styled-components'; import { PopupInfo } from '@salutejs/plasma-new-hope/styled-components'; import { PopupProps } from '@salutejs/plasma-hope'; +import { Portal } from '@salutejs/plasma-new-hope/styled-components'; import { PortalProps } from '@salutejs/plasma-new-hope/styled-components'; import { PreviewGallery } from '@salutejs/plasma-hope'; import { PreviewGalleryItemProps } from '@salutejs/plasma-hope'; import { PreviewGalleryProps } from '@salutejs/plasma-hope'; -import { Price } from '@salutejs/plasma-hope'; -import { PriceProps } from '@salutejs/plasma-hope'; +import { priceClasses } from '@salutejs/plasma-new-hope/styled-components'; +import { PriceProps } from '@salutejs/plasma-new-hope/types/components/Price/Price.types'; import { ProgressProps } from '@salutejs/plasma-new-hope/styled-components'; +import { Props } from '@salutejs/plasma-new-hope/types/components/EmptyState/EmptyState.types'; 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'; @@ -261,6 +267,7 @@ import { TextareaResize } from '@salutejs/plasma-core'; import { TextFieldPrimitiveValue } from '@salutejs/plasma-new-hope/types/components/TextField/TextField.types'; import { TextfieldPrimitiveValue } from '@salutejs/plasma-new-hope/types/components/Range/Range.types'; import type { TextFieldProps as TextFieldProps_2 } from '@salutejs/plasma-hope'; +import { TextFieldPropsBase } from '@salutejs/plasma-new-hope/types/components/TextField/TextField.types'; import { TextFieldView } from '@salutejs/plasma-hope'; import { TextSkeletonBaseProps } from '@salutejs/plasma-new-hope/types/components/Skeleton/TextSkeleton/TextSkeleton.types'; import { TextSkeletonProps } from '@salutejs/plasma-new-hope/styled-components'; @@ -374,6 +381,32 @@ export { AudioPlayer } export { AudioPlayerProps } +// @public (undocumented) +export const Autocomplete: FunctionComponent & BaseProps & Omit & Omit, "size"> & RefAttributes>; + // @public (undocumented) export const Avatar: FunctionComponent & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps_2 & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -466,6 +500,7 @@ body2: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps_2 & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -475,6 +510,7 @@ l: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps_2 & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -484,6 +520,7 @@ m: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps_2 & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -493,6 +530,7 @@ s: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps_2 & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -502,6 +540,7 @@ xs: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps_2 & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -511,6 +550,7 @@ xxs: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps_2 & BoldProps & HTMLAttributes & RefAttributes>; export { Breakpoint } @@ -677,16 +717,12 @@ m: PolymorphicClassName; s: PolymorphicClassName; xs: PolymorphicClassName; }; -}> & Calendar_2 & { -type?: "Days" | "Months" | "Years" | undefined; -size?: string | undefined; -view?: string | undefined; -} & RefAttributes>; +}> & Calendar_2 & CalendarConfigProps & RefAttributes>; export { CalendarBaseProps } // @public (undocumented) -export const CalendarBaseRange: ({ value, disabledList, eventList, min, max, onChangeValue, onChangeStartOfRange, ...rest }: CalendarRange) => ReactElement>; +export const CalendarBaseRange: ({ value, min, max, disabledList, eventList, eventMonthList, disabledMonthList, eventYearList, disabledYearList, onChangeValue, onChangeStartOfRange, ...rest }: CalendarRange) => ReactElement>; // @public (undocumented) export const CalendarDouble: FunctionComponent & HTMLAttributes & Calendar_2 & { -size?: string | undefined; -view?: string | undefined; -} & RefAttributes>; +}> & Calendar_2 & CalendarConfigProps & RefAttributes>; export { CalendarDoubleProps } // @public (undocumented) -export const CalendarDoubleRange: ({ value, disabledList, eventList, min, max, onChangeValue, onChangeStartOfRange, ...rest }: CalendarRange) => ReactElement>; +export const CalendarDoubleRange: ({ value, min, max, disabledList, eventList, eventMonthList, disabledMonthList, eventYearList, disabledYearList, onChangeValue, onChangeStartOfRange, ...rest }: CalendarRange) => ReactElement>; export { CalendarProps } @@ -1037,8 +1070,8 @@ true: PolymorphicClassName; }> & 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; +onCommitFirstDate?: ((value: string | Date, error?: boolean | undefined, success?: boolean | undefined, dateInfo?: DateInfo | undefined) => void) | undefined; +onCommitSecondDate?: ((value: string | Date, error?: boolean | undefined, success?: boolean | undefined, dateInfo?: DateInfo | undefined) => void) | undefined; } & { label?: string | undefined; view?: string | undefined; @@ -1070,7 +1103,7 @@ onFocusFirstTextfield?: ((event: ChangeEvent) => void) | undef onFocusSecondTextfield?: ((event: ChangeEvent) => void) | undefined; onBlurFirstTextfield?: ((event: ChangeEvent) => void) | undefined; onBlurSecondTextfield?: ((event: ChangeEvent) => void) | undefined; -} & DatePickerCalendarProps_2 & Omit & { +} & DatePickerCalendarProps & Omit & { placement?: DatePickerRangePlacement | DatePickerRangePlacement[] | undefined; isDoubleCalendar?: boolean | undefined; } & HTMLAttributes & RefAttributes>; @@ -1197,6 +1230,7 @@ l: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps_2 & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -1206,6 +1240,7 @@ m: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps_2 & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -1215,6 +1250,7 @@ s: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps_2 & BoldProps & HTMLAttributes & RefAttributes>; export { Editable } @@ -1225,6 +1261,16 @@ export { ElasticGrid } export { ElasticGridProps } +// @public (undocumented) +export const EmptyState: FunctionComponent & Props & RefAttributes>; + export { extractTextFrom } export { FocusProps } @@ -1262,6 +1308,7 @@ h1: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps_2 & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -1271,6 +1318,7 @@ h2: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps_2 & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -1280,6 +1328,7 @@ h3: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps_2 & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -1289,6 +1338,7 @@ h4: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps_2 & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -1298,6 +1348,7 @@ h5: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps_2 & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -1595,16 +1646,16 @@ export { padZeroNumber } // @public export const Pagination: FunctionComponent & PortalProps & RefAttributes>; +export { Portal } export { PortalProps } @@ -1685,9 +1735,12 @@ export { PreviewGalleryItemProps } export { PreviewGalleryProps } -export { Price } +// @public +export const Price: FunctionComponent & PriceProps & RefAttributes>; -export { PriceProps } +export { priceClasses } // @public (undocumented) export const Progress: FunctionComponent & React_ export { SelectGroup } +// @public +export const SelectNew: FunctionComponent & ((BasicProps & { +multiselect?: false | undefined; +value?: string | undefined; +onChange?: ((value: string) => void) | undefined; +isTargetAmount?: false | undefined; +} & { +target?: "textfield-like" | undefined; +view?: "default" | "positive" | "warning" | "negative" | undefined; +contentLeft?: ReactNode; +label?: string | undefined; +labelPlacement?: "outer" | "inner" | undefined; +placeholder?: string | undefined; +helperText?: string | undefined; +} & Omit, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & RefAttributes) | (BasicProps & { +multiselect?: false | undefined; +value?: string | undefined; +onChange?: ((value: string) => void) | undefined; +isTargetAmount?: false | undefined; +} & { +target?: "button-like" | undefined; +view?: "default" | "accent" | "secondary" | "positive" | "warning" | "negative" | "black" | "white" | "dark" | "clear" | undefined; +contentLeft?: undefined; +label?: undefined; +labelPlacement?: undefined; +placeholder?: undefined; +helperText?: undefined; +} & Omit, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & RefAttributes) | (BasicProps & { +multiselect: true; +value?: string[] | undefined; +onChange?: ((value: string[]) => void) | undefined; +isTargetAmount?: boolean | undefined; +} & { +target?: "textfield-like" | undefined; +view?: "default" | "positive" | "warning" | "negative" | undefined; +contentLeft?: ReactNode; +label?: string | undefined; +labelPlacement?: "outer" | "inner" | undefined; +placeholder?: string | undefined; +helperText?: string | undefined; +} & Omit, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & RefAttributes) | (BasicProps & { +multiselect: true; +value?: string[] | undefined; +onChange?: ((value: string[]) => void) | undefined; +isTargetAmount?: boolean | undefined; +} & { +target?: "button-like" | undefined; +view?: "default" | "accent" | "secondary" | "positive" | "warning" | "negative" | "black" | "white" | "dark" | "clear" | undefined; +contentLeft?: undefined; +label?: undefined; +labelPlacement?: undefined; +placeholder?: undefined; +helperText?: undefined; +} & Omit, "onChange" | "nonce" | "onResize" | "onResizeCapture" | "value"> & RefAttributes))>; + export { SelectProps } export { selectText } @@ -2158,7 +2290,7 @@ true: PolymorphicClassName; disabled?: boolean | undefined; } & { label?: string | undefined; - labelPlacement?: "inner" | "outer" | undefined; + labelPlacement?: "outer" | "inner" | undefined; leftHelper?: string | undefined; contentLeft?: React_2.ReactElement> | undefined; contentRight?: React_2.ReactElement> | undefined; @@ -2177,7 +2309,7 @@ true: PolymorphicClassName; disabled?: boolean | undefined; } & { label?: string | undefined; - labelPlacement?: "inner" | "outer" | undefined; + labelPlacement?: "outer" | "inner" | undefined; leftHelper?: string | undefined; contentLeft?: React_2.ReactElement> | undefined; contentRight?: React_2.ReactElement> | undefined; @@ -2205,6 +2337,7 @@ l: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps_2 & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -2214,6 +2347,7 @@ m: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps_2 & BoldProps & HTMLAttributes & RefAttributes>; // @public (undocumented) @@ -2223,6 +2357,7 @@ s: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps_2 & BoldProps & HTMLAttributes & RefAttributes>; // @public @@ -2278,6 +2413,7 @@ xs: PolymorphicClassName; }; }> & { breakWord?: boolean | undefined; +color?: string | undefined; } & SpacingProps_2 & BoldProps & HTMLAttributes & RefAttributes>; export { TimingFunction } diff --git a/packages/plasma-web/package-lock.json b/packages/plasma-web/package-lock.json index 172f078ab2..27ad7bd466 100644 --- a/packages/plasma-web/package-lock.json +++ b/packages/plasma-web/package-lock.json @@ -1,17 +1,17 @@ { "name": "@salutejs/plasma-web", - "version": "1.351.0", + "version": "1.357.0-dev.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@salutejs/plasma-web", - "version": "1.351.0", + "version": "1.357.0-dev.0", "license": "MIT", "dependencies": { - "@salutejs/plasma-core": "1.162.0", - "@salutejs/plasma-hope": "1.288.0", - "@salutejs/plasma-new-hope": "0.105.0", + "@salutejs/plasma-core": "1.163.1-dev.0", + "@salutejs/plasma-hope": "1.289.1-dev.0", + "@salutejs/plasma-new-hope": "0.111.0-dev.0", "@salutejs/plasma-tokens-b2b": "1.41.0", "@salutejs/plasma-tokens-b2c": "0.51.0", "@salutejs/plasma-tokens-web": "1.56.0", @@ -32,9 +32,9 @@ "@rollup/plugin-commonjs": "25.0.7", "@rollup/plugin-node-resolve": "15.2.3", "@salutejs/plasma-colors": "0.13.0", - "@salutejs/plasma-cy-utils": "0.94.0", + "@salutejs/plasma-cy-utils": "0.95.1-dev.0", "@salutejs/plasma-icons": "1.199.0", - "@salutejs/plasma-sb-utils": "0.160.0", + "@salutejs/plasma-sb-utils": "0.161.1-dev.0", "@storybook/addon-docs": "7.6.17", "@storybook/addon-essentials": "7.6.17", "@storybook/addons": "7.6.17", @@ -4768,9 +4768,9 @@ "dev": true }, "node_modules/@salutejs/plasma-core": { - "version": "1.162.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-core/-/plasma-core-1.162.0.tgz", - "integrity": "sha512-+RmyuJb58tuGgbjvbcby5jjFG5VpZLyD2xTD7JrQaKyI355wYXS6vCXWhMH5JgevOBSNMWfEkRvDuL+YfW/r9w==", + "version": "1.163.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-core/-/plasma-core-1.163.1-dev.0.tgz", + "integrity": "sha512-KHf3PJW6X+aBnOEW6UqKGiyOueEDsFy+3tNT1KAkkPC1ZL3n/On3hmVaDrpzc7sSD+slGdpqQLAvYjR28ZgG0g==", "dependencies": { "@popperjs/core": "2.9.2", "@salutejs/plasma-typo": "0.40.0", @@ -4786,9 +4786,9 @@ } }, "node_modules/@salutejs/plasma-cy-utils": { - "version": "0.94.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-cy-utils/-/plasma-cy-utils-0.94.0.tgz", - "integrity": "sha512-VmyuJHXoV2BmWDrfRpJC7RE7A4FaWoKO5YZmrphQm7bTECvhdvS19V8h/POzG/qT6d2soOX+Bs20MmnPazPy9g==", + "version": "0.95.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-cy-utils/-/plasma-cy-utils-0.95.1-dev.0.tgz", + "integrity": "sha512-wD+TF1KODuJYB/GOKC3QTf42qt6jzNL+zhUMJJTuNU7a7JnPmRxXXJa+wGqbwSTtZvpLwO6qRs3Qf47vqZl2jg==", "dev": true, "peerDependencies": { "react": ">=16.13.1", @@ -4797,12 +4797,12 @@ } }, "node_modules/@salutejs/plasma-hope": { - "version": "1.288.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-hope/-/plasma-hope-1.288.0.tgz", - "integrity": "sha512-IVlEA/ouXFEk3MqNWLx7HxTCcX4//+EAdnOonLIayTwwNlaMum6pDTVtnAW4Yz3KCO6ca6KrRN23eAF7X0ozWQ==", + "version": "1.289.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-hope/-/plasma-hope-1.289.1-dev.0.tgz", + "integrity": "sha512-5SN98nF3sDntl2WC/tbthJkKuEk8HnIhBz1pERW/TgXYsh/jDrlAY5rHThJmYFSlqGz/iHPknowvbeZJKmB1DQ==", "dependencies": { "@popperjs/core": "2.9.2", - "@salutejs/plasma-core": "1.162.0", + "@salutejs/plasma-core": "1.163.1-dev.0", "@salutejs/plasma-typo": "0.40.0", "react-file-drop": "3.1.6", "react-popper": "2.3.0", @@ -4828,14 +4828,14 @@ } }, "node_modules/@salutejs/plasma-new-hope": { - "version": "0.105.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-new-hope/-/plasma-new-hope-0.105.0.tgz", - "integrity": "sha512-Y1BmxjgqSqoXwLBJYFapDGeNSl1nXXiN2B1Pxo+gqAPr8DpBHbGV+6Y2GgrXRrJJXGQL9mpuJubVXF0Hs/OUfA==", + "version": "0.111.0-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-new-hope/-/plasma-new-hope-0.111.0-dev.0.tgz", + "integrity": "sha512-S1wUVrDZfnz+DbOG0lxZfUkRtAfAkaAZiDfHWNE/+pPGqEZIEVzmvJoGA6hHD2fIX5m+v1Uh7O5bVX7BAcE8iQ==", "dependencies": { "@linaria/core": "5.0.2", "@linaria/react": "5.0.3", "@popperjs/core": "2.11.8", - "@salutejs/plasma-core": "1.162.0", + "@salutejs/plasma-core": "1.163.1-dev.0", "dayjs": "1.11.11", "focus-visible": "5.2.0", "lodash.throttle": "4.1.1", @@ -4878,13 +4878,13 @@ } }, "node_modules/@salutejs/plasma-sb-utils": { - "version": "0.160.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-sb-utils/-/plasma-sb-utils-0.160.0.tgz", - "integrity": "sha512-+9HfFOprKcd072koF0+FNyYFXATCxjDgNtZfonBhn04o8T80ts58PWYylMhzCr1uZvenszqYDEffIaCM+r5LTQ==", + "version": "0.161.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-sb-utils/-/plasma-sb-utils-0.161.1-dev.0.tgz", + "integrity": "sha512-ft4Owu34dlhr384S2EeSIfpCTW78RwvBsjf/VjiEcnESYnF7wuPwD8UK5euCHJW7IXGaxAAPLTY/6cObiL26VQ==", "dev": true, "dependencies": { "@salutejs/plasma-colors": "0.13.0", - "@salutejs/plasma-core": "1.162.0", + "@salutejs/plasma-core": "1.163.1-dev.0", "param-case": "^3.0.4" }, "peerDependencies": { @@ -18971,9 +18971,9 @@ "dev": true }, "@salutejs/plasma-core": { - "version": "1.162.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-core/-/plasma-core-1.162.0.tgz", - "integrity": "sha512-+RmyuJb58tuGgbjvbcby5jjFG5VpZLyD2xTD7JrQaKyI355wYXS6vCXWhMH5JgevOBSNMWfEkRvDuL+YfW/r9w==", + "version": "1.163.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-core/-/plasma-core-1.163.1-dev.0.tgz", + "integrity": "sha512-KHf3PJW6X+aBnOEW6UqKGiyOueEDsFy+3tNT1KAkkPC1ZL3n/On3hmVaDrpzc7sSD+slGdpqQLAvYjR28ZgG0g==", "requires": { "@popperjs/core": "2.9.2", "@salutejs/plasma-typo": "0.40.0", @@ -18984,18 +18984,18 @@ } }, "@salutejs/plasma-cy-utils": { - "version": "0.94.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-cy-utils/-/plasma-cy-utils-0.94.0.tgz", - "integrity": "sha512-VmyuJHXoV2BmWDrfRpJC7RE7A4FaWoKO5YZmrphQm7bTECvhdvS19V8h/POzG/qT6d2soOX+Bs20MmnPazPy9g==", + "version": "0.95.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-cy-utils/-/plasma-cy-utils-0.95.1-dev.0.tgz", + "integrity": "sha512-wD+TF1KODuJYB/GOKC3QTf42qt6jzNL+zhUMJJTuNU7a7JnPmRxXXJa+wGqbwSTtZvpLwO6qRs3Qf47vqZl2jg==", "dev": true }, "@salutejs/plasma-hope": { - "version": "1.288.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-hope/-/plasma-hope-1.288.0.tgz", - "integrity": "sha512-IVlEA/ouXFEk3MqNWLx7HxTCcX4//+EAdnOonLIayTwwNlaMum6pDTVtnAW4Yz3KCO6ca6KrRN23eAF7X0ozWQ==", + "version": "1.289.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-hope/-/plasma-hope-1.289.1-dev.0.tgz", + "integrity": "sha512-5SN98nF3sDntl2WC/tbthJkKuEk8HnIhBz1pERW/TgXYsh/jDrlAY5rHThJmYFSlqGz/iHPknowvbeZJKmB1DQ==", "requires": { "@popperjs/core": "2.9.2", - "@salutejs/plasma-core": "1.162.0", + "@salutejs/plasma-core": "1.163.1-dev.0", "@salutejs/plasma-typo": "0.40.0", "react-file-drop": "3.1.6", "react-popper": "2.3.0", @@ -19010,14 +19010,14 @@ "dev": true }, "@salutejs/plasma-new-hope": { - "version": "0.105.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-new-hope/-/plasma-new-hope-0.105.0.tgz", - "integrity": "sha512-Y1BmxjgqSqoXwLBJYFapDGeNSl1nXXiN2B1Pxo+gqAPr8DpBHbGV+6Y2GgrXRrJJXGQL9mpuJubVXF0Hs/OUfA==", + "version": "0.111.0-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-new-hope/-/plasma-new-hope-0.111.0-dev.0.tgz", + "integrity": "sha512-S1wUVrDZfnz+DbOG0lxZfUkRtAfAkaAZiDfHWNE/+pPGqEZIEVzmvJoGA6hHD2fIX5m+v1Uh7O5bVX7BAcE8iQ==", "requires": { "@linaria/core": "5.0.2", "@linaria/react": "5.0.3", "@popperjs/core": "2.11.8", - "@salutejs/plasma-core": "1.162.0", + "@salutejs/plasma-core": "1.163.1-dev.0", "dayjs": "1.11.11", "focus-visible": "5.2.0", "lodash.throttle": "4.1.1", @@ -19039,13 +19039,13 @@ } }, "@salutejs/plasma-sb-utils": { - "version": "0.160.0", - "resolved": "https://registry.npmjs.org/@salutejs/plasma-sb-utils/-/plasma-sb-utils-0.160.0.tgz", - "integrity": "sha512-+9HfFOprKcd072koF0+FNyYFXATCxjDgNtZfonBhn04o8T80ts58PWYylMhzCr1uZvenszqYDEffIaCM+r5LTQ==", + "version": "0.161.1-dev.0", + "resolved": "https://registry.npmjs.org/@salutejs/plasma-sb-utils/-/plasma-sb-utils-0.161.1-dev.0.tgz", + "integrity": "sha512-ft4Owu34dlhr384S2EeSIfpCTW78RwvBsjf/VjiEcnESYnF7wuPwD8UK5euCHJW7IXGaxAAPLTY/6cObiL26VQ==", "dev": true, "requires": { "@salutejs/plasma-colors": "0.13.0", - "@salutejs/plasma-core": "1.162.0", + "@salutejs/plasma-core": "1.163.1-dev.0", "param-case": "^3.0.4" } }, diff --git a/packages/plasma-web/package.json b/packages/plasma-web/package.json index e1f64e29e0..845d1a81b4 100644 --- a/packages/plasma-web/package.json +++ b/packages/plasma-web/package.json @@ -1,6 +1,6 @@ { "name": "@salutejs/plasma-web", - "version": "1.351.0", + "version": "1.357.0-dev.0", "description": "Salute Design System / React UI kit for web applications", "author": "Salute Frontend Team ", "license": "MIT", @@ -19,9 +19,9 @@ "directory": "packages/plasma-web" }, "dependencies": { - "@salutejs/plasma-core": "1.162.0", - "@salutejs/plasma-hope": "1.288.0", - "@salutejs/plasma-new-hope": "0.105.0", + "@salutejs/plasma-core": "1.163.1-dev.0", + "@salutejs/plasma-hope": "1.289.1-dev.0", + "@salutejs/plasma-new-hope": "0.111.0-dev.0", "@salutejs/plasma-tokens-b2b": "1.41.0", "@salutejs/plasma-tokens-b2c": "0.51.0", "@salutejs/plasma-tokens-web": "1.56.0", @@ -48,9 +48,9 @@ "@rollup/plugin-commonjs": "25.0.7", "@rollup/plugin-node-resolve": "15.2.3", "@salutejs/plasma-colors": "0.13.0", - "@salutejs/plasma-cy-utils": "0.94.0", + "@salutejs/plasma-cy-utils": "0.95.1-dev.0", "@salutejs/plasma-icons": "1.199.0", - "@salutejs/plasma-sb-utils": "0.160.0", + "@salutejs/plasma-sb-utils": "0.161.1-dev.0", "@storybook/addon-docs": "7.6.17", "@storybook/addon-essentials": "7.6.17", "@storybook/addons": "7.6.17", @@ -110,4 +110,4 @@ "Fanil Zubairov" ], "sideEffects": false -} +} \ No newline at end of file diff --git a/packages/plasma-web/src/components/Accordion/Accordion.config.ts b/packages/plasma-web/src/components/Accordion/Accordion.config.ts index 4818c3cb31..41b619890e 100644 --- a/packages/plasma-web/src/components/Accordion/Accordion.config.ts +++ b/packages/plasma-web/src/components/Accordion/Accordion.config.ts @@ -16,7 +16,9 @@ export const config = { ${accordionTokens.accordionItemTextColor}: var(--text-primary); ${accordionTokens.accordionItemFocus}: var(--surface-accent); ${accordionTokens.accordionBackground}: var(--surface-clear); + ${accordionTokens.accordionItemBorder}: none; ${accordionTokens.accordionItemBorderBottom}: 0; + ${accordionTokens.accordionItemPaddingHorizontalLeft}: var(${accordionTokens.accordionItemPaddingHorizontal}); `, clear: css` ${accordionTokens.accordionGap}: 0.125rem; @@ -28,7 +30,9 @@ export const config = { ${accordionTokens.accordionItemFocus}: var(--surface-accent); ${accordionTokens.accordionItemBorderRadius}: 0rem !important; ${accordionTokens.accordionBackground}: var(--surface-clear); + ${accordionTokens.accordionItemBorder}: none; ${accordionTokens.accordionItemBorderBottom}: 0.125rem solid var(--surface-solid-tertiary); + ${accordionTokens.accordionItemPaddingHorizontalLeft}: 0; `, }, size: { diff --git a/packages/plasma-web/src/components/AudioPlayer/AudioPlayer.stories.tsx b/packages/plasma-web/src/components/AudioPlayer/AudioPlayer.stories.tsx index 6a7af91c2e..d72d3ccb8e 100644 --- a/packages/plasma-web/src/components/AudioPlayer/AudioPlayer.stories.tsx +++ b/packages/plasma-web/src/components/AudioPlayer/AudioPlayer.stories.tsx @@ -23,7 +23,7 @@ const song = { duration: 128, id: 123, file: - 'https://vc-static.sberdevices.ru/smartmarket-video-news/media/uploads/15/159f025fe48c54f70b7a4041edbb413044f01a61.mp3', + 'https://cdn1.newsback.sberdevices.ru/p-newsback/media/uploads/15/159f025fe48c54f70b7a4041edbb413044f01a61.mp3', canDelete: true, }; diff --git a/packages/plasma-web/src/components/Autocomplete/Autocomplete.component-test.tsx b/packages/plasma-web/src/components/Autocomplete/Autocomplete.component-test.tsx new file mode 100644 index 0000000000..6896a1f477 --- /dev/null +++ b/packages/plasma-web/src/components/Autocomplete/Autocomplete.component-test.tsx @@ -0,0 +1,501 @@ +import * as React from 'react'; +import type { FC, PropsWithChildren } from 'react'; +import { createGlobalStyle } from 'styled-components'; +import { standard as standardTypo } from '@salutejs/plasma-typo'; +import { mount, CypressTestDecorator, getComponent } from '@salutejs/plasma-cy-utils'; + +const StandardTypoStyle = createGlobalStyle(standardTypo); + +const suggestions = [ + { label: 'Алексей Смирнов' }, + { label: 'Екатерина Иванова' }, + { label: 'Дмитрий Петров' }, + { label: 'Ольга Васильева' }, + { label: 'Сергей Сидоров' }, + { label: 'Мария Кузнецова' }, + { label: 'Андрей Попов' }, + { label: 'Анна Николаева' }, + { label: 'Иван Федоров' }, + { label: 'Наталья Морозова' }, + { label: 'Михаил Павлов' }, + { label: 'Елена Романова' }, + { label: 'Владимир Киселев' }, + { label: 'Татьяна Захарова' }, + { label: 'Николай Семенов' }, + { label: 'Юлия Белова' }, + { label: 'Александр Гусев' }, + { label: 'Оксана Яковлева' }, + { label: 'Игорь Егорова' }, + { label: 'Вера Тихомирова' }, + { label: 'Артем Григорьев' }, + { label: 'Евгения Козлова' }, + { label: 'Максим Лебедев' }, + { label: 'Виктория Калашникова' }, + { label: 'Константин Абрамов' }, + { label: 'Светлана Новикова' }, + { label: 'Юрий Волков' }, + { label: 'Валентина Воробьева' }, + { label: 'Павел Сергеев' }, + { label: 'Людмила Виноградова' }, + { label: 'Антон Соловьев' }, + { label: 'Маргарита Цветкова' }, + { label: 'Роман Трофимов' }, + { label: 'Лариса Зайцева' }, + { label: 'Евгений Никитин' }, + { label: 'Галина Михайлова' }, + { label: 'Владислав Антонов' }, + { label: 'Дарья Филатова' }, + { label: 'Олег Буров' }, + { label: 'Инна Медведева' }, + { label: 'Вячеслав Крылов' }, + { label: 'Тамара Беляева' }, + { label: 'Кирилл Марков' }, + { label: 'Марина Пономарева' }, + { label: 'Борис Захаров' }, + { label: 'Жанна Савельева' }, + { label: 'Федор Жуков' }, + { label: 'Елизавета Логинова' }, + { label: 'Виктор Рыбаков' }, + { label: 'Лилия Макарова' }, +]; + +describe('plasma-web: Autocomplete', () => { + const Autocomplete = getComponent('Autocomplete'); + + const CypressTestDecoratorWithTypo: FC = ({ children }) => ( + + + {children} + + ); + + it('default', () => { + cy.viewport(1000, 500); + + mount( + + + , + ); + + cy.get('input').click(); + cy.focused().type('ал'); + cy.matchImageSnapshot(); + }); + + it('prop: size', () => { + cy.viewport(1000, 300); + + mount( + +
+ + + + +
+ +
+ + + + +
+ , + ); + + cy.matchImageSnapshot(); + }); + + it('prop: view', () => { + cy.viewport(1000, 300); + + mount( + +
+ + + + +
+ +
+ + + + +
+ , + ); + + cy.matchImageSnapshot(); + }); + + it('prop: disabled', () => { + cy.viewport(1000, 300); + + mount( + +
+ + + + +
+ +
+ + + + +
+ , + ); + + cy.matchImageSnapshot(); + }); + + it('prop: readOnly', () => { + cy.viewport(1000, 300); + + mount( + +
+ + + + +
+ +
+ + + + +
+ , + ); + + cy.matchImageSnapshot(); + }); + + it('prop: listMaxHeight', () => { + cy.viewport(1000, 500); + + mount( + + + , + ); + + cy.get('input').click(); + cy.focused().type('ал'); + cy.matchImageSnapshot(); + }); + + it('prop: listWidth', () => { + cy.viewport(1000, 500); + + mount( + + + , + ); + + cy.get('input').click(); + cy.focused().type('ал'); + cy.matchImageSnapshot(); + }); + + it('prop: threshold', () => { + cy.viewport(1000, 500); + + mount( + + + , + ); + + cy.get('input').click(); + cy.focused().type('ал'); + cy.get('.popover-root').should('not.be.visible'); + cy.realPress('Tab'); + cy.get('input').click(); + cy.focused().type('е'); + cy.get('.popover-root').should('be.visible'); + }); + + it('keyboard interactions', () => { + cy.viewport(1000, 500); + + mount( + + + , + ); + + cy.get('input').click(); + cy.focused().type('ал'); + + // Arrow Down & End + cy.realPress('ArrowDown'); + cy.get('ul').should('be.visible'); + cy.get('ul li').first().should('have.class', 'suggestion-item-is-focused'); + cy.realPress('ArrowDown'); + cy.get('ul li').first().should('not.have.class', 'suggestion-item-is-focused'); + cy.get('ul li').first().next().should('have.class', 'suggestion-item-is-focused'); + cy.realPress('End'); + cy.get('ul li').last().should('have.class', 'suggestion-item-is-focused'); + cy.realPress('ArrowDown'); + cy.get('ul li').last().should('have.class', 'suggestion-item-is-focused'); + cy.realPress('Tab'); + + // Arrow Up & Home + cy.get('input').click(); + cy.realPress('ArrowUp'); + cy.get('ul').should('be.visible'); + cy.get('ul li').last().should('have.class', 'suggestion-item-is-focused'); + cy.realPress('ArrowUp'); + cy.get('ul li').last().prev().should('have.class', 'suggestion-item-is-focused'); + cy.realPress('Home'); + cy.get('ul li').first().should('have.class', 'suggestion-item-is-focused'); + cy.realPress('ArrowUp'); + cy.get('ul li').first().should('have.class', 'suggestion-item-is-focused'); + cy.realPress('Tab'); + + // Enter + cy.get('input').click(); + cy.realPress('ArrowDown'); + cy.realPress('Enter'); + cy.get('ul').should('not.be.visible'); + cy.get('input').should('have.value', 'Алексей Смирнов'); + + // Tab + cy.realPress('Tab'); + cy.get('input').should('not.have.focus'); + }); +}); diff --git a/packages/plasma-web/src/components/Autocomplete/Autocomplete.config.ts b/packages/plasma-web/src/components/Autocomplete/Autocomplete.config.ts new file mode 100644 index 0000000000..54c8e898dd --- /dev/null +++ b/packages/plasma-web/src/components/Autocomplete/Autocomplete.config.ts @@ -0,0 +1,336 @@ +import { css, autocompleteTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; + +export const config = { + defaults: { + view: 'default', + size: 'l', + labelPlacement: 'outer', + }, + variations: { + view: { + default: css` + ${tokens.textFieldColor}: var(--text-primary); + ${tokens.textFieldBackgroundColor}: var(--surface-clear); + ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldPlaceholderColor}: var(--text-secondary); + ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); + ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldLabelColor}: var(--text-primary); + ${tokens.textFieldLeftHelperColor}: var(--text-secondary); + ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldBorderColor}: var(--surface-transparent-tertiary); + ${tokens.textFieldBorderColorHover}: var(--plasma-colors-secondary); + ${tokens.textFieldBorderColorFocus}: var(--surface-accent); + + ${tokens.background}: var(--surface-solid-card); + ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); + ${tokens.itemBackground}: var(--plasma-colors-transparent); + ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.itemColor}: var(--text-primary); + ${tokens.focusColor}: var(--surface-accent); + + ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + `, + positive: css` + ${tokens.textFieldColor}: var(--text-primary); + ${tokens.textFieldBackgroundColor}: var(--surface-clear); + ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldPlaceholderColor}: var(--text-secondary); + ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); + ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldLabelColor}: var(--text-primary); + ${tokens.textFieldLeftHelperColor}: var(--text-positive); + ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldBorderColor}: var(--surface-positive); + ${tokens.textFieldBorderColorHover}: var(--surface-positive); + ${tokens.textFieldBorderColorFocus}: var(--surface-accent); + + ${tokens.background}: var(--surface-solid-card); + ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); + ${tokens.itemBackground}: var(--plasma-colors-transparent); + ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.itemColor}: var(--text-primary); + ${tokens.focusColor}: var(--surface-accent); + + ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + `, + warning: css` + ${tokens.textFieldColor}: var(--text-primary); + ${tokens.textFieldBackgroundColor}: var(--surface-clear); + ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-warning-active); + ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldPlaceholderColor}: var(--text-secondary); + ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); + ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldLabelColor}: var(--text-primary); + ${tokens.textFieldLeftHelperColor}: var(--text-warning); + ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldBorderColor}: var(--surface-warning); + ${tokens.textFieldBorderColorHover}: var(--surface-warning); + ${tokens.textFieldBorderColorFocus}: var(--surface-accent); + + ${tokens.background}: var(--surface-solid-card); + ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); + ${tokens.itemBackground}: var(--plasma-colors-transparent); + ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.itemColor}: var(--text-primary); + ${tokens.focusColor}: var(--surface-accent); + + ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + `, + negative: css` + ${tokens.textFieldColor}: var(--text-primary); + ${tokens.textFieldBackgroundColor}: var(--surface-clear); + ${tokens.textFieldBackgroundColorFocus}: var(--surface-transparent-negative-active); + ${tokens.textFieldCaretColor}: var(--text-accent); + ${tokens.textFieldPlaceholderColor}: var(--text-secondary); + ${tokens.textFieldTextBeforeColor}: var(--text-tertiary); + ${tokens.textFieldTextAfterColor}: var(--text-tertiary); + ${tokens.textFieldLabelColor}: var(--text-primary); + ${tokens.textFieldLeftHelperColor}: var(--text-negative); + ${tokens.textFieldFocusColor}: var(--text-accent); + ${tokens.textFieldBorderColor}: var(--surface-negative); + ${tokens.textFieldBorderColorHover}: var(--surface-negative); + ${tokens.textFieldBorderColorFocus}: var(--surface-accent); + + ${tokens.background}: var(--surface-solid-card); + ${tokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); + ${tokens.itemBackground}: var(--plasma-colors-transparent); + ${tokens.itemBackgroundHover}: var(--surface-transparent-secondary); + ${tokens.itemColor}: var(--text-primary); + ${tokens.focusColor}: var(--surface-accent); + + ${tokens.infiniteLoaderSpinnerColor}: var(--text-primary); + `, + }, + size: { + l: css` + ${tokens.textFieldHeight}: 3.5rem; + ${tokens.textFieldPadding}: 1.0625rem 1.125rem 1.0625rem 1.125rem; + ${tokens.textFieldBorderRadius}: 0.875rem; + ${tokens.textFieldBorderWidth}: 0.0625rem; + ${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.textFieldFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style); + ${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.textFieldLabelOffset}: 0.75rem; + ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.textFieldLeftHelperOffset}: 0.25rem; + ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelInnerPadding}: 0.5625rem 0 0.125rem 0; + ${tokens.textFieldContentLabelInnerPadding}: 1.5625rem 0 0.5625rem 0; + + ${tokens.borderRadius}: 0.875rem; + ${tokens.padding}: 0.125rem; + ${tokens.itemPadding}: 1.0625rem 1rem; + ${tokens.itemBorderRadius}: 0.75rem; + + ${tokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.itemFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.itemFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); + + ${tokens.emptyStatePadding}: 2rem 1rem 1rem 1rem; + ${tokens.emptyStateGap}: 0.5rem; + + ${tokens.infiniteLoaderSpinnerSize}: 1.5rem; + ${tokens.infiniteLoaderGap}: 0.5rem; + `, + m: css` + ${tokens.textFieldHeight}: 3rem; + ${tokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem; + ${tokens.textFieldBorderRadius}: 0.75rem; + ${tokens.textFieldBorderWidth}: 0.0625rem; + ${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.textFieldFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style); + ${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.textFieldLabelOffset}: 0.625rem; + ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.textFieldLeftHelperOffset}: 0.25rem; + ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelInnerPadding}: 0.375rem 0 0.125rem 0; + ${tokens.textFieldContentLabelInnerPadding}: 1.375rem 0 0.375rem 0; + + ${tokens.borderRadius}: 0.75rem; + ${tokens.padding}: 0.125rem; + ${tokens.itemPadding}: 0.875rem 0.875rem 0.875rem 0.875rem; + ${tokens.itemBorderRadius}: 0.625rem; + + ${tokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.itemFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.itemFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); + + ${tokens.emptyStatePadding}: 1.625rem 0.875rem 0.875rem 0.875rem; + ${tokens.emptyStateGap}: 0.375rem; + + ${tokens.infiniteLoaderSpinnerSize}: 1.5rem; + ${tokens.infiniteLoaderGap}: 0.375rem; + `, + s: css` + ${tokens.textFieldHeight}: 2.5rem; + ${tokens.textFieldPadding}: 0.6875rem 0.875rem 0.6875rem 0.875rem; + ${tokens.textFieldBorderRadius}: 0.625rem; + ${tokens.textFieldBorderWidth}: 0.0625rem; + ${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.textFieldFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style); + ${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.textFieldLabelOffset}: 0.5rem; + ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.textFieldLeftHelperOffset}: 0.25rem; + ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; + ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; + + ${tokens.borderRadius}: 0.625rem; + ${tokens.padding}: 0.125rem; + ${tokens.itemPadding}: 0.6875rem 0.75rem; + ${tokens.itemBorderRadius}: 0.5rem; + + ${tokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.itemFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.itemFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); + + ${tokens.emptyStatePadding}: 1.375rem 0.625rem 0.625rem 0.625rem; + ${tokens.emptyStateGap}: 0.25rem; + + ${tokens.infiniteLoaderSpinnerSize}: 1.5rem; + ${tokens.infiniteLoaderGap}: 0.25rem; + `, + xs: css` + ${tokens.textFieldHeight}: 2rem; + ${tokens.textFieldPadding}: 0.5625rem 0.625rem 0.5625rem 0.625rem; + ${tokens.textFieldBorderRadius}: 0.5rem; + ${tokens.textFieldBorderWidth}: 0.0625rem; + ${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.textFieldFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.textFieldFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.textFieldFontStyle}: var(--plasma-typo-body-xs-font-style); + ${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.textFieldLabelOffset}: 0.375rem; + ${tokens.textFieldLabelFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.textFieldLabelFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.textFieldLabelFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.textFieldLabelFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.textFieldLabelLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.textFieldLabelLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLeftHelperOffset}: 0.25rem; + ${tokens.textFieldLeftHelperFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.textFieldLeftHelperFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.textFieldLeftHelperFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.textFieldLeftHelperFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.textFieldLeftHelperLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.textFieldLeftHelperLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.textFieldLabelInnerPadding}: 0.3125rem 0 0 0; + ${tokens.textFieldContentLabelInnerPadding}: 1.0625rem 0 0.3125rem 0; + + ${tokens.borderRadius}: 0.5rem; + ${tokens.padding}: 0.125rem; + ${tokens.itemPadding}: 0.5625rem 0.5rem; + ${tokens.itemBorderRadius}: 0.5rem; + + ${tokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.itemFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${tokens.emptyStatePadding}: 1rem 0.5rem 0.5rem 0.5rem; + ${tokens.emptyStateGap}: 0.25rem; + + ${tokens.infiniteLoaderSpinnerSize}: 1rem; + ${tokens.infiniteLoaderGap}: 0.25rem; + `, + }, + labelPlacement: { + inner: css` + ${tokens.textFieldPlaceholderColor}: var(--plasma-input-label-color, var(--plasma-input-placeholder-color, var(--plasma-colors-secondary))); + ${tokens.textFieldLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.textFieldLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.textFieldLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.textFieldLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.textFieldLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.textFieldLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); + `, + outer: css``, + }, + disabled: { + true: css` + ${tokens.textFieldDisabledOpacity}: 0.4; + `, + }, + readOnly: { + true: css` + ${tokens.textFieldColorReadOnly}: var(--text-primary); + ${tokens.textFieldBackgroundColorReadOnly}: var(--surface-clear); + ${tokens.textFieldBorderColorReadOnly}: var(--surface-transparent-tertiary); + ${tokens.textFieldPlaceholderColorReadOnly}: var(--text-secondary); + ${tokens.textFieldLeftHelperColorReadOnly}: var(--text-secondary); + ${tokens.textFieldLabelColorReadOnly}: var(--text-secondary); + `, + }, + }, +}; diff --git a/packages/plasma-web/src/components/Autocomplete/Autocomplete.stories.tsx b/packages/plasma-web/src/components/Autocomplete/Autocomplete.stories.tsx new file mode 100644 index 0000000000..85cfd5ee22 --- /dev/null +++ b/packages/plasma-web/src/components/Autocomplete/Autocomplete.stories.tsx @@ -0,0 +1,133 @@ +import type { ComponentProps } from 'react'; +import * as React from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; +import { InSpacingDecorator } from '@salutejs/plasma-sb-utils'; +import { IconPlasma } from '@salutejs/plasma-icons'; + +import { Autocomplete } from './Autocomplete'; + +const sizes = ['l', 'm', 's', 'xs']; +const views = ['default', 'positive', 'warning', 'negative']; +const labelPlacements = ['outer', 'inner']; + +const suggestions = [ + { label: 'Алексей Смирнов' }, + { label: 'Екатерина Иванова' }, + { label: 'Дмитрий Петров' }, + { label: 'Ольга Васильева' }, + { label: 'Сергей Сидоров' }, + { label: 'Мария Кузнецова' }, + { label: 'Андрей Попов' }, + { label: 'Анна Николаева' }, + { label: 'Иван Федоров' }, + { label: 'Наталья Морозова' }, + { label: 'Михаил Павлов' }, + { label: 'Елена Романова' }, + { label: 'Владимир Киселев' }, + { label: 'Татьяна Захарова' }, + { label: 'Николай Семенов' }, + { label: 'Юлия Белова' }, + { label: 'Александр Гусев' }, + { label: 'Оксана Яковлева' }, + { label: 'Игорь Егорова' }, + { label: 'Вера Тихомирова' }, + { label: 'Артем Григорьев' }, + { label: 'Евгения Козлова' }, + { label: 'Максим Лебедев' }, + { label: 'Виктория Калашникова' }, + { label: 'Константин Абрамов' }, + { label: 'Светлана Новикова' }, + { label: 'Юрий Волков' }, + { label: 'Валентина Воробьева' }, + { label: 'Павел Сергеев' }, + { label: 'Людмила Виноградова' }, + { label: 'Антон Соловьев' }, + { label: 'Маргарита Цветкова' }, + { label: 'Роман Трофимов' }, + { label: 'Лариса Зайцева' }, + { label: 'Евгений Никитин' }, + { label: 'Галина Михайлова' }, + { label: 'Владислав Антонов' }, + { label: 'Дарья Филатова' }, + { label: 'Олег Буров' }, + { label: 'Инна Медведева' }, + { label: 'Вячеслав Крылов' }, + { label: 'Тамара Беляева' }, + { label: 'Кирилл Марков' }, + { label: 'Марина Пономарева' }, + { label: 'Борис Захаров' }, + { label: 'Жанна Савельева' }, + { label: 'Федор Жуков' }, + { label: 'Елизавета Логинова' }, + { label: 'Виктор Рыбаков' }, + { label: 'Лилия Макарова' }, +]; + +type StoryProps = ComponentProps & { + enableContentLeft: boolean; + enableContentRight: boolean; +}; + +const meta: Meta = { + title: 'Controls/Autocomplete', + decorators: [InSpacingDecorator], + component: Autocomplete, + argTypes: { + view: { + options: views, + control: { + type: 'select', + }, + }, + size: { + options: sizes, + control: { + type: 'inline-radio', + }, + }, + labelPlacement: { + options: labelPlacements, + control: { + type: 'inline-radio', + }, + }, + }, + args: { + view: 'default', + size: 'l', + labelPlacement: 'outer', + disabled: false, + readOnly: false, + label: 'Label', + textBefore: '', + textAfter: '', + placeholder: 'Заполните поле', + leftHelper: 'Введите имя Алексей', + listWidth: '100%', + listMaxHeight: '200px', + threshold: 2, + enableContentLeft: true, + enableContentRight: true, + }, +}; + +export default meta; + +const DefaultStory = (args: StoryProps) => { + const { enableContentLeft, enableContentRight } = args; + + const iconSize = args.size === 'xs' ? 'xs' : 's'; + + return ( + : undefined} + contentRight={enableContentRight ? : undefined} + /> + ); +}; + +export const Default: StoryObj = { + render: (args) => , +}; diff --git a/packages/plasma-web/src/components/Autocomplete/Autocomplete.ts b/packages/plasma-web/src/components/Autocomplete/Autocomplete.ts new file mode 100644 index 0000000000..5e4d15f60a --- /dev/null +++ b/packages/plasma-web/src/components/Autocomplete/Autocomplete.ts @@ -0,0 +1,6 @@ +import { autocompleteConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components'; + +import { config } from './Autocomplete.config'; + +const mergedConfig = mergeConfig(autocompleteConfig, config); +export const Autocomplete = component(mergedConfig); diff --git a/packages/plasma-web/src/components/Autocomplete/index.ts b/packages/plasma-web/src/components/Autocomplete/index.ts new file mode 100644 index 0000000000..aa5b9344ae --- /dev/null +++ b/packages/plasma-web/src/components/Autocomplete/index.ts @@ -0,0 +1 @@ +export { Autocomplete } from './Autocomplete'; 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 2aa0fd6b50..e5209095d8 100644 --- a/packages/plasma-web/src/components/Calendar/Calendar.component-test.tsx +++ b/packages/plasma-web/src/components/Calendar/Calendar.component-test.tsx @@ -1,110 +1,255 @@ /* eslint-disable newline-per-chained-call */ -import React, { FC } from 'react'; +import React, { useCallback, useState } from 'react'; +import type { FC, PropsWithChildren } from 'react'; import { createGlobalStyle } from 'styled-components'; import { standard as standardTypo } from '@salutejs/plasma-typo'; import { mount, CypressTestDecorator, getComponent, PadMe } from '@salutejs/plasma-cy-utils'; -const StandardTypoStyle = createGlobalStyle(standardTypo); - -const date = new Date(1970, 1, 1); - -const dateFormatter = new Intl.DateTimeFormat('ru', { - month: 'long', -}); +import { CalendarDouble as CalendarDoubleB2C, CalendarBase as CalendarBaseB2C } from './Calendar'; -const getMonth = () => { - const [first, ...currentMonth] = dateFormatter.format(date); +const StandardTypoStyle = createGlobalStyle(standardTypo); - return first.toUpperCase().concat(...currentMonth); -}; +const baseDate = new Date(1999, 6, 7); +const minBaseDate = new Date(1970, 1, 1); const events = [ { - date: new Date(2021, 5, 6), + date: new Date('1999-07-09'), + color: 'red', + }, + { + date: new Date('1999-07-09'), + color: 'red', }, { - date: new Date(2021, 5, 10), + date: new Date('1999-07-10'), color: 'red', }, { - date: new Date(2021, 5, 10), + date: new Date('1999-07-11'), + color: 'red', + }, + { + date: new Date('1999-07-12'), + color: 'red', + }, + { + date: new Date('1999-07-12'), + color: 'red', + }, +]; +const disabledDays = [...new Array(5)].map((_, day) => ({ + date: new Date(1999, 6, 23 + day), +})); +const monthEvents = [ + { + date: new Date('1999-06-01'), + color: 'purple', + }, + { + date: new Date('1999-06-01'), + color: 'purple', + }, + { + date: new Date('1999-06-01'), + color: 'purple', + }, + { + date: new Date('1999-07-01'), + color: 'purple', + }, + { + date: new Date('1999-07-01'), + color: 'purple', + }, + { + date: new Date('1999-08-01'), + color: 'purple', + }, + { + date: new Date('1999-08-01'), + color: 'purple', + }, + { + date: new Date('1999-08-01'), + color: 'purple', + }, + { + date: new Date('1999-09-01'), + color: 'purple', + }, + { + date: new Date('1999-09-01'), + color: 'purple', + }, +]; +const quarterEvents = [ + { + date: new Date('1999-06-01'), color: 'green', }, { - date: new Date(2021, 5, 10), + date: new Date('1999-06-01'), + color: 'green', + }, + { + date: new Date('1999-06-01'), + color: 'green', + }, + { + date: new Date('1999-07-01'), + color: 'green', + }, + { + date: new Date('1999-07-01'), + color: 'green', + }, + { + date: new Date('1999-07-01'), + color: 'green', + }, +]; +const yearEvents = [ + { + date: new Date('1999-01-01'), + color: 'blue', + }, + { + date: new Date('1999-01-01'), + color: 'blue', + }, + { + date: new Date('1999-01-01'), color: 'blue', }, ]; +const dateFormatter = new Intl.DateTimeFormat('ru', { + month: 'long', +}); + +const getMonth = (date) => { + const [first, ...currentMonth] = dateFormatter.format(date); + + return first.toUpperCase().concat(...currentMonth); +}; + +const checkFocusedDay = (day: string) => cy.focused().should('have.attr', 'data-day', day); +const checkFocusedMonth = (monthIndex: string) => cy.focused().should('have.attr', 'data-month-index', monthIndex); + describe('plasma-web: Calendar', () => { - const Calendar = getComponent('Calendar'); - const Button = getComponent('Button'); + const CalendarBase = getComponent('CalendarBase') as typeof CalendarBaseB2C; + const CalendarDouble = getComponent('CalendarDouble') as typeof CalendarDoubleB2C; - // TODO: https://github.com/salute-developers/plasma/issues/173 - // после переезда на новую типографику для @salutejs/plasma-web - https://github.com/salute-developers/plasma/issues/69 - const CypressTestDecoratorWithTypo: FC = ({ children }) => ( + const CypressTestDecoratorWithTypo: FC = ({ children }) => ( {children} ); - function Demo() { - const [value, setValue] = React.useState(date); - const handleOnChange = React.useCallback((newValue: Date) => { + const Demo = (args) => { + const { min, max, includeEdgeDates, displayDouble, baseValue, size = 's', type = 'Days' } = args; + const [value, setValue] = useState(baseValue); + + const handleOnChange = useCallback((newValue: Date) => { setValue(newValue); }, []); - return ( - <> - - - - ); - } + const getCalendarComponent = (rest) => { + return displayDouble ? ( + + ) : ( + + ); + }; + + const calendarMap = { + Days: getCalendarComponent({ type: 'Days', eventList: events, disabledList: disabledDays }), + Months: getCalendarComponent({ type: 'Months', eventMonthList: monthEvents }), + Quarters: getCalendarComponent({ type: 'Quarters', eventQuarterList: quarterEvents }), + Years: getCalendarComponent({ type: 'Years', eventYearList: yearEvents }), + }; + + return {calendarMap[type]}; + }; it('default', () => { mount( - - {}} /> + <> + - {}} /> + - {}} /> - , + + + + , ); cy.matchImageSnapshot(); }); - it('set value', () => { + it('default: double calendar', () => { mount( - - - , + <> + + + + + + + + , ); - cy.get('button').first().click(); + cy.viewport(1200, 500); cy.matchImageSnapshot(); }); - it('value as undefined', () => { + it('size', () => { mount( - - {}} /> - , + <> + + + + + + + + , ); + cy.matchImageSnapshot(); + }); + + it('value as undefined', () => { + mount(); + cy.get('body').find('[aria-selected="true"]').should('not.be.exist'); }); - it('prev month', () => { - mount( - - {}} /> - , - ); + it('days: prev month', () => { + mount(); cy.get('button').eq(1).click(); @@ -114,12 +259,8 @@ describe('plasma-web: Calendar', () => { }); }); - it('next month', () => { - mount( - - {}} /> - , - ); + it('days: next month', () => { + mount(); cy.get('button').eq(2).click(); @@ -129,14 +270,9 @@ describe('plasma-web: Calendar', () => { }); }); - it('prev year', () => { - mount( - - {}} /> - , - ); + it('months: prev year', () => { + mount(); - cy.get('button').eq(0).click(); cy.get('button').eq(1).click(); cy.matchImageSnapshot({ @@ -145,14 +281,9 @@ describe('plasma-web: Calendar', () => { }); }); - it('next year', () => { - mount( - - {}} /> - , - ); + it('months: next year', () => { + mount(); - cy.get('button').eq(0).click(); cy.get('button').eq(2).click(); cy.matchImageSnapshot({ @@ -161,15 +292,8 @@ describe('plasma-web: Calendar', () => { }); }); - it('prev range years', () => { - mount( - - {}} /> - , - ); - - cy.get('button').eq(0).click(); - cy.get('button').eq(0).click(); + it('quartes: prev year', () => { + mount(); cy.get('button').eq(1).click(); @@ -179,15 +303,8 @@ describe('plasma-web: Calendar', () => { }); }); - it('next range years', () => { - mount( - - {}} /> - , - ); - - cy.get('button').eq(0).click(); - cy.get('button').eq(0).click(); + it('quartes: next year', () => { + mount(); cy.get('button').eq(2).click(); @@ -197,147 +314,126 @@ describe('plasma-web: Calendar', () => { }); }); - it('event list', () => { - const eventsRange = [...new Array(10)].map((_, day) => ({ - date: new Date(2021, 5, 15 + day), - color: 'purple', - })); - - mount( - - {}} - /> - , - ); - - cy.matchImageSnapshot(); - }); - - it('disabled days', () => { - const disabledDays = [...new Array(5)].map((_, day) => ({ - date: new Date(2021, 5, 11 + day), - })); - - mount( - - {}} /> - , - ); - - cy.matchImageSnapshot(); - }); - it('min and max', () => { mount( - - {}} - /> - , - ); - - cy.matchImageSnapshot(); - }); - - it('range', () => { - mount( - - {}} /> - , + <> + + + + + + + + , ); cy.matchImageSnapshot(); }); - it('range with init values as undefined', () => { - mount( - - {}} /> - , - ); - - cy.get('body').find('[aria-selected="true"]').should('not.be.exist'); - }); - - it('range in progress', () => { + it('min and max: double', () => { mount( - - {}} /> - , - ); - - cy.get('div:nth-of-type(5) > div:nth-of-type(5)').first().trigger('mouseover'); - - cy.matchImageSnapshot(); - }); - - it('range in progress with disabled', () => { - const disabledDays = [...new Array(5)].map((_, day) => ({ - date: new Date(2021, 5, 11 + day), - })); - - mount( - - {}} /> - , + <> + + + + + + + + , ); - cy.get('div:nth-of-type(3) > div:nth-of-type(4)').first().trigger('mouseover'); - cy.get('div:nth-of-type(5) > div:nth-of-type(5)').first().trigger('mouseover'); - cy.matchImageSnapshot(); }); }); describe('plasma-web: Calendar keyboard navigation', () => { - const Calendar = getComponent('Calendar'); + const CalendarBase = getComponent('CalendarBase') as typeof CalendarBaseB2C; + const CalendarDouble = getComponent('CalendarDouble') as typeof CalendarDoubleB2C; - // TODO: https://github.com/salute-developers/plasma/issues/173 - // после переезда на новую типографику для @salutejs/plasma-web - const CypressTestDecoratorWithTypo: FC = ({ children }) => ( + const CypressTestDecoratorWithTypo: FC = ({ children }) => ( {children} ); - function Demo() { - const [value, setValue] = React.useState(date); - const handleOnChange = React.useCallback((newValue: Date) => { + const Demo = (args) => { + const { min, max, baseValue, displayDouble, disabledList, size = 's', type = 'Days' } = args; + const [value, setValue] = useState(baseValue); + + const disabledDates = disabledList?.length ? disabledList : disabledDays; + + const handleOnChange = useCallback((newValue: Date) => { setValue(newValue); }, []); - return ; - } + const getCalendarComponent = (rest) => { + return displayDouble ? ( + + ) : ( + + ); + }; + + const calendarMap = { + Days: getCalendarComponent({ type: 'Days', eventList: events, disabledList: disabledDates }), + Months: getCalendarComponent({ type: 'Months', eventMonthList: monthEvents }), + Quarters: getCalendarComponent({ type: 'Quarters', eventQuarterList: quarterEvents }), + Years: getCalendarComponent({ type: 'Years', eventYearList: yearEvents }), + }; + + return {calendarMap[type]}; + }; beforeEach(() => { cy.viewport(700, 500); }); it('set value with `Enter` and `Space`', () => { - mount( - - - , - ); + mount(); - cy.get('body').type('{rightarrow}').type('{enter}').type('{rightarrow}').type(' '); + cy.get('body').type('{rightarrow}{enter}{rightarrow} '); cy.matchImageSnapshot(); }); it('navigate with `Down`, `Left`, `Up`, `Right` arrows', () => { - mount( - - {}} /> - , - ); + mount(); cy.get('body') .type('{downarrow}') @@ -350,80 +446,75 @@ describe('plasma-web: Calendar keyboard navigation', () => { }); it('navigate with `Home` and `End`', () => { - mount( - - {}} /> - , - ); + mount(); - cy.get('body').type('{downarrow}').type('{downarrow}').type('{home}'); - cy.get('body').find('[data-day="9"][data-month-index="1"]').first().should('have.attr', 'tabindex', '0'); + cy.get('body').type('{downarrow}').type('{end}'); + checkFocusedDay('18'); + checkFocusedMonth('6'); - cy.get('body').type('{end}'); - cy.get('body').find('[data-day="15"][data-month-index="1"]').first().should('have.attr', 'tabindex', '0'); + cy.get('body').type('{home}'); + checkFocusedDay('12'); + checkFocusedMonth('6'); - cy.get('body').type('{home}').type('{downarrow}').type('{downarrow}').type('{end}'); - cy.get('body').find('[data-day="28"][data-month-index="1"]').first().should('have.attr', 'tabindex', '0'); + cy.get('body').type('{end}').type('{uparrow}').type('{uparrow}').type('{home}'); + checkFocusedDay('1'); + checkFocusedMonth('6'); }); it('navigate with `PageUp` and `PageDown`', () => { - mount( - - {}} /> - , - ); + mount(); cy.get('body').type('{pageup}'); - cy.get('body').find('[data-day="4"][data-month-index="0"]').first().should('have.attr', 'tabindex', '0'); + checkFocusedDay('9'); + checkFocusedMonth('5'); cy.get('body').type('{downarrow}').type('{pagedown}'); - cy.get('body').find('[data-day="8"][data-month-index="1"]').first().should('have.attr', 'tabindex', '0'); + checkFocusedDay('14'); + checkFocusedMonth('6'); }); it('navigate with Shift + `PageUp` and `PageDown`', () => { - mount( - - {}} /> - , - ); + mount(); cy.get('body').type('{shift}{pageup}'); cy.get('body') .find('[data-day="2"][data-month-index="1"]') .first() .should('have.attr', 'tabindex', '0') - .should('have.attr', 'data-year', date.getFullYear() - 1); + .should('have.attr', 'data-year', minBaseDate.getFullYear() - 1); - cy.get('[id="id-grid-label"] span').first().contains(`${getMonth()}`); + cy.get('[id="id-grid-label"] span') + .first() + .contains(`${getMonth(minBaseDate)}`); cy.get('[id="id-grid-label"] span') .last() - .contains(`${date.getFullYear() - 1}`); + .contains(`${minBaseDate.getFullYear() - 1}`); cy.get('body').type('{shift}{pagedown}'.repeat(2)); cy.get('body') .find('[data-day="7"][data-month-index="1"]') .first() .should('have.attr', 'tabindex', '0') - .should('have.attr', 'data-year', date.getFullYear() + 1); + .should('have.attr', 'data-year', minBaseDate.getFullYear() + 1); - cy.get('[id="id-grid-label"] span').first().contains(`${getMonth()}`); + cy.get('[id="id-grid-label"] span') + .first() + .contains(`${getMonth(minBaseDate)}`); cy.get('[id="id-grid-label"] span') .last() - .contains(`${date.getFullYear() + 1}`); + .contains(`${minBaseDate.getFullYear() + 1}`); }); it('navigate with arrow abroad bounds', () => { - mount( - - {}} /> - , - ); + mount(); cy.get('body').type('{leftarrow}'); - cy.get('body').find('[data-day="31"][data-month-index="0"]').first().should('have.attr', 'tabindex', '0'); + checkFocusedDay('31'); + checkFocusedMonth('0'); cy.get('body').type('{uparrow}').type('{uparrow}').type('{uparrow}').type('{uparrow}').type('{uparrow}'); - cy.get('body').find('[data-day="27"][data-month-index="11"]').first().should('have.attr', 'tabindex', '0'); + checkFocusedDay('27'); + checkFocusedMonth('11'); cy.get('body') .type('{rightarrow}') @@ -431,16 +522,20 @@ describe('plasma-web: Calendar keyboard navigation', () => { .type('{rightarrow}') .type('{rightarrow}') .type('{rightarrow}'); - cy.get('body').find('[data-day="1"][data-month-index="0"]').last().should('have.attr', 'tabindex', '0'); + checkFocusedDay('1'); + checkFocusedMonth('0'); cy.get('body').type('{uparrow}'); - cy.get('body').find('[data-day="25"][data-month-index="11"]').first().should('have.attr', 'tabindex', '0'); + checkFocusedDay('25'); + checkFocusedMonth('11'); cy.get('body').type('{downarrow}'); - cy.get('body').find('[data-day="1"][data-month-index="0"]').last().should('have.attr', 'tabindex', '0'); + checkFocusedDay('1'); + checkFocusedMonth('0'); cy.get('body').type('{leftarrow}').type('{downarrow}'); - cy.get('body').find('[data-day="7"][data-month-index="0"]').last().should('have.attr', 'tabindex', '0'); + checkFocusedDay('7'); + checkFocusedMonth('0'); cy.get('body') .type('{downarrow}') @@ -450,27 +545,75 @@ describe('plasma-web: Calendar keyboard navigation', () => { .type('{rightarrow}') .type('{rightarrow}') .type('{rightarrow}'); - cy.get('body').find('[data-day="1"][data-month-index="1"]').last().should('have.attr', 'tabindex', '0'); + checkFocusedDay('1'); + checkFocusedMonth('1'); cy.get('body').type('{downarrow}').type('{downarrow}').type('{downarrow}').type('{downarrow}'); - cy.get('body').find('[data-day="1"][data-month-index="2"]').last().should('have.attr', 'tabindex', '0'); + checkFocusedDay('1'); + checkFocusedMonth('2'); }); - it('processing aria-disabled as disabled attr', () => { - const disabledDays = [...new Array(5)].map((_, day) => ({ - date: new Date(1970, 1, 11 + day), - })); + it('double: navigate with arrow abroad bounds', () => { + mount(); - mount( - - {}} /> - , - ); + cy.get('body').type('{leftarrow}'); + checkFocusedDay('31'); + checkFocusedMonth('0'); - cy.get('body').type('{downArrow}'.repeat(2)); + cy.get('body') + .type('{uparrow}') + .type('{uparrow}') + .type('{uparrow}') + .type('{uparrow}') + .type('{uparrow}') + .type('{uparrow}'); + checkFocusedDay('27'); + checkFocusedMonth('11'); cy.get('body') - .find('[data-day="15"][data-month-index="1"]') + .type('{rightarrow}') + .type('{rightarrow}') + .type('{rightarrow}') + .type('{rightarrow}') + .type('{rightarrow}'); + checkFocusedDay('1'); + checkFocusedMonth('0'); + + cy.get('body').type('{uparrow}'); + checkFocusedDay('25'); + checkFocusedMonth('11'); + + cy.get('body').type('{downarrow}'); + checkFocusedDay('1'); + checkFocusedMonth('0'); + + cy.get('body').type('{leftarrow}').type('{downarrow}'); + checkFocusedDay('7'); + checkFocusedMonth('0'); + + cy.get('body') + .type('{downarrow}') + .type('{downarrow}') + .type('{downarrow}') + .type('{rightarrow}') + .type('{rightarrow}') + .type('{rightarrow}') + .type('{rightarrow}'); + checkFocusedDay('1'); + checkFocusedMonth('1'); + + cy.get('body').type('{downarrow}').type('{downarrow}').type('{downarrow}').type('{downarrow}'); + checkFocusedDay('1'); + checkFocusedMonth('2'); + }); + + it('processing aria-disabled as disabled attr', () => { + mount(); + + cy.get('body').type('{downArrow}'.repeat(2)).type('{end}'); + + cy.get('body') + .find('[data-day="25"][data-month-index="6"]') .first() .should('have.attr', 'tabindex', '0') .should('have.attr', 'aria-disabled', 'true'); @@ -492,23 +635,17 @@ describe('plasma-web: Calendar keyboard navigation', () => { }, ]; - mount( - - {}} /> - , - ); + mount(); const start = '[data-day="3"][data-month-index="1"]'; - cy.get('body').find(start).first().type(shiftRightArrow); - - cy.get('body') - .find('[data-day="6"][data-month-index="1"]') - .first() - .should('have.attr', 'tabindex', '0') - .type(shiftLeftArrow); + cy.get('body').find(start).type(shiftRightArrow); + checkFocusedDay('6'); + checkFocusedMonth('1'); - cy.get('body').find(start).first().should('have.attr', 'tabindex', '0'); + cy.focused().type(shiftLeftArrow); + checkFocusedDay('3'); + checkFocusedMonth('1'); }); it('Arrow Up or Down in current month', () => { @@ -521,21 +658,17 @@ describe('plasma-web: Calendar keyboard navigation', () => { }, ]; - mount( - - {}} /> - , - ); + mount(); const start = '[data-day="4"][data-month-index="1"]'; - cy.get('body').find(start).first().type(shiftDownArrow); - - cy.get('body').find('[data-day="13"][data-month-index="1"]').first().should('have.attr', 'tabindex', '0'); + cy.get('body').find(start).type(shiftDownArrow); + checkFocusedDay('13'); + checkFocusedMonth('1'); cy.get('body').find('[data-day="19"][data-month-index="1"]').type(shiftUpArrow); - - cy.get('body').find('[data-day="10"][data-month-index="1"]').first().should('have.attr', 'tabindex', '0'); + checkFocusedDay('10'); + checkFocusedMonth('1'); }); it('Arrow Left or Right between months', () => { @@ -548,23 +681,17 @@ describe('plasma-web: Calendar keyboard navigation', () => { }, ]; - mount( - - {}} /> - , - ); + mount(); const start = '[data-day="27"][data-month-index="1"]'; - cy.get('body').find(start).first().type(shiftRightArrow); - - cy.get('body') - .find('[data-day="2"][data-month-index="2"]') - .first() - .should('have.attr', 'tabindex', '0') - .type(shiftLeftArrow); + cy.get('body').find(start).type(shiftRightArrow); + checkFocusedDay('2'); + checkFocusedMonth('2'); - cy.get('body').find(start).first().should('have.attr', 'tabindex', '0'); + cy.focused().type(shiftLeftArrow); + checkFocusedDay('27'); + checkFocusedMonth('1'); }); it('Arrow Left or Right when entire one month disabled', () => { @@ -580,175 +707,104 @@ describe('plasma-web: Calendar keyboard navigation', () => { })), ]; - mount( - - {}} /> - , - ); + mount(); - cy.get('body').find('[data-day="31"][data-month-index="2"]').first().type(shiftRightArrow); + cy.get('body').find('[data-day="31"][data-month-index="2"]').type(shiftRightArrow); + checkFocusedDay('2'); + checkFocusedMonth('4'); - cy.get('body') - .find('[data-day="2"][data-month-index="4"]') - .first() - .should('have.attr', 'tabindex', '0') - .type(shiftLeftArrow); + cy.focused().type(shiftLeftArrow); - cy.get('body').find('[data-day="31"][data-month-index="2"]').first().should('have.attr', 'tabindex', '0'); + checkFocusedDay('31'); + checkFocusedMonth('2'); }); it('Arrow Left or Right when entire few months disabled', () => { const march = [...new Array(31)].map((_, day) => ({ date: new Date(1970, 2, 1 + day), + color: '', })); const april = [...new Array(31)].map((_, day) => ({ date: new Date(1970, 3, 1 + day), + color: '', })); const may = [ { date: new Date(1970, 4, 1), + color: '', }, ]; - mount( - - {}} /> - , - ); + mount(); const start = '[data-day="28"][data-month-index="1"]'; - cy.get('body').find(start).first().type(shiftRightArrow); + cy.get('body').find(start).type(shiftRightArrow); + checkFocusedDay('2'); + checkFocusedMonth('4'); - cy.get('body') - .find('[data-day="2"][data-month-index="4"]') - .first() - .should('have.attr', 'tabindex', '0') - .type(shiftLeftArrow); + cy.focused().type(shiftLeftArrow); - cy.get('body').find(start).first().should('have.attr', 'tabindex', '0'); + checkFocusedDay('28'); + checkFocusedMonth('1'); }); it("Can't jump to dates outside of min max dates", () => { - mount( - - {}} - /> - , - ); + mount(); + + cy.get('body').find('[data-day="1"][data-month-index="1"]').type('leftArrow'); + checkFocusedDay('1'); + + cy.get('body').find('[data-day="1"][data-month-index="1"]').type(shiftLeftArrow); + checkFocusedDay('1'); - cy.get('body') - .find('[data-day="28"][data-month-index="1"]') - .first() - .type('rightArrow') - .should('have.attr', 'tabindex', '0'); - - cy.get('body') - .find('[data-day="28"][data-month-index="1"]') - .first() - .type(shiftRightArrow) - .should('have.attr', 'tabindex', '0'); - - cy.get('body') - .find('[data-day="1"][data-month-index="1"]') - .first() - .type('leftArrow') - .should('have.attr', 'tabindex', '0'); - - cy.get('body') - .find('[data-day="1"][data-month-index="1"]') - .first() - .type(shiftLeftArrow) - .should('have.attr', 'tabindex', '0'); - - cy.get('body') - .find('[data-day="5"][data-month-index="1"]') - .first() - .type('upArrow') - .should('have.attr', 'tabindex', '0'); - - cy.get('body') - .find('[data-day="5"][data-month-index="1"]') - .first() - .type(shiftUpArrow) - .should('have.attr', 'tabindex', '0'); - - cy.get('body') - .find('[data-day="25"][data-month-index="1"]') - .first() - .type('downArrow') - .should('have.attr', 'tabindex', '0'); - - cy.get('body') - .find('[data-day="25"][data-month-index="1"]') - .first() - .type(shiftDownArrow) - .should('have.attr', 'tabindex', '0'); + cy.get('body').find('[data-day="28"][data-month-index="1"]').type('rightArrow'); + checkFocusedDay('28'); + + cy.get('body').find('[data-day="28"][data-month-index="1"]').type(shiftRightArrow); + checkFocusedDay('28'); + + cy.get('body').find('[data-day="5"][data-month-index="1"]').type('upArrow'); + checkFocusedDay('5'); + + cy.get('body').find('[data-day="5"][data-month-index="1"]').type(shiftUpArrow); + checkFocusedDay('5'); + + cy.get('body').find('[data-day="25"][data-month-index="1"]').type('downArrow'); + checkFocusedDay('25'); + + cy.get('body').find('[data-day="25"][data-month-index="1"]').type(shiftDownArrow); + checkFocusedDay('25'); }); it("Can't jump to dates outside of min max dates in current month", () => { - mount( - - {}} - /> - , - ); + mount(); - cy.get('body') - .find('[data-day="14"][data-month-index="1"]') - .first() - .type('rightArrow') - .should('have.attr', 'tabindex', '0'); - - cy.get('body').find('[data-day="14"][data-month-index="1"]').first().type(shiftRightArrow); - - cy.get('body').find('[data-day="14"][data-month-index="1"]').first().should('have.attr', 'tabindex', '0'); - - cy.get('body') - .find('[data-day="11"][data-month-index="1"]') - .first() - .type('leftArrow') - .should('have.attr', 'tabindex', '0'); - - cy.get('body') - .find('[data-day="11"][data-month-index="1"]') - .first() - .type(shiftLeftArrow) - .should('have.attr', 'tabindex', '0'); - - cy.get('body') - .find('[data-day="12"][data-month-index="1"]') - .first() - .type('upArrow') - .should('have.attr', 'tabindex', '0'); - - cy.get('body') - .find('[data-day="12"][data-month-index="1"]') - .first() - .type(shiftUpArrow) - .should('have.attr', 'tabindex', '0'); - - cy.get('body') - .find('[data-day="12"][data-month-index="1"]') - .first() - .type('downArrow') - .should('have.attr', 'tabindex', '0'); - - cy.get('body') - .find('[data-day="12"][data-month-index="1"]') - .first() - .type(shiftDownArrow) - .should('have.attr', 'tabindex', '0'); + cy.get('body').find('[data-day="14"][data-month-index="1"]').type('rightArrow'); + checkFocusedDay('14'); + + cy.get('body').find('[data-day="14"][data-month-index="1"]').type(shiftRightArrow); + checkFocusedDay('14'); + + cy.get('body').find('[data-day="11"][data-month-index="1"]').type('leftArrow'); + checkFocusedDay('11'); + + cy.get('body').find('[data-day="11"][data-month-index="1"]').type(shiftLeftArrow); + checkFocusedDay('11'); + + cy.get('body').find('[data-day="12"][data-month-index="1"]').type('upArrow'); + checkFocusedDay('12'); + + cy.get('body').find('[data-day="12"][data-month-index="1"]').type(shiftUpArrow); + checkFocusedDay('12'); + + cy.get('body').find('[data-day="12"][data-month-index="1"]').type('downArrow'); + checkFocusedDay('12'); + + cy.get('body').find('[data-day="12"][data-month-index="1"]').type(shiftDownArrow); + checkFocusedDay('12'); }); it("Can't jump from the disabled day to the day of month that is outside min", () => { @@ -756,24 +812,13 @@ describe('plasma-web: Calendar keyboard navigation', () => { date: new Date(1970, 4, 1 + day), })); - mount( - - {}} - /> - , - ); + mount(); + + cy.get('body').find('[data-day="9"][data-month-index="4"]').first().type(shiftLeftArrow); + checkFocusedDay('9'); - cy.get('body') - .find('[data-day="9"][data-month-index="4"]') - .first() - .type(shiftLeftArrow) - .should('have.attr', 'tabindex', '0') - .type(shiftUpArrow) - .should('have.attr', 'tabindex', '0'); + cy.focused().type(shiftUpArrow); + checkFocusedDay('9'); }); it("Can't jump through disabled entire month in month that is outside min", () => { @@ -781,24 +826,12 @@ describe('plasma-web: Calendar keyboard navigation', () => { date: new Date(1970, 1, 1 + day), })); - mount( - - {}} - /> - , - ); + mount(); - cy.get('body') - .find('[data-day="1"][data-month-index="2"]') - .first() - .type(shiftLeftArrow) - .should('have.attr', 'tabindex', '0') - .type(shiftUpArrow) - .should('have.attr', 'tabindex', '0'); + cy.get('body').find('[data-day="1"][data-month-index="2"]').type(shiftLeftArrow); + checkFocusedDay('1'); + cy.focused().type(shiftUpArrow); + checkFocusedDay('1'); }); it("Can't jump from the disabled day to the day of month that is outside max", () => { @@ -806,24 +839,12 @@ describe('plasma-web: Calendar keyboard navigation', () => { date: new Date(1970, 4, 24 + day), })); - mount( - - {}} - /> - , - ); + mount(); - cy.get('body') - .find('[data-day="23"][data-month-index="4"]') - .first() - .type(shiftRightArrow) - .should('have.attr', 'tabindex', '0') - .type(shiftDownArrow) - .should('have.attr', 'tabindex', '0'); + cy.get('body').find('[data-day="23"][data-month-index="4"]').type(shiftRightArrow); + checkFocusedDay('23'); + cy.focused().type(shiftDownArrow); + checkFocusedDay('23'); }); it("Can't jump through disabled entire month in month that is outside max", () => { @@ -831,452 +852,34 @@ describe('plasma-web: Calendar keyboard navigation', () => { date: new Date(1970, 5, 1 + day), })); - mount( - - {}} - /> - , - ); - - cy.get('body') - .find('[data-day="31"][data-month-index="4"]') - .first() - .type(shiftRightArrow) - .should('have.attr', 'tabindex', '0') - .type(shiftDownArrow) - .should('have.attr', 'tabindex', '0'); - }); - }); -}); - -describe('plasma-web: CalendarDouble', () => { - const Calendar = getComponent('Calendar'); - const Button = getComponent('Button'); - - // TODO: https://github.com/salute-developers/plasma/issues/173 - // после переезда на новую типографику для @salutejs/plasma-web - const CypressTestDecoratorWithTypo: FC = ({ children }) => ( - - - {children} - - ); - - function Demo() { - const [value, setValue] = React.useState(date); - const handleOnChange = React.useCallback((newValue: Date) => { - setValue(newValue); - }, []); - - return ( - <> - - - - ); - } - - beforeEach(() => { - cy.viewport(700, 500); - }); - - it('default', () => { - mount( - - {}} /> - , - ); - - cy.matchImageSnapshot(); - }); - - it('set value', () => { - mount( - - - , - ); - - cy.get('button').first().click(); - - cy.matchImageSnapshot(); - }); - - it('prev month', () => { - mount( - - {}} /> - , - ); - - cy.get('button').first().click(); - - cy.matchImageSnapshot({ - failureThreshold: 0.01, - failureThresholdType: 'percent', - }); - }); - - it('next month', () => { - mount( - - {}} /> - , - ); - - cy.get('button').last().click(); + mount(); - cy.matchImageSnapshot({ - failureThreshold: 0.01, - failureThresholdType: 'percent', + cy.get('body').find('[data-day="31"][data-month-index="4"]').type(shiftRightArrow); + checkFocusedDay('31'); + cy.focused().type(shiftDownArrow); + checkFocusedDay('31'); }); }); - it('event list', () => { - const eventsRange = [...new Array(20)].map((_, day) => ({ - date: new Date(2021, 5, 25 + day), - color: 'purple', - })); - - mount( - - {}} - /> - , - ); - - cy.matchImageSnapshot(); - }); - - it('disabled days', () => { - const disabledDays = [...new Array(5)].map((_, day) => ({ - date: new Date(2021, 5, 11 + day), - })); - - mount( - - {}} /> - , - ); - - cy.matchImageSnapshot(); - }); - - it('min and max', () => { - mount( - - {}} - /> - , - ); - - cy.matchImageSnapshot(); - }); - - it('range', () => { - mount( - - {}} - /> - , - ); - - cy.matchImageSnapshot(); - }); - - it('range in progress', () => { - mount( - - {}} /> - , - ); - - cy.get('div:nth-of-type(3) > div:nth-of-type(4) > div:nth-of-type(4)').first().trigger('mouseover'); - - cy.matchImageSnapshot(); - }); - - it('range in progress with disabled', () => { - const disabledDays = [...new Array(5)].map((_, day) => ({ - date: new Date(2021, 6, 11 + day), - })); - - mount( - - {}} - /> - , - ); - - cy.get('div:nth-of-type(3) > div:nth-of-type(3) > div:nth-of-type(6)').first().trigger('mouseover'); - cy.get('div:nth-of-type(3) > div:nth-of-type(4) > div:nth-of-type(4)').first().trigger('mouseover'); - - cy.matchImageSnapshot(); - }); -}); - -describe('plasma-web: CalendarDouble keyboard navigation', () => { - const Calendar = getComponent('Calendar'); - - // TODO: https://github.com/salute-developers/plasma/issues/173 - // после переезда на новую типографику для @salutejs/plasma-web - const CypressTestDecoratorWithTypo: FC = ({ children }) => ( - - - {children} - - ); - - function Demo() { - const [value, setValue] = React.useState(date); - const handleOnChange = React.useCallback((newValue: Date) => { - setValue(newValue); - }, []); - - return ; - } - - beforeEach(() => { - cy.viewport(700, 500); - }); - - it('set value with `Enter` and `Space`', () => { - mount( - - - , - ); - - cy.get('body').type('{rightarrow}').type('{enter}').type('{rightarrow}').type(' '); - - cy.matchImageSnapshot(); - }); - - it('navigate with `Down`, `Left`, `Up`, `Right` arrows', () => { - mount( - - {}} /> - , - ); - - cy.get('body') - .type('{downarrow}') - .type('{leftarrow}') - .type('{downarrow}') - .type('{rightarrow}') - .type('{uparrow}'); - - cy.matchImageSnapshot(); - }); - - it('navigate with `Home` and `End`', () => { - mount( - - {}} /> - , - ); - - cy.get('body').type('{downarrow}').type('{downarrow}').type('{home}'); - cy.get('body').find('[data-day="9"][data-month-index="1"]').first().should('have.attr', 'tabindex', '0'); - - cy.get('body').type('{end}'); - cy.get('body').find('[data-day="15"][data-month-index="1"]').first().should('have.attr', 'tabindex', '0'); - - cy.get('body').type('{home}').type('{downarrow}').type('{downarrow}').type('{end}'); - cy.get('body').find('[data-day="28"][data-month-index="1"]').first().should('have.attr', 'tabindex', '0'); - }); - - it('navigate with `PageUp` and `PageDown`', () => { - mount( - - {}} /> - , - ); - - cy.get('body').type('{pageup}'); - cy.get('body').find('[data-day="4"][data-month-index="0"]').first().should('have.attr', 'tabindex', '0'); - - cy.get('body').type('{downarrow}').type('{pagedown}'); - cy.get('body').find('[data-day="8"][data-month-index="1"]').first().should('have.attr', 'tabindex', '0'); - }); - - it('navigate with arrow abroad bounds', () => { - mount( - - {}} /> - , - ); - - cy.get('body').type('{leftarrow}'); - cy.get('body').find('[data-day="31"][data-month-index="0"]').first().should('have.attr', 'tabindex', '0'); - - cy.get('body').type('{uparrow}').type('{uparrow}').type('{uparrow}').type('{uparrow}').type('{uparrow}'); - cy.get('body').find('[data-day="27"][data-month-index="11"]').first().should('have.attr', 'tabindex', '0'); - - cy.get('body') - .type('{rightarrow}') - .type('{rightarrow}') - .type('{rightarrow}') - .type('{rightarrow}') - .type('{rightarrow}'); - cy.get('body').find('[data-day="1"][data-month-index="0"]').last().should('have.attr', 'tabindex', '0'); - - cy.get('body').type('{uparrow}'); - cy.get('body').find('[data-day="25"][data-month-index="11"]').first().should('have.attr', 'tabindex', '0'); - - cy.get('body').type('{downarrow}'); - cy.get('body').find('[data-day="1"][data-month-index="0"]').last().should('have.attr', 'tabindex', '0'); - - cy.get('body').type('{leftarrow}').type('{downarrow}'); - cy.get('body').find('[data-day="7"][data-month-index="0"]').last().should('have.attr', 'tabindex', '0'); - - cy.get('body') - .type('{downarrow}') - .type('{downarrow}') - .type('{downarrow}') - .type('{rightarrow}') - .type('{rightarrow}') - .type('{rightarrow}') - .type('{rightarrow}'); - cy.get('body').find('[data-day="1"][data-month-index="1"]').last().should('have.attr', 'tabindex', '0'); - - cy.get('body').type('{downarrow}').type('{downarrow}').type('{downarrow}').type('{downarrow}'); - cy.get('body').find('[data-day="1"][data-month-index="2"]').last().should('have.attr', 'tabindex', '0'); - }); - - it('processing aria-disabled as disabled attr', () => { - const disabledDays = [...new Array(5)].map((_, day) => ({ - date: new Date(1970, 1, 11 + day), - })); - - mount( - - {}} /> - , - ); - - cy.get('body').type('{downArrow}'.repeat(2)); - - cy.get('body') - .find('[data-day="15"][data-month-index="1"]') - .first() - .should('have.attr', 'tabindex', '0') - .should('have.attr', 'aria-disabled', 'true'); - }); - - describe('navigate with pressed Shift and skipped disabled date', () => { - const shiftLeftArrow = '{shift}{leftArrow}'; + describe('double: navigate with pressed Shift', () => { const shiftDownArrow = '{shift}{downArrow}'; const shiftUpArrow = '{shift}{upArrow}'; - it('default case', () => { - const may = [...new Array(31)].map((_, day) => ({ - date: new Date(2022, 4, 1 + day), - })); - - const apr = [...new Array(30)].map((_, day) => ({ - date: new Date(2022, 3, 1 + day), - })); - - mount( - - {}} - /> - , - ); - - const start = '[data-day="1"][data-month-index="5"]'; - - cy.get('body').find(start).first().type(shiftLeftArrow); - - cy.get('body').find('[data-day="31"][data-month-index="2"]').first().should('have.attr', 'tabindex', '0'); - }); - - it('arrow down + up', () => { - const june = [...new Array(6)].map((_, day) => ({ - date: new Date(2022, 5, 1 + day), - })); - - const may = [...new Array(31)].map((_, day) => ({ - date: new Date(2022, 4, 1 + day), - })); - - const apr = [...new Array(30)].map((_, day) => ({ - date: new Date(2022, 3, 1 + day), - })); - - mount( - - {}} - /> - , - ); - - const start = '[data-day="10"][data-month-index="5"]'; - - cy.get('body').find(start).first().type(shiftUpArrow); - - cy.get('body') - .find('[data-day="31"][data-month-index="2"]') - .first() - .should('have.attr', 'tabindex', '0') - .type(shiftDownArrow); - - cy.get('body').find('[data-day="7"][data-month-index="5"]').first().should('have.attr', 'tabindex', '0'); - }); - it('arrow up with min', () => { const june = [...new Array(6)].map((_, day) => ({ date: new Date(2022, 5, 1 + day), })); mount( - - {}} - /> - , + , ); const start = '[data-day="10"][data-month-index="5"]'; - cy.get('body').find(start).first().type(shiftUpArrow); + cy.get('body').find(start).type(shiftUpArrow); - cy.get('body').find(start).first().should('have.attr', 'tabindex', '0'); + checkFocusedDay('10'); + checkFocusedMonth('5'); }); it('arrow down with max', () => { @@ -1285,22 +888,15 @@ describe('plasma-web: CalendarDouble keyboard navigation', () => { })); mount( - - {}} - /> - , + , ); const start = '[data-day="17"][data-month-index="5"]'; - cy.get('body').find(start).first().type(shiftDownArrow); + cy.get('body').find(start).type(shiftDownArrow); - cy.get('body').find(start).first().should('have.attr', 'tabindex', '0'); + checkFocusedDay('17'); + checkFocusedMonth('5'); }); }); }); diff --git a/packages/plasma-web/src/components/Calendar/Calendar.stories.tsx b/packages/plasma-web/src/components/Calendar/Calendar.stories.tsx index f67d4b5f60..a8252d530f 100644 --- a/packages/plasma-web/src/components/Calendar/Calendar.stories.tsx +++ b/packages/plasma-web/src/components/Calendar/Calendar.stories.tsx @@ -1,18 +1,15 @@ -import React, { ComponentProps, useCallback, useMemo, useState } from 'react'; -import styled from 'styled-components'; +import React, { ComponentProps, useCallback, useRef, useState } from 'react'; import type { StoryObj, Meta } from '@storybook/react'; import { action } from '@storybook/addon-actions'; -import { backgroundPrimary } from '@salutejs/plasma-tokens-web'; -import { InSpacingDecorator } from '@salutejs/plasma-sb-utils'; +import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils'; -import { Popup } from '../Popup'; -import { TextField } from '../TextField'; +import { Tabs } from '../Tabs/Tabs'; +import { TabItem } from '../Tabs/TabItem'; +import { H3 } from '../Typography'; import { Calendar, CalendarBase, CalendarBaseRange, CalendarDouble, CalendarDoubleRange } from '.'; -import type { CalendarProps, CalendarBaseProps, CalendarDoubleProps } from '.'; const onChangeValue = action('onChangeValue'); -const onChangeStartOfRange = action('onChangeStartOfRange'); const meta: Meta = { title: 'Controls/Calendar', @@ -29,333 +26,279 @@ const meta: Meta = { type: 'date', }, }, + size: { + options: ['l', 'm', 's', 'xs'], + control: { + type: 'inline-radio', + }, + }, + ...disableProps([ + 'value', + 'onChangeValue', + 'date', + 'eventList', + 'disabledList', + 'eventMonthList', + 'disabledMonthList', + 'eventQuarterList', + 'disabledQuarterList', + 'eventYearList', + 'disabledYearList', + 'type', + 'view', + 'onChangeStartOfRange', + ]), }, }; export default meta; -type Story = StoryObj; - -const baseEvents = [ - { - date: new Date(2022, 5, 6), - }, - { - date: new Date(2022, 5, 10), - color: 'red', - }, - { - date: new Date(2022, 5, 10), - color: 'green', - }, - { - date: new Date(2022, 5, 10), - color: 'blue', - }, -]; - -const StyledTextField = styled(TextField)` - input[type='date']::-webkit-inner-spin-button, - input[type='date']::-webkit-calendar-picker-indicator { - display: none; - -webkit-appearance: none; - } -`; - -const StyledCalendar = styled(Calendar)` - background-color: ${backgroundPrimary}; - box-shadow: 0 0.063rem 0.25rem -0.063rem rgba(0, 0, 0, 0.04), 0 0.375rem 0.75rem -0.125rem rgba(8, 8, 8, 0.1); - border-radius: 0.75rem; -`; - -const CommonStoryProps = { - min: new Date(2022, 4, 0), - max: new Date(2022, 6, 15), - includeEdgeDates: false, +type CalendarProps = ComponentProps; +type CalendarBaseProps = ComponentProps; +type CalendarBaseRangeProps = ComponentProps; +const eventColors = ['red', 'green', 'blue', 'purple']; +const defaultMinDate = new Date(2016, 6, 1); +const defaultMaxDate = new Date(2030, 11, 24); + +const getBaseEvents = (type: 'days' | 'months' | 'quarters' | 'years', datesNumber = 2) => { + const baseDate = { + day: 10, + monthIndex: 6, + year: 2023, + }; + + const colorIndex = Math.floor(Math.random() * eventColors.length); + + const events = [...new Array(datesNumber)].map((_, index) => { + const eventNumber = Math.floor(Math.random() * 3 + 1); + const day = type === 'days' ? baseDate.day + index : 1; + const month = + // eslint-disable-next-line no-nested-ternary + type === 'months' || type === 'quarters' + ? baseDate.monthIndex + index + : type === 'days' + ? baseDate.monthIndex + : 0; + const year = type === 'years' ? baseDate.year + index : baseDate.year; + + return [...new Array(eventNumber)].map(() => { + return { date: new Date(year, month, day), color: eventColors[colorIndex] }; + }); + }); + + return events.flat(); }; -const StoryCalendarDefault = (props: CalendarProps) => { - const { isRange, isDouble, min, max, date, includeEdgeDates } = props; - const [value, setValue] = useState(new Date(2022, 5, 6)); - const [valueRange, setValueRange] = useState<[Date, Date?]>([new Date(2022, 5, 6), new Date(2022, 5, 10)]); +const StoryDefault = (args: CalendarProps) => { + 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)]); const handleOnChange = useCallback((newValue: Date) => { setValue(newValue); onChangeValue(newValue); }, []); - const handleOnRangeChange = useCallback((newValue: [Date, Date?]) => { setValueRange(newValue); }, []); - const eventsRange = [...new Array(10)].map((_, day) => ({ - date: new Date(2022, 5, 15 + day), - color: 'purple', - })); - - const disabledDays = [...new Array(5)].map((_, day) => ({ - date: new Date(2022, 5, 11 + day), - })); - return ( void} /> ); }; -export const Default: Story = { +export const Default: StoryObj = { args: { - ...CommonStoryProps, + min: new Date(2023, 10, 1), + max: new Date(2023, 11, 24), isDouble: false, isRange: false, + includeEdgeDates: false, + size: 'm', }, - render: (args) => , + render: (args) => , }; -const StoryCalendarBase = ({ min, max, type, includeEdgeDates }: CalendarBaseProps) => { - const [value, setValue] = useState(new Date(2022, 5, 6)); +const StoryBase = (args: CalendarBaseProps & { displayDouble: boolean }) => { + const { min, max, includeEdgeDates, size, displayDouble } = args; + const [value, setValue] = useState(new Date(2023, 6, 7)); + const [currentState, setCurrentState] = useState('Days'); - const handleOnChange = useCallback((newValue: Date) => { + const handleOnChange = useCallback((newValue: Date, dateInfo?: unknown) => { setValue(newValue); - onChangeValue(newValue); + onChangeValue(newValue, dateInfo); }, []); - const eventsRange = [...new Array(10)].map((_, day) => ({ - date: new Date(2022, 5, 15 + day), - color: 'purple', - })); + const eventList = useRef(getBaseEvents('days', 5)); + const eventMonthList = useRef(getBaseEvents('months', 5)); + const eventQuarterList = useRef(getBaseEvents('quarters')); + const eventYearList = useRef(getBaseEvents('years')); const disabledDays = [...new Array(5)].map((_, day) => ({ - date: new Date(2022, 5, 11 + day), + date: new Date(2023, 6, 23 + day), })); - return ( - - ); -}; - -export const Base: StoryObj = { - args: { - ...CommonStoryProps, - type: 'Days', - }, - argTypes: { - type: { - options: ['Days', 'Months', 'Years'], - control: { - type: 'select', - }, - }, - }, - render: (args) => , -}; - -const StoryCalendarDouble = ({ min, max, includeEdgeDates }: CalendarDoubleProps) => { - const [value, setValue] = useState(new Date(2022, 5, 6)); - const handleOnChange = useCallback((newValue: Date) => { - setValue(newValue); - onChangeValue(newValue); - }, []); - - const eventsRange = [...new Array(15)].map((_, day) => ({ - date: new Date(2022, 5, 25 + day), - color: 'purple', - })); - - const disabledDays = [...new Array(5)].map((_, day) => ({ - date: new Date(2022, 5, 11 + day), - })); - - return ( - - ); -}; - -export const Double: StoryObj = { - args: { - ...CommonStoryProps, - }, - render: (args) => , -}; - -const StoryCalendarRange = ({ min, max, type, includeEdgeDates }: ComponentProps) => { - const [values, setValue] = useState<[Date, Date?]>([new Date(2022, 5, 16), new Date(2022, 5, 25)]); - const handleOnChange = useCallback((newValue: [Date, Date?]) => { - onChangeValue(newValue); - setValue(newValue); - }, []); - - const eventsRange = [...new Array(10)].map((_, day) => ({ - date: new Date(2022, 5, 15 + day), - color: 'purple', - })); - - const disabledDays = [...new Array(5)].map((_, day) => ({ - date: new Date(2022, 5, 11 + day), - })); + const getCalendarComponent = ({ type, ...rest }) => { + return displayDouble ? ( + + ) : ( + + ); + }; - const eventList = useMemo(() => [...baseEvents, ...eventsRange], [eventsRange]); - const disabledList = useMemo(() => [{ date: new Date(2022, 5, 4) }, ...disabledDays], [disabledDays]); + const calendarMap = { + Days: getCalendarComponent({ type: 'Days', eventList: eventList.current, disabledList: disabledDays }), + Months: getCalendarComponent({ type: 'Months', eventMonthList: eventMonthList.current }), + Quarters: getCalendarComponent({ type: 'Quarters', eventQuarterList: eventQuarterList.current }), + Years: getCalendarComponent({ type: 'Years', eventYearList: eventYearList.current }), + }; return ( - + <> +

Тип календаря

+ + {Object.keys(calendarMap).map((state, i) => ( + setCurrentState(state)} + size="m" + > + {state} + + ))} + +
{calendarMap[currentState]}
+ ); }; -export const Range: StoryObj> = { +export const Base: StoryObj = { argTypes: { - type: { - options: ['Days', 'Months', 'Years'], - control: { - type: 'select', - }, - }, - }, - args: { - min: new Date(2022, 4, 0), - max: new Date(2022, 7, 15), - includeEdgeDates: false, - type: 'Days', + ...disableProps(['isRange', 'isDouble']), }, - render: (args) => , -}; - -const StoryDoubleRange = ({ min, max, includeEdgeDates }: ComponentProps) => { - const [values, setValue] = useState<[Date, Date?]>([new Date(2022, 5, 7), new Date(2022, 6, 9)]); - const handleOnChange = useCallback((newValue: [Date, Date?]) => { - onChangeValue(newValue); - setValue(newValue); - }, []); - - const eventsRange = [...new Array(10)].map((_, day) => ({ - date: new Date(2022, 5, 15 + day), - color: 'purple', - })); - - const disabledDays = [...new Array(7)].map((_, day) => ({ - date: new Date(2022, 6, 10 + day), - })); - - const eventList = useMemo(() => [...baseEvents, ...eventsRange], [eventsRange]); - const disabledList = useMemo(() => [{ date: new Date(2022, 5, 4) }, ...disabledDays], [disabledDays]); - - return ( - - ); -}; - -export const DoubleRange: StoryObj> = { args: { - min: new Date(2022, 4, 0), - max: new Date(2022, 7, 15), + size: 'm', + min: defaultMinDate, + max: defaultMaxDate, includeEdgeDates: false, + displayDouble: false, }, - render: (args) => , + render: (args) => , }; -const StoryCalendarWithPopup = ({ min, max, isDouble, includeEdgeDates }: CalendarProps) => { - const [textValue, setTextValue] = useState('2022-06-06'); - const [value, setValue] = useState(new Date(textValue)); - const [isOpen, setIsOpen] = useState(false); - - const handleOnTextChange = useCallback((event: ChangeEvent) => { - const newValue = event.target.value; - setTextValue(newValue); - setValue(new Date(newValue)); - }, []); +const StoryRange = (args: CalendarBaseRangeProps & { displayDouble: boolean }) => { + const { min, max, includeEdgeDates, size, displayDouble } = args; + const [values, setValue] = useState<[Date, Date?]>([new Date(2023, 6, 1), new Date(2023, 6, 16)]); + const [currentState, setCurrentState] = useState('Days'); - const handleOnChange = useCallback((newValue: Date) => { + const handleOnChange = (newValue: [Date, Date?], dateInfo) => { + onChangeValue(newValue, dateInfo); setValue(newValue); - setTextValue(new Date(newValue).toLocaleDateString('en-CA')); - setIsOpen(false); - onChangeValue(newValue); - }, []); + }; - const onToggle = useCallback((newIsOpen) => { - setIsOpen(newIsOpen); - }, []); - - const eventsRange = [...new Array(10)].map((_, day) => ({ - date: new Date(2022, 5, 15 + day), - color: 'purple', - })); + const eventList = useRef(getBaseEvents('days', 5)); + const eventMonthList = useRef(getBaseEvents('months', 5)); + const eventQuarterList = useRef(getBaseEvents('quarters')); + const eventYearList = useRef(getBaseEvents('years')); const disabledDays = [...new Array(5)].map((_, day) => ({ - date: new Date(2022, 5, 11 + day), + date: new Date(2023, 6, 23 + day), })); - return ( - } - onToggle={onToggle} - > - { + return displayDouble ? ( + + ) : ( + - + ); + }; + + const calendarMap = { + Days: getCalendarComponent({ type: 'Days', eventList: eventList.current, disabledList: disabledDays }), + Months: getCalendarComponent({ type: 'Months', eventMonthList: eventMonthList.current }), + Quarters: getCalendarComponent({ type: 'Quarters', eventQuarterList: eventQuarterList.current }), + Years: getCalendarComponent({ type: 'Years', eventYearList: eventYearList.current }), + }; + + return ( + <> +

Тип календаря

+ + {Object.keys(calendarMap).map((state, i) => ( + setCurrentState(state)} + size="m" + > + {state} + + ))} + +
{calendarMap[currentState]}
+ ); }; -export const WithPopup: Story = { +export const Range: StoryObj = { + argTypes: { + ...disableProps(['isRange', 'isDouble']), + }, args: { - ...CommonStoryProps, - isDouble: false, + size: 'm', + min: defaultMinDate, + max: defaultMaxDate, + includeEdgeDates: false, + displayDouble: false, }, - render: (args) => , + render: (args) => , }; diff --git a/packages/plasma-web/src/components/Calendar/CalendarBase.config.ts b/packages/plasma-web/src/components/Calendar/CalendarBase.config.ts index 83cc1c49de..261fe65776 100644 --- a/packages/plasma-web/src/components/Calendar/CalendarBase.config.ts +++ b/packages/plasma-web/src/components/Calendar/CalendarBase.config.ts @@ -52,6 +52,19 @@ export const config = { ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.75rem; + ${calendarBaseTokens.calendarQuarterItemWidth}: 11.75rem; + ${calendarBaseTokens.calendarQuarterItemHeight}: 10.5rem; + + ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); + ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); + ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: 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; @@ -113,6 +126,19 @@ export const config = { ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.625rem; + ${calendarBaseTokens.calendarQuarterItemWidth}: 10rem; + ${calendarBaseTokens.calendarQuarterItemHeight}: 8.5rem; + + ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); + ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); + ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: 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; @@ -174,6 +200,19 @@ export const config = { ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarBaseTokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.5rem; + ${calendarBaseTokens.calendarQuarterItemWidth}: 8.25rem; + ${calendarBaseTokens.calendarQuarterItemHeight}: 7rem; + + ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); + ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); + ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: 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; @@ -235,6 +274,19 @@ export const config = { ${calendarBaseTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); ${calendarBaseTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarBaseTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; + ${calendarBaseTokens.calendarQuarterItemBorderRadius}: 0.375rem; + ${calendarBaseTokens.calendarQuarterItemWidth}: 8.25rem; + ${calendarBaseTokens.calendarQuarterItemHeight}: 6.563rem; + + ${calendarBaseTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); + ${calendarBaseTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); + ${calendarBaseTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); + ${calendarBaseTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${calendarBaseTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarBaseTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarBaseTokens.calendarQuarterSelectedFontWeight}: 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; diff --git a/packages/plasma-web/src/components/Calendar/CalendarDouble.config.ts b/packages/plasma-web/src/components/Calendar/CalendarDouble.config.ts index bd3cd59543..f706a3a68c 100644 --- a/packages/plasma-web/src/components/Calendar/CalendarDouble.config.ts +++ b/packages/plasma-web/src/components/Calendar/CalendarDouble.config.ts @@ -53,6 +53,19 @@ export const config = { ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.75rem; + ${calendarDoubleTokens.calendarQuarterItemWidth}: 11.75rem; + ${calendarDoubleTokens.calendarQuarterItemHeight}: 10.5rem; + + ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); + ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); + ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: 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; @@ -114,6 +127,19 @@ export const config = { ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.625rem; + ${calendarDoubleTokens.calendarQuarterItemWidth}: 10rem; + ${calendarDoubleTokens.calendarQuarterItemHeight}: 8.5rem; + + ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); + ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); + ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: 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; @@ -176,6 +202,19 @@ export const config = { ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${calendarDoubleTokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem; + ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.5rem; + ${calendarDoubleTokens.calendarQuarterItemWidth}: 8.25rem; + ${calendarDoubleTokens.calendarQuarterItemHeight}: 7rem; + + ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); + ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); + ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: 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; @@ -237,6 +276,19 @@ export const config = { ${calendarDoubleTokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); ${calendarDoubleTokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${calendarDoubleTokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; + ${calendarDoubleTokens.calendarQuarterItemBorderRadius}: 0.375rem; + ${calendarDoubleTokens.calendarQuarterItemWidth}: 8.25rem; + ${calendarDoubleTokens.calendarQuarterItemHeight}: 6.563rem; + + ${calendarDoubleTokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); + ${calendarDoubleTokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); + ${calendarDoubleTokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); + ${calendarDoubleTokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${calendarDoubleTokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${calendarDoubleTokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${calendarDoubleTokens.calendarQuarterSelectedFontWeight}: 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; diff --git a/packages/plasma-web/src/components/Calendar/CalendarRange.component-test.tsx b/packages/plasma-web/src/components/Calendar/CalendarRange.component-test.tsx new file mode 100644 index 0000000000..55e927309b --- /dev/null +++ b/packages/plasma-web/src/components/Calendar/CalendarRange.component-test.tsx @@ -0,0 +1,154 @@ +/* eslint-disable newline-per-chained-call */ +import React, { useCallback, useState } from 'react'; +import type { FC, PropsWithChildren } from 'react'; +import { createGlobalStyle } from 'styled-components'; +import { standard as standardTypo } from '@salutejs/plasma-typo'; +import { mount, CypressTestDecorator, getComponent, PadMe } from '@salutejs/plasma-cy-utils'; + +import { CalendarDoubleRange as CalendarDoubleRangeB2C, CalendarBaseRange as CalendarBaseRangeB2C } from './Calendar'; + +const StandardTypoStyle = createGlobalStyle(standardTypo); + +const events = [ + { + date: new Date('1999-07-09'), + color: 'red', + }, + { + date: new Date('1999-07-09'), + color: 'red', + }, + { + date: new Date('1999-07-10'), + color: 'red', + }, + { + date: new Date('1999-07-11'), + color: 'red', + }, + { + date: new Date('1999-07-12'), + color: 'red', + }, + { + date: new Date('1999-07-12'), + color: 'red', + }, +]; +const disabledDays = [...new Array(5)].map((_, day) => ({ + date: new Date(1999, 6, 23 + day), +})); + +describe('plasma-web: CalendarRange', () => { + const CalendarBaseRange = getComponent('CalendarBaseRange') as typeof CalendarBaseRangeB2C; + const CalendarDoubleRange = getComponent('CalendarDoubleRange') as typeof CalendarDoubleRangeB2C; + + const CypressTestDecoratorWithTypo: FC = ({ children }) => ( + + + {children} + + ); + + const Demo = (args) => { + const { min, max, displayDouble, baseValue, size = 's', type = 'Days' } = args; + const [values, setValue] = useState<[Date, Date?]>(baseValue); + + const handleOnChange = useCallback((newValue: [Date, Date?]) => { + setValue(newValue); + }, []); + + const getCalendarComponent = (rest) => { + return displayDouble ? ( + + ) : ( + + ); + }; + + const calendarMap = { + Days: getCalendarComponent({ type: 'Days', eventList: events, disabledList: disabledDays }), + Months: getCalendarComponent({ type: 'Months' }), + Quarters: getCalendarComponent({ type: 'Quarters' }), + Years: getCalendarComponent({ type: 'Years' }), + }; + + return {calendarMap[type]}; + }; + + it('default', () => { + mount( + <> + + + + + + + + , + ); + + cy.matchImageSnapshot({ + failureThreshold: 0.01, + failureThresholdType: 'percent', + }); + }); + + it('default: double calendar', () => { + mount( + <> + + + + + + + + , + ); + + cy.viewport(1200, 500); + + cy.matchImageSnapshot(); + }); + + it('range with init values as undefined', () => { + mount(); + + cy.get('body').find('[aria-selected="true"]').should('not.be.exist'); + }); + + it('range in progress', () => { + mount(); + + cy.get('div:nth-of-type(5) > div:nth-of-type(5)').first().trigger('mouseover'); + + cy.matchImageSnapshot(); + }); + + it('range in progress with disabled', () => { + mount(); + + cy.get('div:nth-of-type(5) > div:nth-of-type(4)').first().trigger('mouseover'); + cy.get('div:nth-of-type(6) > div:nth-of-type(3)').first().trigger('mouseover'); + + cy.matchImageSnapshot(); + }); +}); diff --git a/packages/plasma-web/src/components/Chip/Chip.component-test.tsx b/packages/plasma-web/src/components/Chip/Chip.component-test.tsx index 337c975819..dd3bcd6f68 100644 --- a/packages/plasma-web/src/components/Chip/Chip.component-test.tsx +++ b/packages/plasma-web/src/components/Chip/Chip.component-test.tsx @@ -1,17 +1,19 @@ import React from 'react'; -import type { FC } from 'react'; +import type { FC, PropsWithChildren } from 'react'; import { createGlobalStyle } from 'styled-components'; import { standard as standardTypo } from '@salutejs/plasma-typo'; import { IconDownload } from '@salutejs/plasma-icons'; import { mount, CypressTestDecorator, getComponent, PadMe, SpaceMe } from '@salutejs/plasma-cy-utils'; +import { Chip as ChipB2C } from '.'; + const Icon = () => ; const StandardTypoStyle = createGlobalStyle(standardTypo); describe('plasma-web: Chip', () => { - const Chip = getComponent('Chip'); + const Chip = getComponent('Chip') as typeof ChipB2C; - const CypressTestDecoratorWithTypo: FC = ({ children }) => ( + const CypressTestDecoratorWithTypo: FC = ({ children }) => ( {children} @@ -28,6 +30,16 @@ describe('plasma-web: Chip', () => { cy.matchImageSnapshot(); }); + it('without Clear', () => { + mount( + + Hello Plasma + , + ); + + cy.matchImageSnapshot(); + }); + it('with Icon', () => { mount( diff --git a/packages/plasma-web/src/components/Chip/Chip.stories.tsx b/packages/plasma-web/src/components/Chip/Chip.stories.tsx index 86b93d02cb..a5ed3115db 100644 --- a/packages/plasma-web/src/components/Chip/Chip.stories.tsx +++ b/packages/plasma-web/src/components/Chip/Chip.stories.tsx @@ -51,6 +51,7 @@ export const Default: Story = { text: 'This is chip', view: 'default', size: 'm', + hasClear: true, disabled: false, focused: true, pilled: false, diff --git a/packages/plasma-web/src/components/DatePicker/DatePicker.config.ts b/packages/plasma-web/src/components/DatePicker/DatePicker.config.ts index eda631db2b..53a7e4473a 100644 --- a/packages/plasma-web/src/components/DatePicker/DatePicker.config.ts +++ b/packages/plasma-web/src/components/DatePicker/DatePicker.config.ts @@ -129,6 +129,19 @@ export const config = { ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-l-font-weight); ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem; + ${tokens.calendarQuarterItemBorderRadius}: 0.75rem; + ${tokens.calendarQuarterItemWidth}: 11.75rem; + ${tokens.calendarQuarterItemHeight}: 10.5rem; + + ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-l-line-height); + ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${tokens.calendarMonthsPadding}: 0.5rem 1rem 1.125rem 1rem; ${tokens.calendarMonthItemBorderRadius}: 0.75rem; ${tokens.calendarMonthItemWidth}: 7.8125rem; @@ -239,6 +252,19 @@ export const config = { ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-m-font-weight); ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem; + ${tokens.calendarQuarterItemBorderRadius}: 0.625rem; + ${tokens.calendarQuarterItemWidth}: 10rem; + ${tokens.calendarQuarterItemHeight}: 8.5rem; + + ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-m-line-height); + ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${tokens.calendarMonthsPadding}: 0.5rem 1rem 1.125rem 1rem; ${tokens.calendarMonthItemBorderRadius}: 0.625rem; ${tokens.calendarMonthItemWidth}: 6.688rem; @@ -349,6 +375,19 @@ export const config = { ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-s-font-weight); ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarQuartersPadding}: 0.5rem 0.5rem 0 0.5rem; + ${tokens.calendarQuarterItemBorderRadius}: 0.5rem; + ${tokens.calendarQuarterItemWidth}: 8.25rem; + ${tokens.calendarQuarterItemHeight}: 7rem; + + ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-s-line-height); + ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.calendarQuarterSelectedFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${tokens.calendarMonthsPadding}: 0.5rem 1rem 0.875rem 1rem; ${tokens.calendarMonthItemBorderRadius}: 0.5rem; ${tokens.calendarMonthItemWidth}: 5.5rem; @@ -460,6 +499,19 @@ export const config = { ${tokens.calendarYearFontWeight}: var(--plasma-typo-body-xs-font-weight); ${tokens.calendarYearSelectedFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${tokens.calendarQuartersPadding}: 0.375rem 0.25rem 0 0.25rem; + ${tokens.calendarQuarterItemBorderRadius}: 0.375rem; + ${tokens.calendarQuarterItemWidth}: 8.25rem; + ${tokens.calendarQuarterItemHeight}: 6.563rem; + + ${tokens.calendarQuarterFontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.calendarQuarterFontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.calendarQuarterFontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.calendarQuarterFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.calendarQuarterFontLineHeight}: var(--plasma-typo-body-xs-line-height); + ${tokens.calendarQuarterFontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.calendarQuarterSelectedFontWeight}: 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; diff --git a/packages/plasma-web/src/components/Dropdown/Dropdown.component-test.tsx b/packages/plasma-web/src/components/Dropdown/Dropdown.component-test.tsx index da4d5d56c2..42c97e29a8 100644 --- a/packages/plasma-web/src/components/Dropdown/Dropdown.component-test.tsx +++ b/packages/plasma-web/src/components/Dropdown/Dropdown.component-test.tsx @@ -569,25 +569,62 @@ describe('plasma-web: Dropdown', () => { // Arrows Right and Left cy.realPress('ArrowDown').realPress('ArrowDown').realPress('ArrowRight'); - cy.get('#tree_level_1').should('be.visible'); - cy.get('#tree_level_2').should('be.visible'); - cy.get('#brazil').should('have.class', 'dropdown-item-is-focused'); + cy.get('#south_america').should('have.class', 'dropdown-item-is-focused'); + cy.get('#south_america').should('have.class', 'dropdown-item-is-active'); cy.get('button').should('have.focus'); + cy.realPress('ArrowRight'); + cy.get('#south_america').should('not.have.class', 'dropdown-item-is-focused'); + cy.get('#brazil').should('have.class', 'dropdown-item-is-focused'); cy.get('#south_america').should('have.class', 'dropdown-item-is-active'); - cy.realPress('ArrowLeft'); - cy.get('#tree_level_1').should('be.visible'); - cy.get('#tree_level_2').should('not.be.visible'); + cy.realPress('ArrowLeft').realPress('ArrowLeft'); cy.get('#south_america').should('have.class', 'dropdown-item-is-focused'); - cy.realPress('ArrowDown').realPress('ArrowRight'); - cy.get('#france').should('have.class', 'dropdown-item-is-focused'); + cy.get('#south_america').should('not.have.class', 'dropdown-item-is-active'); + cy.realPress('ArrowDown') + .realPress('ArrowDown') + .realPress('ArrowRight') + .realPress('ArrowRight') + .realPress('ArrowRight') + .realPress('ArrowRight'); + cy.get('#beijing').should('have.class', 'dropdown-item-is-focused'); + cy.get('#asia').should('have.class', 'dropdown-item-is-active'); + cy.get('#china').should('have.class', 'dropdown-item-is-active'); cy.get('button').should('have.focus'); - cy.get('#europe').should('have.class', 'dropdown-item-is-active'); - cy.realPress('ArrowRight'); - cy.get('#europe').should('have.class', 'dropdown-item-is-active'); - cy.get('#france').should('have.class', 'dropdown-item-is-active'); - cy.get('#paris').should('have.class', 'dropdown-item-is-focused'); - cy.realPress('ArrowLeft').realPress('ArrowLeft').realPress('ArrowLeft'); + cy.realPress('ArrowLeft') + .realPress('ArrowLeft') + .realPress('ArrowLeft') + .realPress('ArrowLeft') + .realPress('ArrowLeft'); cy.get('#tree_level_1').should('not.be.visible'); + cy.get('#tree_level_2').should('not.be.visible'); + cy.get('#tree_level_3').should('not.be.visible'); + cy.get('button').should('have.focus'); + cy.realPress('ArrowDown').realPress('ArrowDown').realPress('ArrowRight'); + cy.realPress('PageDown'); + cy.get('#africa').should('have.class', 'dropdown-item-is-focused'); + cy.get('#south_america').should('not.have.class', 'dropdown-item-is-active'); + cy.get('#tree_level_2').should('not.be.visible'); + cy.realPress('Escape'); + cy.get('button').should('have.focus'); + cy.realPress('ArrowDown').realPress('ArrowDown').realPress('ArrowRight'); + cy.realPress('PageUp'); + cy.get('#north_america').should('have.class', 'dropdown-item-is-focused'); + cy.get('#south_america').should('not.have.class', 'dropdown-item-is-active'); + cy.get('#tree_level_2').should('not.be.visible'); + cy.realPress('Escape'); + cy.get('button').should('have.focus'); + cy.realPress('ArrowDown').realPress('ArrowDown').realPress('ArrowRight'); + cy.realPress('Home'); + cy.get('#north_america').should('have.class', 'dropdown-item-is-focused'); + cy.get('#south_america').should('not.have.class', 'dropdown-item-is-active'); + cy.get('#tree_level_2').should('not.be.visible'); + cy.realPress('Escape'); + cy.get('button').should('have.focus'); + cy.realPress('ArrowDown').realPress('ArrowDown').realPress('ArrowRight'); + cy.realPress('End'); + cy.get('#africa').should('have.class', 'dropdown-item-is-focused'); + cy.get('#south_america').should('not.have.class', 'dropdown-item-is-active'); + cy.get('#tree_level_2').should('not.be.visible'); + cy.realPress('Escape'); cy.get('button').should('have.focus'); // Escape @@ -638,6 +675,7 @@ describe('plasma-web: Dropdown', () => { .realPress('ArrowDown') .realPress('Space') .realPress('ArrowLeft') + .realPress('ArrowLeft') .realPress('ArrowUp') .realPress('Space'); cy.get('#tree_level_1').should('not.be.visible'); @@ -648,6 +686,7 @@ describe('plasma-web: Dropdown', () => { .realPress('ArrowDown') .realPress('Enter') .realPress('ArrowLeft') + .realPress('ArrowLeft') .realPress('ArrowUp') .realPress('Enter'); cy.get('#tree_level_1').should('not.be.visible'); diff --git a/packages/plasma-web/src/components/Dropdown/Dropdown.config.ts b/packages/plasma-web/src/components/Dropdown/Dropdown.config.ts index ae9e0f998a..fddc8a8387 100644 --- a/packages/plasma-web/src/components/Dropdown/Dropdown.config.ts +++ b/packages/plasma-web/src/components/Dropdown/Dropdown.config.ts @@ -93,7 +93,7 @@ export const config = { ${dropdownTokens.disabledOpacity}: 0.4; ${dropdownTokens.focusColor}: var(--surface-accent); ${dropdownTokens.background}: var(--surface-solid-card); - ${dropdownTokens.boxShadow}: var(--shadow-down-soft-s); + ${dropdownTokens.boxShadow}: 0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04); ${dropdownTokens.disclosureIconColor}: var(--text-secondary); ${dropdownTokens.itemBackground}: var(--plasma-colors-transparent); ${dropdownTokens.itemBackgroundHover}: var(--surface-transparent-secondary); diff --git a/packages/plasma-web/src/components/Dropdown/index.ts b/packages/plasma-web/src/components/Dropdown/index.ts index 9e5cca7784..b7b13819be 100644 --- a/packages/plasma-web/src/components/Dropdown/index.ts +++ b/packages/plasma-web/src/components/Dropdown/index.ts @@ -2,6 +2,8 @@ export { withAssistiveDropdown } from '@salutejs/plasma-hope'; export type { DropdownProps } from '@salutejs/plasma-new-hope/styled-components'; export { Dropdown } from './Dropdown'; + +// TODO: #1271 export { DropdownItem } from './components/DropdownItem'; export { DropdownPopup } from './components/DropdownPopup'; export { DropdownList } from './components/DropdownList'; diff --git a/packages/plasma-web/src/components/EmptyState/EmptyState.config.ts b/packages/plasma-web/src/components/EmptyState/EmptyState.config.ts new file mode 100644 index 0000000000..406c7041d2 --- /dev/null +++ b/packages/plasma-web/src/components/EmptyState/EmptyState.config.ts @@ -0,0 +1,67 @@ +import { css, emptyStateTokens as tokens } from '@salutejs/plasma-new-hope/styled-components'; + +export const config = { + defaults: { + size: 'l', + }, + variations: { + size: { + l: css` + ${tokens.borderRadius}: 0.875rem; + ${tokens.padding}: 2rem 1rem 1rem 1rem; + ${tokens.iconMargin}: 0 0 0.5rem 0; + ${tokens.descriptionMargin}: 0 0 1rem 0; + ${tokens.buttonMargin}: -1rem 0 0 0; + ${tokens.buttonHeight}: 3.5rem; + ${tokens.fontFamily}: var(--plasma-typo-body-l-font-family); + ${tokens.fontSize}: var(--plasma-typo-body-l-font-size); + ${tokens.fontStyle}: var(--plasma-typo-body-l-font-style); + ${tokens.fontWeight}: var(--plasma-typo-body-l-font-weight); + ${tokens.fontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${tokens.fontLineHeight}: var(--plasma-typo-body-l-line-height); + `, + m: css` + ${tokens.borderRadius}: 0.75rem; + ${tokens.padding}: 1.625rem 1rem 0.875rem 1rem; + ${tokens.iconMargin}: 0 0 0.375rem 0; + ${tokens.descriptionMargin}: 0 0 0.875rem 0; + ${tokens.buttonMargin}: -0.875rem 0 0 0; + ${tokens.buttonHeight}: 3rem; + ${tokens.fontFamily}: var(--plasma-typo-body-m-font-family); + ${tokens.fontSize}: var(--plasma-typo-body-m-font-size); + ${tokens.fontStyle}: var(--plasma-typo-body-m-font-style); + ${tokens.fontWeight}: var(--plasma-typo-body-m-font-weight); + ${tokens.fontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${tokens.fontLineHeight}: var(--plasma-typo-body-m-line-height); + `, + s: css` + ${tokens.borderRadius}: 0.625rem; + ${tokens.padding}: 1.375rem 0.875rem 0.625rem 0.875rem; + ${tokens.iconMargin}: 0 0 0.25rem 0; + ${tokens.descriptionMargin}: 0 0 0.625rem 0; + ${tokens.buttonMargin}: -0.625rem 0 0 0; + ${tokens.buttonHeight}: 2.5rem; + ${tokens.fontFamily}: var(--plasma-typo-body-s-font-family); + ${tokens.fontSize}: var(--plasma-typo-body-s-font-size); + ${tokens.fontStyle}: var(--plasma-typo-body-s-font-style); + ${tokens.fontWeight}: var(--plasma-typo-body-s-font-weight); + ${tokens.fontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${tokens.fontLineHeight}: var(--plasma-typo-body-s-line-height); + `, + xs: css` + ${tokens.borderRadius}: 0.5rem; + ${tokens.padding}: 1rem 0.625rem 0.5rem 0.625rem; + ${tokens.iconMargin}: 0 0 0.25rem 0; + ${tokens.descriptionMargin}: 0 0 0.5rem 0; + ${tokens.buttonMargin}: -0.5rem 0 0 0; + ${tokens.buttonHeight}: 2rem; + ${tokens.fontFamily}: var(--plasma-typo-body-xs-font-family); + ${tokens.fontSize}: var(--plasma-typo-body-xs-font-size); + ${tokens.fontStyle}: var(--plasma-typo-body-xs-font-style); + ${tokens.fontWeight}: var(--plasma-typo-body-xs-font-weight); + ${tokens.fontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${tokens.fontLineHeight}: var(--plasma-typo-body-xs-line-height); + `, + }, + }, +}; diff --git a/packages/plasma-web/src/components/EmptyState/EmptyState.stories.tsx b/packages/plasma-web/src/components/EmptyState/EmptyState.stories.tsx new file mode 100644 index 0000000000..6c29f6c3db --- /dev/null +++ b/packages/plasma-web/src/components/EmptyState/EmptyState.stories.tsx @@ -0,0 +1,43 @@ +import type { ComponentProps } from 'react'; +import type { StoryObj, Meta } from '@storybook/react'; +import * as React from 'react'; +import { InSpacingDecorator } from '@salutejs/plasma-sb-utils'; +import { IconPlasma } from '@salutejs/plasma-icons'; + +import { EmptyState } from './EmptyState'; + +const sizes = ['l', 'm', 's', 'xs']; + +type StoryProps = ComponentProps & { + enableIcon: boolean; +}; + +const meta: Meta = { + title: 'Content/EmptyState', + decorators: [InSpacingDecorator], + component: EmptyState, + args: { + description: 'Описание', + buttonText: 'Кнопка', + size: 'l', + enableIcon: true, + }, + argTypes: { + size: { + options: sizes, + control: { + type: 'inline-radio', + }, + }, + }, +}; + +export default meta; + +const DefaultStory = (args: StoryProps) => { + return : undefined} />; +}; + +export const Default: StoryObj = { + render: (args) => , +}; diff --git a/packages/plasma-web/src/components/EmptyState/EmptyState.ts b/packages/plasma-web/src/components/EmptyState/EmptyState.ts new file mode 100644 index 0000000000..ed5712ce7b --- /dev/null +++ b/packages/plasma-web/src/components/EmptyState/EmptyState.ts @@ -0,0 +1,7 @@ +import { emptyStateConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components'; + +import { config } from './EmptyState.config'; + +export const mergedConfig = mergeConfig(emptyStateConfig, config); + +export const EmptyState = component(mergedConfig); diff --git a/packages/plasma-web/src/components/EmptyState/index.ts b/packages/plasma-web/src/components/EmptyState/index.ts new file mode 100644 index 0000000000..89798dbd68 --- /dev/null +++ b/packages/plasma-web/src/components/EmptyState/index.ts @@ -0,0 +1 @@ +export { EmptyState } from './EmptyState'; diff --git a/packages/plasma-web/src/components/Pagination/Pagination.component-test.tsx b/packages/plasma-web/src/components/Pagination/Pagination.component-test.tsx index 9354c8e4bf..63e65ebf41 100644 --- a/packages/plasma-web/src/components/Pagination/Pagination.component-test.tsx +++ b/packages/plasma-web/src/components/Pagination/Pagination.component-test.tsx @@ -290,7 +290,7 @@ describe('plasma-new-hope: Pagination Content', () => { it('setSelect', () => { mount( - + , ); cy.get('button').last().click(); diff --git a/packages/plasma-web/src/components/Pagination/Pagination.config.ts b/packages/plasma-web/src/components/Pagination/Pagination.config.ts index 836eb6f75f..35351f9e6d 100644 --- a/packages/plasma-web/src/components/Pagination/Pagination.config.ts +++ b/packages/plasma-web/src/components/Pagination/Pagination.config.ts @@ -8,72 +8,71 @@ export const config = { }, variations: { view: { - secondary: css` - ${paginationTokens.buttonColor}: var(--text-primary); - ${paginationTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); - ${paginationTokens.buttonHoverColor}: var(--text-primary); - ${paginationTokens.buttonHoverBackgroundColor}: color-mix( - in srgb, - var(--inverse-text-primary), - var(--surface-transparent-secondary) 85% - ); - ${paginationTokens.buttonActiveColor}: var(--text-primary); - ${paginationTokens.buttonActiveBackgroundColor}: color-mix( - in srgb, - var(--inverse-text-primary), - var(--surface-transparent-secondary) 80% - ); + default: css` + ${paginationTokens.buttonColor}: var(--inverse-text-primary); + ${paginationTokens.buttonColorHover}: var(--inverse-text-primary-hover); + ${paginationTokens.buttonColorActive}: var(--inverse-text-primary-active); + ${paginationTokens.buttonHoverColor}: var(--inverse-text-primary); + ${paginationTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${paginationTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); + ${paginationTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); + ${paginationTokens.buttonActiveColor}: var(--inverse-text-primary); + ${paginationTokens.buttonArrowColor}: var(--inverse-text-secondary); + ${paginationTokens.buttonArrowColorHover}: var(--inverse-text-secondary-hover); + ${paginationTokens.buttonArrowColorActive}: var(--inverse-text-secondary-hover); ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.selectBackgroundColor}: var(--surface-solid-secondary); ${paginationTokens.inputBackgroundColor}: var(--surface-clear); ${paginationTokens.inputBorderColor}: var(--surface-transparent-secondary); + ${paginationTokens.selectBackgroundColor}: color-mix( + in srgb, + var(--inverse-text-primary), + var(--surface-solid-default) 85% + ); ${paginationTokens.paginationColor}: var(--text-primary); ${paginationTokens.buttonFocusColor}: var(--surface-accent); `, - clear: css` + secondary: css` ${paginationTokens.buttonColor}: var(--text-primary); - ${paginationTokens.buttonBackgroundColor}: var(--surface-clear); + ${paginationTokens.buttonColorHover}: var(--text-primary-hover); + ${paginationTokens.buttonColorActive}: var(--text-primary-active); + ${paginationTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${paginationTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover); + ${paginationTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active); ${paginationTokens.buttonHoverColor}: var(--text-primary); - ${paginationTokens.buttonHoverBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 95%); ${paginationTokens.buttonActiveColor}: var(--text-primary); - ${paginationTokens.buttonActiveBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 90%); + ${paginationTokens.buttonArrowColor}: var(--text-secondary); + ${paginationTokens.buttonArrowColorHover}: var(--text-secondary-hover); + ${paginationTokens.buttonArrowColorActive}: var(--text-secondary-hover); ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.selectBackgroundColor}: var(--surface-solid-card); ${paginationTokens.inputBackgroundColor}: var(--surface-clear); + ${paginationTokens.selectBackgroundColor}: var(--surface-solid-secondary); ${paginationTokens.inputBorderColor}: var(--surface-transparent-secondary); ${paginationTokens.paginationColor}: var(--text-primary); ${paginationTokens.buttonFocusColor}: var(--surface-accent); `, - default: css` - ${paginationTokens.buttonColor}: var(--inverse-text-primary); - ${paginationTokens.buttonBackgroundColor}: var(--surface-solid-default); - ${paginationTokens.buttonHoverColor}: var(--inverse-text-primary); - ${paginationTokens.buttonHoverBackgroundColor}: color-mix( - in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% - ); - ${paginationTokens.buttonActiveColor}: var(--inverse-text-primary); - ${paginationTokens.buttonActiveBackgroundColor}: color-mix( - in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 80% - ); + clear: css` + ${paginationTokens.buttonColor}: var(--text-primary); + ${paginationTokens.buttonColorHover}: var(--text-primary-hover); + ${paginationTokens.buttonColorActive}: var(--text-primary-active); + ${paginationTokens.buttonBackgroundColor}: var(--surface-clear); + ${paginationTokens.buttonBackgroundColorHover}: var(--surface-clear); + ${paginationTokens.buttonBackgroundColorActive}: var(--surface-clear); + ${paginationTokens.buttonHoverColor}: var(--text-primary); + ${paginationTokens.buttonActiveColor}: var(--text-primary); + ${paginationTokens.buttonArrowColor}: var(--text-secondary); + ${paginationTokens.buttonArrowColorHover}: var(--text-secondary-hover); + ${paginationTokens.buttonArrowColorActive}: var(--text-secondary-hover); ${paginationTokens.buttonDisabledOpacity}: 0.4; - ${paginationTokens.selectBackgroundColor}: color-mix( - in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% - ); ${paginationTokens.inputBackgroundColor}: var(--surface-clear); + ${paginationTokens.selectBackgroundColor}: var(--surface-solid-card); ${paginationTokens.inputBorderColor}: var(--surface-transparent-secondary); ${paginationTokens.paginationColor}: var(--text-primary); @@ -85,19 +84,16 @@ export const config = { */ primary: css` ${paginationTokens.buttonColor}: var(--inverse-text-primary); - ${paginationTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${paginationTokens.buttonColorHover}: var(--inverse-text-primary-hover); + ${paginationTokens.buttonColorActive}: var(--inverse-text-primary-active); ${paginationTokens.buttonHoverColor}: var(--inverse-text-primary); - ${paginationTokens.buttonHoverBackgroundColor}: color-mix( - in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% - ); + ${paginationTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${paginationTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover); + ${paginationTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active); ${paginationTokens.buttonActiveColor}: var(--inverse-text-primary); - ${paginationTokens.buttonActiveBackgroundColor}: color-mix( - in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 80% - ); + ${paginationTokens.buttonArrowColor}: var(--inverse-text-secondary); + ${paginationTokens.buttonArrowColorHover}: var(--inverse-text-secondary-hover); + ${paginationTokens.buttonArrowColorActive}: var(--inverse-text-secondary-hover); ${paginationTokens.buttonDisabledOpacity}: 0.4; @@ -130,26 +126,6 @@ export const config = { var(--surface-solid-default) 80% ); `, - /** - * @deprecated - * использовать `default` - */ - primary: css` - ${paginationTokens.paginationCurrentButtonColor}: var(--inverse-text-primary); - ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-solid-default); - ${paginationTokens.paginationCurrentButtonHoverColor}: var(--inverse-text-primary); - ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix( - in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 85% - ); - ${paginationTokens.paginationCurrentButtonActiveColor}: var(--inverse-text-primary); - ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix( - in srgb, - var(--inverse-text-primary), - var(--surface-solid-default) 80% - ); - `, secondary: css` ${paginationTokens.paginationCurrentButtonColor}: var(--text-primary); ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-transparent-secondary); @@ -174,6 +150,26 @@ export const config = { ${paginationTokens.paginationCurrentButtonActiveColor}: var(--text-primary); ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 90%); `, + /** + * @deprecated + * использовать `default` + */ + primary: css` + ${paginationTokens.paginationCurrentButtonColor}: var(--inverse-text-primary); + ${paginationTokens.paginationCurrentButtonBackgroundColor}: var(--surface-solid-default); + ${paginationTokens.paginationCurrentButtonHoverColor}: var(--inverse-text-primary); + ${paginationTokens.paginationCurrentButtonHoverBackgroundColor}: color-mix( + in srgb, + var(--inverse-text-primary), + var(--surface-solid-default) 85% + ); + ${paginationTokens.paginationCurrentButtonActiveColor}: var(--inverse-text-primary); + ${paginationTokens.paginationCurrentButtonActiveBackgroundColor}: color-mix( + in srgb, + var(--inverse-text-primary), + var(--surface-solid-default) 80% + ); + `, }, size: { l: css` @@ -191,28 +187,21 @@ export const config = { ${paginationTokens.buttonRadius}: 0.875rem; ${paginationTokens.paginationIconSize}: 1.2rem; ${paginationTokens.paginationIconDoubleSize}: 1.45rem; + ${paginationTokens.buttonArrowMargin}: 0 -0.125rem 0 0.5rem; - ${paginationTokens.selectWidth}: 100%; ${paginationTokens.selectHeight}: auto; ${paginationTokens.selectPaddingTop}: 0.125rem; ${paginationTokens.selectPaddingRight}: 0.125rem; ${paginationTokens.selectPaddingBottom}: 0.125rem; ${paginationTokens.selectPaddingLeft}: 0.125rem; - ${paginationTokens.selectItemWidth}: auto; ${paginationTokens.selectItemHeight}: 1.5rem; - ${paginationTokens.selectItemPaddingTop}: 1rem; - ${paginationTokens.selectItemPaddingRight}: 1rem; - ${paginationTokens.selectItemPaddingBottom}: 1rem; - ${paginationTokens.selectItemPaddingLeft}: 1rem; + ${paginationTokens.selectItemPadding}: 1rem 1rem 1rem 1rem; ${paginationTokens.selectItemContentLeftWidth}: 1.875rem; ${paginationTokens.selectItemBackground}: transparent; ${paginationTokens.selectTargetArrowRight}: 1rem; - ${paginationTokens.selectTargetWidth}: 100%; - ${paginationTokens.selectTargetPadding}: 0 3.5rem 0 1.5rem; - ${paginationTokens.selectTargetPaddingHasChips}: 0 3.625rem 0 0.375rem; - ${paginationTokens.selectTargetPaddingWithInput}: 0 3.625rem 0 0.625rem; + ${paginationTokens.selectTargetPadding}: 1.5rem 0 1.5rem; ${paginationTokens.selectTargetInnerTop}: 0.5rem; ${paginationTokens.selectTargetLabelInnerTop}: 0.375rem; @@ -237,28 +226,21 @@ export const config = { ${paginationTokens.buttonRadius}: 0.75rem; ${paginationTokens.paginationIconSize}: 1.05rem; ${paginationTokens.paginationIconDoubleSize}: 1.3rem; + ${paginationTokens.buttonArrowMargin}: 0 -0.125rem 0 0.375rem; - ${paginationTokens.selectWidth}: 100%; ${paginationTokens.selectHeight}: auto; ${paginationTokens.selectPaddingTop}: 0.125rem; ${paginationTokens.selectPaddingRight}: 0.125rem; ${paginationTokens.selectPaddingBottom}: 0.125rem; ${paginationTokens.selectPaddingLeft}: 0.125rem; - ${paginationTokens.selectItemWidth}: auto; ${paginationTokens.selectItemHeight}: 1.5rem; - ${paginationTokens.selectItemPaddingTop}: 0.75rem; - ${paginationTokens.selectItemPaddingRight}: 0.75rem; - ${paginationTokens.selectItemPaddingBottom}: 0.75rem; - ${paginationTokens.selectItemPaddingLeft}: 0.75rem; + ${paginationTokens.selectItemPadding}: 0.75rem 0.75rem 0.75rem 0.75rem; ${paginationTokens.selectItemContentLeftWidth}: 1.75rem; ${paginationTokens.selectItemBackground}: transparent; ${paginationTokens.selectTargetArrowRight}: 0.875rem; - ${paginationTokens.selectTargetWidth}: 100%; - ${paginationTokens.selectTargetPadding}: 0 3.25rem 0 1.25rem; - ${paginationTokens.selectTargetPaddingHasChips}: 0 3.375rem 0 0.375rem; - ${paginationTokens.selectTargetPaddingWithInput}: 0 3.375rem 0 0.625rem; + ${paginationTokens.selectTargetPadding}: 1.25rem 0 1.25rem; ${paginationTokens.selectTargetInnerTop}: 0.5rem; ${paginationTokens.selectTargetLabelInnerTop}: 0.375rem; @@ -283,28 +265,21 @@ export const config = { ${paginationTokens.buttonRadius}: 0.625rem; ${paginationTokens.paginationIconSize}: 0.9rem; ${paginationTokens.paginationIconDoubleSize}: 1.15rem; + ${paginationTokens.buttonArrowMargin}: 0 -0.125rem 0 0.25rem; - ${paginationTokens.selectWidth}: 100%; ${paginationTokens.selectHeight}: auto; ${paginationTokens.selectPaddingTop}: 0.125rem; ${paginationTokens.selectPaddingRight}: 0.125rem; ${paginationTokens.selectPaddingBottom}: 0.125rem; ${paginationTokens.selectPaddingLeft}: 0.125rem; - ${paginationTokens.selectItemWidth}: auto; ${paginationTokens.selectItemHeight}: 1.5rem; - ${paginationTokens.selectItemPaddingTop}: 0.5rem; - ${paginationTokens.selectItemPaddingRight}: 0.75rem; - ${paginationTokens.selectItemPaddingBottom}: 0.5rem; - ${paginationTokens.selectItemPaddingLeft}: 0.75rem; + ${paginationTokens.selectItemPadding}: 0.5rem 0.75rem 0.5rem 0.75rem; ${paginationTokens.selectItemContentLeftWidth}: 1.75rem; ${paginationTokens.selectItemBackground}: transparent; ${paginationTokens.selectTargetArrowRight}: 0.75rem; - ${paginationTokens.selectTargetWidth}: 100%; - ${paginationTokens.selectTargetPadding}: 0 3rem 0 1rem; - ${paginationTokens.selectTargetPaddingHasChips}: 0 3.125rem 0 0.375rem; - ${paginationTokens.selectTargetPaddingWithInput}: 0 3.125rem 0 0.625rem; + ${paginationTokens.selectTargetPadding}: 1rem 0 1rem; ${paginationTokens.selectTargetInnerTop}: 0.5rem; ${paginationTokens.selectTargetLabelInnerTop}: 0.375rem; @@ -329,28 +304,21 @@ export const config = { ${paginationTokens.buttonWidthShorter}: 1.5rem; ${paginationTokens.paginationIconSize}: 0.75rem; ${paginationTokens.paginationIconDoubleSize}: 1rem; + ${paginationTokens.buttonArrowMargin}: 0 -0.125rem 0 0.25rem; - ${paginationTokens.selectWidth}: 100%; ${paginationTokens.selectHeight}: auto; ${paginationTokens.selectPaddingTop}: 0.125rem; ${paginationTokens.selectPaddingRight}: 0.125rem; ${paginationTokens.selectPaddingBottom}: 0.125rem; ${paginationTokens.selectPaddingLeft}: 0.125rem; - ${paginationTokens.selectItemWidth}: auto; ${paginationTokens.selectItemHeight}: 1rem; - ${paginationTokens.selectItemPaddingTop}: 0.5rem; - ${paginationTokens.selectItemPaddingRight}: 0.5rem; - ${paginationTokens.selectItemPaddingBottom}: 0.5rem; - ${paginationTokens.selectItemPaddingLeft}: 0.5rem; + ${paginationTokens.selectItemPadding}: 0.5rem 0.5rem 0.5rem 0.5rem; ${paginationTokens.selectItemContentLeftWidth}: 1.25rem; ${paginationTokens.selectItemBackground}: transparent; ${paginationTokens.selectTargetArrowRight}: 0.5rem; - ${paginationTokens.selectTargetWidth}: 100%; - ${paginationTokens.selectTargetPadding}: 0 2.5rem 0 0.75rem; - ${paginationTokens.selectTargetPaddingHasChips}: 0 2.625rem 0 0.375rem; - ${paginationTokens.selectTargetPaddingWithInput}: 0 2.625rem 0 0.625rem; + ${paginationTokens.selectTargetPadding}: 0.75rem 0 0.75rem; ${paginationTokens.selectTargetInnerTop}: 0.5rem; ${paginationTokens.selectTargetLabelInnerTop}: 0.375rem; diff --git a/packages/plasma-web/src/components/Portal/Portal.stories.tsx b/packages/plasma-web/src/components/Portal/Portal.stories.tsx index 73b9db5f28..b2ae0c884c 100644 --- a/packages/plasma-web/src/components/Portal/Portal.stories.tsx +++ b/packages/plasma-web/src/components/Portal/Portal.stories.tsx @@ -7,7 +7,7 @@ import styled from 'styled-components'; import { Button } from '../Button/Button'; import { BodyM } from '../Typography'; -import { Portal } from './Portal'; +import { Portal } from '.'; const meta: Meta = { title: 'Controls/Portal', diff --git a/packages/plasma-web/src/components/Portal/Portal.tsx b/packages/plasma-web/src/components/Portal/Portal.tsx deleted file mode 100644 index 60ea33d97a..0000000000 --- a/packages/plasma-web/src/components/Portal/Portal.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import { portalConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components'; - -const mergedConfig = mergeConfig(portalConfig); -const PortalComponent = component(mergedConfig); - -/* - * Вспомогательный компонент. Используется в Popup, Popover. - * Представляет собой ReactDOM.createPortal() в форме компонента. - */ -export const Portal = PortalComponent; diff --git a/packages/plasma-web/src/components/Portal/index.ts b/packages/plasma-web/src/components/Portal/index.ts index 922be8e235..2818aae9fc 100644 --- a/packages/plasma-web/src/components/Portal/index.ts +++ b/packages/plasma-web/src/components/Portal/index.ts @@ -1,3 +1,3 @@ -export { Portal } from './Portal'; +export { Portal } from '@salutejs/plasma-new-hope/styled-components'; export type { PortalProps } from '@salutejs/plasma-new-hope/styled-components'; diff --git a/packages/plasma-web/src/components/Price/Price.component-test.tsx b/packages/plasma-web/src/components/Price/Price.component-test.tsx new file mode 100644 index 0000000000..e31c001cae --- /dev/null +++ b/packages/plasma-web/src/components/Price/Price.component-test.tsx @@ -0,0 +1,133 @@ +import { mount, CypressTestDecorator, getComponent, PadMe } from '@salutejs/plasma-cy-utils'; +import { standard as standardTypo } from '@salutejs/plasma-typo'; +import React, { FC, PropsWithChildren } from 'react'; +import { createGlobalStyle } from 'styled-components'; + +const StandardTypoStyle = createGlobalStyle(standardTypo); + +describe('plasma-web: Price', () => { + const Price = getComponent('Price'); + const BodyM = getComponent('BodyM'); + + const CypressTestDecoratorWithTypo: FC = ({ children }) => ( + + + {children} + + ); + + it('simple', () => { + mount( + + + 12345.67 + + , + ); + + cy.matchImageSnapshot(); + }); + + it('_locale', () => { + mount( + + + 12345.67 + + + + 12345.67 + + , + ); + + cy.matchImageSnapshot(); + }); + + it('_currency', () => { + mount( + + + 12345.67 + + + + 12345.67 + + + + 12345.67 + + + + 12345.67 + + , + ); + + cy.matchImageSnapshot(); + }); + + it('_stroked', () => { + mount( + + + 12345.67 + + , + ); + + cy.matchImageSnapshot(); + }); + + it('_minFraction', () => { + mount( + + + 12345.6789 + + , + ); + + cy.matchImageSnapshot(); + }); + + it('processing periodicity', () => { + mount( + + + 990 + + + + 1990 + + + + 2990 + + + + 3990 + + , + ); + + cy.matchImageSnapshot(); + }); + + it('handle two prices in a row', () => { + mount( + + + 99 + + 200 + + + , + ); + + cy.matchImageSnapshot(); + }); +}); diff --git a/packages/plasma-web/src/components/Price/Price.config.ts b/packages/plasma-web/src/components/Price/Price.config.ts new file mode 100644 index 0000000000..5351ba7197 --- /dev/null +++ b/packages/plasma-web/src/components/Price/Price.config.ts @@ -0,0 +1,8 @@ +export const config = { + defaults: { + view: 'default', + }, + variations: { + view: {}, + }, +}; diff --git a/packages/plasma-web/src/components/Price/Price.stories.tsx b/packages/plasma-web/src/components/Price/Price.stories.tsx index 0979f30ecf..405482fad3 100644 --- a/packages/plasma-web/src/components/Price/Price.stories.tsx +++ b/packages/plasma-web/src/components/Price/Price.stories.tsx @@ -1,17 +1,15 @@ -import React from 'react'; +import React, { ComponentProps } from 'react'; import type { StoryObj, Meta } from '@storybook/react'; -import { InSpacingDecorator, disableProps } from '@salutejs/plasma-sb-utils'; +import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils'; import { Price } from '.'; -import type { PriceProps } from '.'; -const meta: Meta = { +const meta: Meta = { title: 'Content/Price', - component: Price, decorators: [InSpacingDecorator], argTypes: { currency: { - options: ['rub', 'usd', 'eur'], + options: ['rub', 'usd', 'eur', 'inr'], control: { type: 'inline-radio', }, @@ -22,10 +20,13 @@ const meta: Meta = { export default meta; -export const Default: StoryObj = { +type StoryPriceProps = ComponentProps & { priceLabel: number }; + +export const Default: StoryObj = { args: { + locale: 'ru', currency: 'rub', - stroke: false, + stroked: false, minimumFractionDigits: 0, priceLabel: 12345.67, }, diff --git a/packages/plasma-web/src/components/Price/Price.ts b/packages/plasma-web/src/components/Price/Price.ts new file mode 100644 index 0000000000..ab9be36c78 --- /dev/null +++ b/packages/plasma-web/src/components/Price/Price.ts @@ -0,0 +1,11 @@ +import { priceConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components'; + +import { config } from './Price.config'; + +const mergedConfig = mergeConfig(priceConfig, config); +const PriceComponent = component(mergedConfig); + +/** + * Компонент для отображения цены / стоимости / суммы. + */ +export const Price = PriceComponent; diff --git a/packages/plasma-web/src/components/Price/PriceBase.component-test.tsx b/packages/plasma-web/src/components/Price/PriceBase.component-test.tsx deleted file mode 120000 index a98ba06df3..0000000000 --- a/packages/plasma-web/src/components/Price/PriceBase.component-test.tsx +++ /dev/null @@ -1 +0,0 @@ -../../../../plasma-core/src/components/Price/Price.component-test.tsx \ No newline at end of file diff --git a/packages/plasma-web/src/components/Price/index.ts b/packages/plasma-web/src/components/Price/index.ts index 6c38200e5f..2288a8714a 100644 --- a/packages/plasma-web/src/components/Price/index.ts +++ b/packages/plasma-web/src/components/Price/index.ts @@ -1,2 +1,2 @@ -export { Price } from '@salutejs/plasma-hope'; -export type { PriceProps } from '@salutejs/plasma-hope'; +export { Price } from './Price'; +export { priceClasses } from '@salutejs/plasma-new-hope/styled-components'; diff --git a/packages/plasma-web/src/components/Select/Select.config.ts b/packages/plasma-web/src/components/Select/Select.config.ts deleted file mode 100644 index e95cc5cc11..0000000000 --- a/packages/plasma-web/src/components/Select/Select.config.ts +++ /dev/null @@ -1,338 +0,0 @@ -import { css, selectTokens } from '@salutejs/plasma-new-hope/styled-components'; - -export const config = { - defaults: { - target: 'button-like', - view: 'default', - size: 'm', - }, - variations: { - target: { - 'textField-like': css` - ${selectTokens.targetColor}: var(--text-primary); - ${selectTokens.targetLabelColor}: var(--text-secondary); - ${selectTokens.targetArrowColor}: var(--text-secondary); - ${selectTokens.targetBackgroundColor}: var(--surface-transparent-primary); - ${selectTokens.targetBackgroundColorHover}: var(--surface-transparent-primary-hover); - ${selectTokens.targetBackgroundColorActive}: var(--surface-transparent-primary-active); - ${selectTokens.targetBackgroundColorOpen}: var(--surface-transparent-secondary); - `, - 'button-like': css` - ${selectTokens.targetColor}: var(--text-primary); - ${selectTokens.targetLabelColor}: var(--text-primary); - ${selectTokens.targetArrowColor}: var(--text-secondary); - ${selectTokens.targetBackgroundColor}: var(--surface-transparent-secondary); - ${selectTokens.targetBackgroundColorHover}: var(--surface-transparent-secondary-hover); - ${selectTokens.targetBackgroundColorActive}: var(--surface-transparent-secondary-active); - ${selectTokens.targetBackgroundColorOpen}: var(--surface-transparent-secondary); - ${selectTokens.targetFontWeight}: 600 !important; /* TODO: Переделать когда появится возможность пересечения свойств */ - `, - }, - size: { - xs: css` - ${selectTokens.width}: 100%; - ${selectTokens.height}: auto; - ${selectTokens.borderRadius}: 0.5rem; - ${selectTokens.paddingTop}: 0.125rem; - ${selectTokens.paddingRight}: 0.125rem; - ${selectTokens.paddingBottom}: 0.125rem; - ${selectTokens.paddingLeft}: 0.125rem; - - ${selectTokens.dividerColor}: var(--surface-transparent-tertiary); - ${selectTokens.dividerHeight}: 0.063rem; - ${selectTokens.dividerMarginTop}: 0; - ${selectTokens.dividerMarginRight}: 0.5rem; - ${selectTokens.dividerMarginBottom}: 0; - ${selectTokens.dividerMarginLeft}: 0.375rem; - - ${selectTokens.itemWidth}: auto; - ${selectTokens.itemHeight}: 1rem; - ${selectTokens.itemPaddingTop}: 0.5rem; - ${selectTokens.itemPaddingRight}: 0.5rem; - ${selectTokens.itemPaddingBottom}: 0.5rem; - ${selectTokens.itemPaddingLeft}: 0.375rem; - ${selectTokens.itemBorderRadius}: 0.375rem; - ${selectTokens.itemContentLeftWidth}: 1.25rem; - ${selectTokens.itemFontFamily}: var(--plasma-typo-body-xs-font-family); - ${selectTokens.itemFontSize}: var(--plasma-typo-body-xs-font-size); - ${selectTokens.itemFontStyle}: var(--plasma-typo-body-xs-font-style); - ${selectTokens.itemFontWeightBold}: var(--plasma-typo-body-xs-font-weight); - ${selectTokens.itemFontLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${selectTokens.itemFontLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${selectTokens.chipGap}: 0.25rem; - ${selectTokens.chipBorderRadius}: 0.125rem; - ${selectTokens.chipWidth}: auto; - ${selectTokens.chipHeight}: 1.25rem; - ${selectTokens.chipPaddingRight}: 0.375rem; - ${selectTokens.chipPaddingLeft}: 0.625rem; - ${selectTokens.chipClearContentMarginLeft}: 0.25rem; - ${selectTokens.chipClearContentMarginRight}: 0rem; - ${selectTokens.chipCloseIconSize}: 0.75rem; - ${selectTokens.chipFontFamily}: var(--plasma-typo-body-xs-font-family); - ${selectTokens.chipFontSize}: var(--plasma-typo-body-xs-font-size); - ${selectTokens.chipFontStyle}: var(--plasma-typo-body-xs-font-style); - ${selectTokens.chipFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${selectTokens.chipLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${selectTokens.chipLineHeight}: var(--plasma-typo-body-xs-line-height); - - ${selectTokens.targetArrowRight}: 0.5rem; - ${selectTokens.targetHeight}: 2rem; - ${selectTokens.targetWidth}: 100%; - ${selectTokens.targetRadius}: 0.5rem; - ${selectTokens.targetPadding}: 0 2.5rem 0 0.75rem; - ${selectTokens.targetPaddingHasChips}: 0 2.625rem 0 0.375rem; - ${selectTokens.targetPaddingWithInput}: 0 2.625rem 0 0.625rem; - ${selectTokens.targetInnerTop}: 0.5rem; - ${selectTokens.targetLabelInnerTop}: 0.375rem; - ${selectTokens.targetFontFamily}: var(--plasma-typo-body-xs-font-family); - ${selectTokens.targetFontSize}: var(--plasma-typo-body-xs-font-size); - ${selectTokens.targetFontStyle}: var(--plasma-typo-body-xs-font-style); - ${selectTokens.targetFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${selectTokens.targetLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${selectTokens.targetLineHeight}: var(--plasma-typo-body-xs-line-height); - ${selectTokens.targetLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${selectTokens.targetLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${selectTokens.targetLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${selectTokens.targetLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${selectTokens.targetLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${selectTokens.targetLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - `, - s: css` - ${selectTokens.width}: 100%; - ${selectTokens.height}: auto; - ${selectTokens.borderRadius}: 0.625rem; - ${selectTokens.paddingTop}: 0.125rem; - ${selectTokens.paddingRight}: 0.125rem; - ${selectTokens.paddingBottom}: 0.125rem; - ${selectTokens.paddingLeft}: 0.125rem; - - ${selectTokens.dividerColor}: var(--surface-transparent-tertiary); - ${selectTokens.dividerHeight}: 0.063rem; - ${selectTokens.dividerMarginTop}: 0; - ${selectTokens.dividerMarginRight}: 0.75rem; - ${selectTokens.dividerMarginBottom}: 0; - ${selectTokens.dividerMarginLeft}: 0.75rem; - - ${selectTokens.itemWidth}: auto; - ${selectTokens.itemHeight}: 1.5rem; - ${selectTokens.itemPaddingTop}: 0.5rem; - ${selectTokens.itemPaddingRight}: 0.75rem; - ${selectTokens.itemPaddingBottom}: 0.5rem; - ${selectTokens.itemPaddingLeft}: 0.75rem; - ${selectTokens.itemBorderRadius}: 0.5rem; - ${selectTokens.itemContentLeftWidth}: 1.75rem; - ${selectTokens.itemFontFamily}: var(--plasma-typo-body-s-font-family); - ${selectTokens.itemFontSize}: var(--plasma-typo-body-s-font-size); - ${selectTokens.itemFontStyle}: var(--plasma-typo-body-s-font-style); - ${selectTokens.itemFontWeightBold}: var(--plasma-typo-body-s-font-weight); - ${selectTokens.itemFontLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${selectTokens.itemFontLineHeight}: var(--plasma-typo-body-s-line-height); - - ${selectTokens.chipGap}: 0.25rem; - ${selectTokens.chipBorderRadius}: 0.25rem; - ${selectTokens.chipWidth}: auto; - ${selectTokens.chipHeight}: 1.75rem; - ${selectTokens.chipPaddingRight}: 0.5rem; - ${selectTokens.chipPaddingLeft}: 0.75rem; - ${selectTokens.chipClearContentMarginLeft}: 0.375rem; - ${selectTokens.chipClearContentMarginRight}: 0rem; - ${selectTokens.chipCloseIconSize}: 0.75rem; - ${selectTokens.chipFontFamily}: var(--plasma-typo-body-s-font-family); - ${selectTokens.chipFontSize}: var(--plasma-typo-body-s-font-size); - ${selectTokens.chipFontStyle}: var(--plasma-typo-body-s-font-style); - ${selectTokens.chipFontWeight}: var(--plasma-typo-body-s-font-weight); - ${selectTokens.chipLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${selectTokens.chipLineHeight}: var(--plasma-typo-body-s-line-height); - - ${selectTokens.targetArrowRight}: 0.75rem; - ${selectTokens.targetHeight}: 2.5rem; - ${selectTokens.targetWidth}: 100%; - ${selectTokens.targetRadius}: 0.625rem; - ${selectTokens.targetPadding}: 0 3rem 0 1rem; - ${selectTokens.targetPaddingHasChips}: 0 3.125rem 0 0.375rem; - ${selectTokens.targetPaddingWithInput}: 0 3.125rem 0 0.625rem; - ${selectTokens.targetInnerTop}: 0.5rem; - ${selectTokens.targetLabelInnerTop}: 0.375rem; - ${selectTokens.targetFontFamily}: var(--plasma-typo-body-s-font-family); - ${selectTokens.targetFontSize}: var(--plasma-typo-body-s-font-size); - ${selectTokens.targetFontStyle}: var(--plasma-typo-body-s-font-style); - ${selectTokens.targetFontWeight}: var(--plasma-typo-body-s-font-weight); - ${selectTokens.targetLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${selectTokens.targetLineHeight}: var(--plasma-typo-body-s-line-height); - ${selectTokens.targetLabelInnerFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${selectTokens.targetLabelInnerFontSize}: var(--plasma-typo-body-xxs-font-size); - ${selectTokens.targetLabelInnerFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${selectTokens.targetLabelInnerFontWeight}: var(--plasma-typo-body-xxs-font-weight); - ${selectTokens.targetLabelInnerLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${selectTokens.targetLabelInnerLineHeight}: var(--plasma-typo-body-xxs-line-height); - `, - m: css` - ${selectTokens.width}: 100%; - ${selectTokens.height}: auto; - ${selectTokens.borderRadius}: 0.75rem; - ${selectTokens.paddingTop}: 0.125rem; - ${selectTokens.paddingRight}: 0.125rem; - ${selectTokens.paddingBottom}: 0.125rem; - ${selectTokens.paddingLeft}: 0.125rem; - - ${selectTokens.dividerColor}: var(--surface-transparent-tertiary); - ${selectTokens.dividerHeight}: 0.063rem; - ${selectTokens.dividerMarginTop}: 0; - ${selectTokens.dividerMarginRight}: 0.875rem; - ${selectTokens.dividerMarginBottom}: 0; - ${selectTokens.dividerMarginLeft}: 0.875rem; - - ${selectTokens.itemWidth}: auto; - ${selectTokens.itemHeight}: 1.5rem; - ${selectTokens.itemPaddingTop}: 0.75rem; - ${selectTokens.itemPaddingRight}: 0.875rem; - ${selectTokens.itemPaddingBottom}: 0.75rem; - ${selectTokens.itemPaddingLeft}: 0.875rem; - ${selectTokens.itemBorderRadius}: 0.625rem; - ${selectTokens.itemContentLeftWidth}: 1.75rem; - ${selectTokens.itemFontFamily}: var(--plasma-typo-body-m-font-family); - ${selectTokens.itemFontSize}: var(--plasma-typo-body-m-font-size); - ${selectTokens.itemFontStyle}: var(--plasma-typo-body-m-font-style); - ${selectTokens.itemFontWeightBold}: var(--plasma-typo-body-m-font-weight); - ${selectTokens.itemFontLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${selectTokens.itemFontLineHeight}: var(--plasma-typo-body-m-line-height); - - ${selectTokens.chipGap}: 0.25rem; - ${selectTokens.chipBorderRadius}: 0.375rem; - ${selectTokens.chipWidth}: auto; - ${selectTokens.chipHeight}: 2.25rem; - ${selectTokens.chipPaddingRight}: 0.875rem; - ${selectTokens.chipPaddingLeft}: 0.625rem; - ${selectTokens.chipClearContentMarginLeft}: 0.5rem; - ${selectTokens.chipClearContentMarginRight}: 0rem; - ${selectTokens.chipCloseIconSize}: 1rem; - ${selectTokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${selectTokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${selectTokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${selectTokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${selectTokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${selectTokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); - - ${selectTokens.targetArrowRight}: 0.875rem; - ${selectTokens.targetHeight}: 3rem; - ${selectTokens.targetWidth}: 100%; - ${selectTokens.targetRadius}: 0.75rem; - ${selectTokens.targetPadding}: 0 3.25rem 0 1.25rem; - ${selectTokens.targetPaddingHasChips}: 0 3.375rem 0 0.375rem; - ${selectTokens.targetPaddingWithInput}: 0 3.375rem 0 0.625rem; - ${selectTokens.targetInnerTop}: 0.5rem; - ${selectTokens.targetLabelInnerTop}: 0.375rem; - ${selectTokens.targetFontFamily}: var(--plasma-typo-body-m-font-family); - ${selectTokens.targetFontSize}: var(--plasma-typo-body-m-font-size); - ${selectTokens.targetFontStyle}: var(--plasma-typo-body-m-font-style); - ${selectTokens.targetFontWeight}: var(--plasma-typo-body-m-font-weight); - ${selectTokens.targetLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${selectTokens.targetLineHeight}: var(--plasma-typo-body-m-line-height); - ${selectTokens.targetLabelInnerFontFamily}: var(--plasma-typo-body-xs-font-family); - ${selectTokens.targetLabelInnerFontSize}: var(--plasma-typo-body-xs-font-size); - ${selectTokens.targetLabelInnerFontStyle}: var(--plasma-typo-body-xs-font-style); - ${selectTokens.targetLabelInnerFontWeight}: var(--plasma-typo-body-xs-font-weight); - ${selectTokens.targetLabelInnerLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); - ${selectTokens.targetLabelInnerLineHeight}: var(--plasma-typo-body-xs-line-height); - `, - l: css` - ${selectTokens.width}: 100%; - ${selectTokens.height}: auto; - ${selectTokens.borderRadius}: 0.875rem; - ${selectTokens.paddingTop}: 0.125rem; - ${selectTokens.paddingRight}: 0.125rem; - ${selectTokens.paddingBottom}: 0.125rem; - ${selectTokens.paddingLeft}: 0.125rem; - - ${selectTokens.dividerColor}: var(--surface-transparent-tertiary); - ${selectTokens.dividerHeight}: 0.063rem; - ${selectTokens.dividerMarginTop}: 0; - ${selectTokens.dividerMarginRight}: 1rem; - ${selectTokens.dividerMarginBottom}: 0; - ${selectTokens.dividerMarginLeft}: 1rem; - - ${selectTokens.itemWidth}: auto; - ${selectTokens.itemHeight}: 1.5rem; - ${selectTokens.itemPaddingTop}: 1rem; - ${selectTokens.itemPaddingRight}: 1rem; - ${selectTokens.itemPaddingBottom}: 1rem; - ${selectTokens.itemPaddingLeft}: 1rem; - ${selectTokens.itemBorderRadius}: 0.75rem; - ${selectTokens.itemContentLeftWidth}: 1.875rem; - ${selectTokens.itemFontFamily}: var(--plasma-typo-body-l-font-family); - ${selectTokens.itemFontSize}: var(--plasma-typo-body-l-font-size); - ${selectTokens.itemFontStyle}: var(--plasma-typo-body-l-font-style); - ${selectTokens.itemFontWeightBold}: var(--plasma-typo-body-l-font-weight); - ${selectTokens.itemFontLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${selectTokens.itemFontLineHeight}: var(--plasma-typo-body-l-line-height); - - ${selectTokens.chipGap}: 0.25rem; - ${selectTokens.chipBorderRadius}: 0.5rem; - ${selectTokens.chipWidth}: auto; - ${selectTokens.chipHeight}: 2.75rem; - ${selectTokens.chipPaddingRight}: 0.75rem; - ${selectTokens.chipPaddingLeft}: 1rem; - ${selectTokens.chipClearContentMarginLeft}: 0.625rem; - ${selectTokens.chipClearContentMarginRight}: 0rem; - ${selectTokens.chipCloseIconSize}: 1rem; - ${selectTokens.chipFontFamily}: var(--plasma-typo-body-m-font-family); - ${selectTokens.chipFontSize}: var(--plasma-typo-body-m-font-size); - ${selectTokens.chipFontStyle}: var(--plasma-typo-body-m-font-style); - ${selectTokens.chipFontWeight}: var(--plasma-typo-body-m-font-weight); - ${selectTokens.chipLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); - ${selectTokens.chipLineHeight}: var(--plasma-typo-body-m-line-height); - - ${selectTokens.targetArrowRight}: 1rem; - ${selectTokens.targetHeight}: 3.5rem; - ${selectTokens.targetWidth}: 100%; - ${selectTokens.targetRadius}: 0.875rem; - ${selectTokens.targetPadding}: 0 3.5rem 0 1.5rem; - ${selectTokens.targetPaddingHasChips}: 0 3.625rem 0 0.375rem; - ${selectTokens.targetPaddingWithInput}: 0 3.625rem 0 0.625rem; - ${selectTokens.targetInnerTop}: 0.5rem; - ${selectTokens.targetLabelInnerTop}: 0.375rem; - ${selectTokens.targetFontFamily}: var(--plasma-typo-body-l-font-family); - ${selectTokens.targetFontSize}: var(--plasma-typo-body-l-font-size); - ${selectTokens.targetFontStyle}: var(--plasma-typo-body-l-font-style); - ${selectTokens.targetFontWeight}: var(--plasma-typo-body-l-font-weight); - ${selectTokens.targetLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); - ${selectTokens.targetLineHeight}: var(--plasma-typo-body-l-line-height); - ${selectTokens.targetLabelInnerFontFamily}: var(--plasma-typo-body-s-font-family); - ${selectTokens.targetLabelInnerFontSize}: var(--plasma-typo-body-s-font-size); - ${selectTokens.targetLabelInnerFontStyle}: var(--plasma-typo-body-s-font-style); - ${selectTokens.targetLabelInnerFontWeight}: var(--plasma-typo-body-s-font-weight); - ${selectTokens.targetLabelInnerLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); - ${selectTokens.targetLabelInnerLineHeight}: var(--plasma-typo-body-s-line-height); - `, - }, - view: { - default: css` - ${selectTokens.background}: var(--surface-solid-card); - ${selectTokens.boxShadow}: var(--shadow-down-soft-s); - - ${selectTokens.itemBackground}: var(--plasma-colors-transparent); - ${selectTokens.itemBackgroundHover}: var(--surface-transparent-secondary); - ${selectTokens.itemBackgroundSelectedHover}: var(--surface-transparent-secondary); - ${selectTokens.itemColor}: var(--text-primary); - ${selectTokens.itemContentLeftColor}: var(--text-accent); - - ${selectTokens.chipCloseIconColor}: var(--text-secondary); - ${selectTokens.chipColor}: var(--text-primary); - ${selectTokens.chipBackground}: var(--surface-transparent-secondary); - ${selectTokens.chipColorHover}: var(--text-primary); - ${selectTokens.chipBackgroundHover}: var(--surface-transparent-secondary-hover); - ${selectTokens.chipColorActive}: var(--text-primary); - ${selectTokens.chipBackgroundActive}: var(--surface-transparent-secondary-active); - ${selectTokens.chipBackgroundReadOnly}: var(--surface-transparent-secondary); - ${selectTokens.chipColorReadOnly}: var(--text-primary); - ${selectTokens.chipBackgroundReadOnlyHover}: var(--surface-transparent-secondary); - ${selectTokens.chipColorReadOnlyHover}: var(--text-primary); - ${selectTokens.chipOpacityReadonly}: 0.72; - - ${selectTokens.disabledOpacity}: 0.4; - ${selectTokens.focusColor}: var(--surface-accent); - `, - }, - }, -}; diff --git a/packages/plasma-web/src/components/Select/Select.tsx b/packages/plasma-web/src/components/Select/Select.tsx index 36ee08d21a..c8ac5a4769 100644 --- a/packages/plasma-web/src/components/Select/Select.tsx +++ b/packages/plasma-web/src/components/Select/Select.tsx @@ -1,134 +1,3 @@ -// import React, { forwardRef, CSSProperties, Ref } from 'react'; -// import type { SelectProps, SelectRefElement } from '@salutejs/plasma-hope'; -// import { -// selectConfig, -// component, -// mergeConfig, -// selectItemConfig, -// cx, -// popoverClasses, -// } from '@salutejs/plasma-new-hope/styled-components'; -// import { IconDone } from '@salutejs/plasma-icons'; -// import styled from 'styled-components'; -// -// import { Checkbox } from '../Checkbox'; -// -// import { config } from './Select.config'; - -// const mergedConfig = mergeConfig(selectConfig, config); -// export const SelectComponent = component(mergedConfig); -// -// const mergedItemConfig = mergeConfig(selectItemConfig); -// export const SelectItem = component(mergedItemConfig); -// -// const getColor = (status?: SelectProps['status']): string => { -// switch (status) { -// case 'success': -// return '--text-positive'; -// case 'warning': -// return '--text-warning'; -// case 'error': -// return '--text-negative'; -// default: -// return '--text-secondary'; -// } -// }; -// -// const HelperText = styled.div<{ status?: SelectProps['status'] }>` -// color: ${({ status }) => `var(${getColor(status)})`}; -// margin-top: 0.25rem; -// font-family: var(--plasma-typo-body-xs-font-family), sans-serif; -// font-size: var(--plasma-typo-body-xs-font-size); -// font-style: var(--plasma-typo-body-xs-font-style); -// font-weight: var(--plasma-typo-body-xs-font-weight); -// letter-spacing: var(--plasma-typo-body-xs-letter-spacing); -// line-height: var(--plasma-typo-body-xs-line-height); -// `; -// -// const SelectWrapper = styled.div<{ -// listHeight?: number | CSSProperties['height']; -// }>` -// width: 100%; -// -// & .select-height { -// --plasma-select-height: ${({ listHeight }) => -// Number.isNaN(Number(listHeight)) ? listHeight : `${listHeight}rem`}; -// } -// `; -// -// /** -// * Выпадающий список для использования в формах. -// * Поддерживает выбор одного или нескольких значений. -// */ -// export const Select = forwardRef( -// ( -// { -// value, -// items, -// onChange, -// multiselect, -// separator, -// status, -// placeholder, -// helperText, -// disabled, -// onItemSelect, -// isOpen, -// listHeight, -// listOverflow, -// className, -// ...rest -// }, -// ref, -// ) => { -// const handleItemSelect: SelectProps['onItemSelect'] = (item, e) => { -// if (onItemSelect) { -// onItemSelect(item, e); -// } -// }; -// -// return ( -// -// } -// className={cx(className, 'select-height')} -// > -// {items.map((item) => ( -// handleItemSelect(item, e)} -// disabled={item.isDisabled} -// contentLeft={ -// // eslint-disable-next-line no-nested-ternary -// multiselect ? ( -// -// ) : item.value === value ? ( -// -// ) : undefined -// } -// /> -// ))} -// -// -// {/* TODO: #1153 */} -// {helperText && {helperText}} -// -// ); -// }, -// ); - import React, { forwardRef } from 'react'; import { Select as SelectHope } from '@salutejs/plasma-hope'; import type { SelectProps, SelectRefElement } from '@salutejs/plasma-hope'; diff --git a/packages/plasma-web/src/components/SelectNew/Select.component-test.tsx b/packages/plasma-web/src/components/SelectNew/Select.component-test.tsx new file mode 100644 index 0000000000..957306f242 --- /dev/null +++ b/packages/plasma-web/src/components/SelectNew/Select.component-test.tsx @@ -0,0 +1,934 @@ +import React from 'react'; +import type { FC, PropsWithChildren } from 'react'; +import { IconLocation } from '@salutejs/plasma-icons'; +import { mount, CypressTestDecorator, getComponent } from '@salutejs/plasma-cy-utils'; +import { createGlobalStyle } from 'styled-components'; +import { standard as standardTypo } from '@salutejs/plasma-typo'; + +const items = [ + { + value: 'north_america', + label: 'Северная Америка', + contentLeft: , + contentRight: , + }, + { + value: 'south_america', + label: 'Южная Америка', + items: [ + { + value: 'brazil', + label: 'Бразилия', + items: [ + { + value: 'rio_de_janeiro', + label: 'Рио-де-Жанейро', + }, + { + value: 'sao_paulo', + label: 'Сан-Паулу', + }, + ], + }, + { + value: 'argentina', + label: 'Аргентина', + items: [ + { + value: 'buenos_aires', + label: 'Буэнос-Айрес', + }, + { + value: 'cordoba', + label: 'Кордова', + }, + ], + }, + { + value: 'colombia', + label: 'Колумбия', + items: [ + { + value: 'bogota', + label: 'Богота', + }, + { + value: 'medellin', + label: 'Медельин', + }, + ], + }, + ], + }, + { + value: 'europe', + label: 'Европа', + items: [ + { + value: 'france', + label: 'Франция', + items: [ + { + value: 'paris', + label: 'Париж', + }, + { + value: 'lyon', + label: 'Лион', + }, + ], + }, + { + value: 'germany', + label: 'Германия', + items: [ + { + value: 'berlin', + label: 'Берлин', + }, + { + value: 'munich', + label: 'Мюнхен', + }, + ], + }, + { + value: 'italy', + label: 'Италия', + items: [ + { + value: 'rome', + label: 'Рим', + }, + { + value: 'milan', + label: 'Милан', + }, + ], + }, + { + value: 'spain', + label: 'Испания', + items: [ + { + value: 'madrid', + label: 'Мадрид', + }, + { + value: 'barcelona', + label: 'Барселона', + }, + ], + }, + { + value: 'united_kingdom', + label: 'Великобритания', + items: [ + { + value: 'london', + label: 'Лондон', + }, + { + value: 'manchester', + label: 'Манчестер', + }, + ], + }, + ], + }, + { + value: 'asia', + label: 'Азия', + items: [ + { + value: 'china', + label: 'Китай', + items: [ + { + value: 'beijing', + label: 'Пекин', + }, + { + value: 'shanghai', + label: 'Шанхай', + }, + ], + }, + { + value: 'japan', + label: 'Япония', + items: [ + { + value: 'tokyo', + label: 'Токио', + }, + { + value: 'osaka', + label: 'Осака', + }, + ], + }, + { + value: 'india', + label: 'Индия', + items: [ + { + value: 'delhi', + label: 'Дели', + }, + { + value: 'mumbai', + label: 'Мумбаи', + }, + ], + }, + { + value: 'south_korea', + label: 'Южная Корея', + items: [ + { + value: 'seoul', + label: 'Сеул', + }, + { + value: 'busan', + label: 'Пусан', + }, + ], + }, + { + value: 'thailand', + label: 'Таиланд', + items: [ + { + value: 'bangkok', + label: 'Бангкок', + }, + { + value: 'phuket', + label: 'Пхукет', + }, + ], + }, + ], + }, + { + value: 'africa', + label: 'Африка', + disabled: true, + }, +]; + +const StandardTypoStyle = createGlobalStyle(standardTypo); + +describe('plasma-web: SelectNew', () => { + const Select = getComponent('SelectNew'); + + const CypressTestDecoratorWithTypo: FC = ({ children }) => ( + + + {children} + + ); + + const CommonComponent = (props: any) => { + const [singleValue, setSingleValue] = React.useState(props.initialSingleValue || ''); + const [valueMultiple, setValueMultiple] = React.useState>(props.initialMultipleValue || []); + + return ( + +
+ + + + +
+
+ + +
+
+ + +
+
+ + + + + + + + + + + +
+
+ + +
+
+ + +
+
+
+ + ); + }; + + it('default', () => { + cy.viewport(1000, 1000); + + mount(); + + cy.matchImageSnapshot(); + }); + + it('prop: size l', () => { + cy.viewport(1000, 1200); + + mount(); + + cy.matchImageSnapshot(); + }); + + it('prop: size m', () => { + cy.viewport(1000, 1000); + + mount(); + + cy.matchImageSnapshot(); + }); + + it('prop: size s', () => { + cy.viewport(1000, 1000); + + mount(); + + cy.matchImageSnapshot(); + }); + + it('prop: size xs', () => { + cy.viewport(1000, 1000); + + mount(); + + cy.matchImageSnapshot(); + }); + + it('prop: size xs', () => { + cy.viewport(1000, 1000); + + mount(); + + cy.matchImageSnapshot(); + }); + + it('prop: labelPlacement', () => { + cy.viewport(1000, 1000); + + mount( + , + ); + + cy.matchImageSnapshot(); + }); + + it('prop: chipView secondary', () => { + cy.viewport(1000, 1000); + + mount( + , + ); + + cy.matchImageSnapshot(); + }); + + it('prop: chipView accent', () => { + cy.viewport(1000, 1000); + + mount( + , + ); + + cy.matchImageSnapshot(); + }); + + it('prop: contentLeft', () => { + cy.viewport(1000, 1000); + + mount( + } + />, + ); + + cy.matchImageSnapshot(); + }); + + it('prop: isTargetAmount', () => { + cy.viewport(1000, 1000); + + mount(); + + cy.matchImageSnapshot(); + }); + + it('basic logic', () => { + cy.viewport(1000, 500); + + const Component = () => { + const [valueSingle, setValueSingle] = React.useState('paris'); + const [valueMultiple, setValueMultiple] = React.useState(['paris', 'lyon']); + + return ( + +
+ +
+ + ); + }; + + mount(); + + cy.get('#single').should('include.text', 'Париж'); + cy.get('#multiple').should('include.text', 'Париж').should('include.text', 'Лион'); + + cy.get('#single').realClick(); + cy.get('#single #europe').realClick(); + cy.get('#single #france').realClick(); + + cy.get('#single #paris').realClick(); + + cy.get('#single').realClick(); + + cy.get('#multiple').realClick(); + cy.get('#multiple #europe').realClick(); + cy.get('#multiple #france').realClick(); + + cy.get('#multiple #lyon .select-item-checkbox').realClick(); + + cy.get('#multiple #germany .select-item-checkbox').realClick(); + cy.get('#multiple #germany').realClick(); + + cy.matchImageSnapshot(); + }); + + it('keyboard interactions', () => { + cy.viewport(1000, 500); + + const Component = () => { + const [valueMultiple, setValueMultiple] = React.useState([]); + + return ( + +
+ : undefined} + /> +
+ ); +}; + +export const Single: StoryObj = { + render: (args) => , +}; + +const MultiselectStory = (args: StorySelectProps) => { + const [value, setValue] = useState>([]); + + return ( +
+ : undefined} + /> + +
+ + +
+ + +
+ : undefined} + /> +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ : undefined} + /> +
+ + +
+ +
+ + +
+ : undefined} + /> +
+ + +
+ +
+ + +
+ : undefined} + /> +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ : undefined} + /> +
+ ); +}; + +export const Single: StoryObj = { + render: (args) => , +}; + +const MultiselectStory = (args: StorySelectProps) => { + const [value, setValue] = useState>([]); + + return ( +
+ : undefined} + /> + +
+ + +
+ + +
+ : undefined} + /> +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ : undefined} + /> +
+ + +
+ +
+ + +
+ : undefined} + /> +
+ + +
+ +
+ + +
+ : undefined} + /> +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ : undefined} + /> +
+ ); +}; + +export const Single: StoryObj = { + render: (args) => , +}; + +const MultiselectStory = (args: StorySelectProps) => { + const [value, setValue] = useState>([]); + + return ( +
+ : undefined} + /> + +
+ + +
+ + +
+ : undefined} + /> +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ : undefined} + /> +
+ + +
+ +
+ + +
+ : undefined} + /> +
+ + +
+ +
+ + +
+ : undefined} + /> +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +
+ +
+ +
+ +
+ + +
+ ); + } + ``` + + + Пропс `renderValue` для кастомной настройки `value` внутри таргета. Принимает коллбэк с двумя параметрами: `value` и `label`. + + ```tsx live + import React from 'react'; + import { Select } from '@salutejs/sdds-dfa'; + + export function App() { + const [multipleValue, setMultipleValue] = useState([]); + + const items = [ + { + value: 'north_america', + label: 'Северная Америка', + }, + { + value: 'south_america', + label: 'Южная Америка', + items: [ + { + value: 'brazil', + label: 'Бразилия', + }, + { + value: 'argentina', + label: 'Аргентина', + }, + ], + }, + ]; + + const renderValue = (value, label) => { + return `${value} - ${label}` + } + + return ( +
+
+ +
+
+ ); + } + ``` + + + Иногда возникает необходимость вынесения выпадающего списка на уровни выше в DOM. К примеру, когда у родительского блока имеется скролл, и список будет обрезаться, чего хотелось бы избежать.\ + Для такой реализации имеется пропс `portal`, который принимает либо `ref` либо `id` html-тега.\ + Также нужно прокинуть проп `listWidth`, чтобы явно задать ширину списку. Если этого не сделать, то будет взята ширина 100% от блока, на который ведет ссылка портала. + + ```tsx live + import React, { useRef } from 'react'; + import { Select } from '@salutejs/sdds-dfa'; + + export function App() { + const [value, setValue] = useState(''); + + const items = [ + { + value: 'north_america', + label: 'Северная Америка', + }, + { + value: 'south_america', + label: 'Южная Америка', + items: [ + { + value: 'brazil', + label: 'Бразилия', + }, + { + value: 'argentina', + label: 'Аргентина', + }, + ], + }, + ]; + + const ref = useRef(null) + + return ( +
+
+ +
+
+ ); + } + ``` + + + +## Клавиатурная навигация + +Данный компонент соответствует требования W3C: [Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) и частично [TreeView](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/). + +- `Tab` - закрывает дропдаун. Перемещает фокус на следующий элемент на странице; +- `Enter` - открывает/закрывает дропдаун. Если на элементе - выбирает его. Если у элемента есть дочерний дропдаун - открывает его, выбор элемента не происходит; +- `Space` - открывает/закрывает дропдаун. Если на элементе - выбирает его и все дочерние элементы. +- `Home` - открывает дропдаун и перемещает фокус на первый элемент; +- `End` - открывает дропдаун и перемещает фокус на последний элемент; +- `PageUp` - перемещает фокус на 10 элементов выше либо в начало списка; +- `PageDown` - перемещает фокус на 10 элементов ниже либо в конце списка; +- `ArrowUp` - открывает дропдаун и перемещает фокус на первый элемент. Перемещает фокус на один элемент выше; +- `ArrowDown` - открывает дропдаун и перемещает фокус на первый элемент. Перемещает фокус на один элемент ниже; +- `ArrowRight` - если фокус на элементе вложенного списка - открывает его и перемещает фокус на первый элемент; Если фокус на таргете - переходит в режим выбора чипа. +- `ArrowLeft` - закрывает текущий список и перемещает фокус на предыдущий; Если фокус на таргете - переходит в режим выбора чипа. +- `Backspace` - только если фокус на чипе - снимает выбор с текущего значения; + diff --git a/website/sdds-dfa-docs/package.json b/website/sdds-dfa-docs/package.json index f35e0da160..f3e0d75345 100644 --- a/website/sdds-dfa-docs/package.json +++ b/website/sdds-dfa-docs/package.json @@ -1,6 +1,6 @@ { "name": "@salutejs/sdds-dfa-docs", - "version": "0.2.0", + "version": "0.9.0-dev.0", "description": "SDDS-DFA documentation", "author": "Salute Frontend Team ", "license": "MIT", @@ -30,11 +30,11 @@ "@docusaurus/preset-classic": "3.1.1", "@docusaurus/theme-live-codeblock": "3.1.1", "@mdx-js/react": "3.0.0", - "@salutejs/plasma-docs-ui": "0.262.0", + "@salutejs/plasma-docs-ui": "0.268.0-dev.0", "@salutejs/plasma-icons": "1.199.0", "@salutejs/plasma-typo": "0.40.0", - "@salutejs/sdds-dfa": "0.77.0", - "@salutejs/sdds-themes": "0.14.0", + "@salutejs/sdds-dfa": "0.84.0-dev.0", + "@salutejs/sdds-themes": "0.15.0-dev.0", "@svgr/webpack": "8.1.0", "clsx": "^1.1.1", "file-loader": "^6.2.0", @@ -68,4 +68,4 @@ "last 1 safari version" ] } -} +} \ No newline at end of file diff --git a/website/sdds-serv-docs/docs/components/Accordion.mdx b/website/sdds-serv-docs/docs/components/Accordion.mdx new file mode 100644 index 0000000000..2af65cbe26 --- /dev/null +++ b/website/sdds-serv-docs/docs/components/Accordion.mdx @@ -0,0 +1,235 @@ +--- +id: accordion +title: Accordion +--- + +import { PropsTable } from '@site/src/components'; +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +# Accordion +Компонент выпадающей информации + + +# AccordionItem +Компонент выпадающей информации + + +Компонент представляет собой заголовок и контент, который раскрывается при нажатии. + +## Примеры Accordion + + + + ```tsx live + import React from 'react'; + import { Accordion, AccordionItem } from '@salutejs/sdds-serv'; + + export function App() { + return ( +
+ + После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива + После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива + После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива + +
+ ); + } + ``` + + + ```tsx live + import React from 'react'; + import { Accordion, AccordionItem } from '@salutejs/sdds-serv'; + + export function App() { + return ( +
+
+ + После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива + После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива + После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива + +
+
+ + После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива + После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива + После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива + +
+
+ ); + } + ``` + + + ```tsx live + import React from 'react'; + import { Accordion, AccordionItem } from '@salutejs/sdds-serv'; + + export function App() { + return ( +
+
+ + После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива + После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива + После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива + +
+
+ + После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива + После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива + После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива + +
+
+ + После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива + После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива + После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива + +
+
+ + После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива + После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива + После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива + +
+
+ ); + } + ``` + + + ```tsx live + import React from 'react'; + import { Accordion, AccordionItem } from '@salutejs/sdds-serv'; + + export function App() { + return ( +
+
+ + После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива + После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива + После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива + +
+
+ + После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива + После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива + После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива + +
+
+ ); + } + ``` + + + +### Использование Accordion SingleActive + +```tsx live + import React from 'react'; + import { Accordion, AccordionItem } from '@salutejs/sdds-serv'; + + export function App() { + return ( +
+ + После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива + После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива + После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива + +
+ ); + } + ``` + +### Использование Accordion с eventKey и defaultActiveEventKey + +```tsx live + import React from 'react'; + import { Accordion, AccordionItem } from '@salutejs/sdds-serv'; + + export function App() { + return ( +
+ + После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива + После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива + После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива + +
+ ); + } + ``` + + +### Использование AccordionItem атрибута Type + + + + ```tsx live + import React from 'react'; + import { Accordion, AccordionItem } from '@salutejs/sdds-serv'; + + export function App() { + return ( +
+ + После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива + После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива + После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива + +
+ ); + } + ``` + + + ```tsx live + import React from 'react'; + import { Accordion, AccordionItem } from '@salutejs/sdds-serv'; + + export function App() { + return ( +
+ + После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива + После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива + После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива + +
+ ); + } + ``` + + + ```tsx live + import React from 'react'; + import { Accordion, AccordionItem } from '@salutejs/sdds-serv'; + + export function App() { + return ( +
+ + После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива + После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива + После указания деталей заправки нажмите кнопку «К оплате». Откроется окно оплаты, где вы сможете списать бонусы и оплатить ими до 99% стоимости топлива + +
+ ); + } + ``` + + + diff --git a/website/sdds-serv-docs/docs/components/Autocomplete.mdx b/website/sdds-serv-docs/docs/components/Autocomplete.mdx new file mode 100644 index 0000000000..8248d0a444 --- /dev/null +++ b/website/sdds-serv-docs/docs/components/Autocomplete.mdx @@ -0,0 +1,490 @@ +--- +id: autocomplete +title: Autocomplete +--- + +import { PropsTable, Description } from '@site/src/components'; +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +# Autocomplete +Поле ввода с подсказками в выпадающем списке. + + + + +## Использование +Расширенная версия компонента `TextField`. Добавилась возможность использования выпадающего списка с подсказками.\ +По умолчанию подсказки фильтруются вне зависимости от регистра. Но это можно изменить, прокинув свой коллбэк `filter`.\ +Все пропсы, которые поддерживает компонент `TextField` также поддерживаются и здесь. +Формат подсказок `suggestions` следующий: + +```tsx +type SuggestionItem = { + /** + * Метка-подпись к подсказке + */ + label: string; + /** + * Слот для контента слева + */ + contentLeft?: ReactNode; + /** + * Слот для контента справа + */ + contentRight?: ReactNode; +}; +``` + +## Примеры + + + + ```tsx live + import React from 'react'; + import { Autocomplete } from '@salutejs/sdds-serv'; + + export function App() { + const mockData = [ + { label: 'Алексей Смирнов' }, + { label: 'Екатерина Иванова' }, + { label: 'Дмитрий Петров' }, + { label: 'Ольга Васильева' }, + { label: 'Сергей Сидоров' }, + { label: 'Мария Кузнецова' }, + { label: 'Андрей Попов' }, + { label: 'Анна Николаева' }, + { label: 'Иван Федоров' }, + { label: 'Наталья Морозова' }, + { label: 'Михаил Павлов' }, + { label: 'Елена Романова' }, + { label: 'Владимир Киселев' }, + { label: 'Татьяна Захарова' }, + { label: 'Николай Семенов' }, + { label: 'Юлия Белова' }, + { label: 'Александр Гусев' }, + { label: 'Оксана Яковлева' }, + { label: 'Игорь Егорова' }, + { label: 'Вера Тихомирова' }, + { label: 'Артем Григорьев' }, + { label: 'Евгения Козлова' }, + { label: 'Максим Лебедев' }, + { label: 'Виктория Калашникова' }, + { label: 'Константин Абрамов' }, + { label: 'Светлана Новикова' }, + { label: 'Юрий Волков' }, + { label: 'Валентина Воробьева' }, + { label: 'Павел Сергеев' }, + { label: 'Людмила Виноградова' }, + { label: 'Антон Соловьев' }, + { label: 'Маргарита Цветкова' }, + { label: 'Роман Трофимов' }, + { label: 'Лариса Зайцева' }, + { label: 'Евгений Никитин' }, + { label: 'Галина Михайлова' }, + { label: 'Владислав Антонов' }, + { label: 'Дарья Филатова' }, + { label: 'Олег Буров' }, + { label: 'Инна Медведева' }, + { label: 'Вячеслав Крылов' }, + { label: 'Тамара Беляева' }, + { label: 'Кирилл Марков' }, + { label: 'Марина Пономарева' }, + { label: 'Борис Захаров' }, + { label: 'Жанна Савельева' }, + { label: 'Федор Жуков' }, + { label: 'Елизавета Логинова' }, + { label: 'Виктор Рыбаков' }, + { label: 'Лилия Макарова' }, + ]; + + return ( +
+ +
+ ); + } + ``` + + + ```tsx live + import React from 'react'; + import { Autocomplete } from '@salutejs/sdds-serv'; + + export function App() { + const mockData = [ + { label: 'Алексей Смирнов' }, + { label: 'Екатерина Иванова' }, + { label: 'Дмитрий Петров' }, + { label: 'Ольга Васильева' }, + { label: 'Сергей Сидоров' }, + { label: 'Мария Кузнецова' }, + { label: 'Андрей Попов' }, + { label: 'Анна Николаева' }, + { label: 'Иван Федоров' }, + { label: 'Наталья Морозова' }, + { label: 'Михаил Павлов' }, + { label: 'Елена Романова' }, + { label: 'Владимир Киселев' }, + { label: 'Татьяна Захарова' }, + { label: 'Николай Семенов' }, + { label: 'Юлия Белова' }, + { label: 'Александр Гусев' }, + { label: 'Оксана Яковлева' }, + { label: 'Игорь Егорова' }, + { label: 'Вера Тихомирова' }, + { label: 'Артем Григорьев' }, + { label: 'Евгения Козлова' }, + { label: 'Максим Лебедев' }, + { label: 'Виктория Калашникова' }, + { label: 'Константин Абрамов' }, + { label: 'Светлана Новикова' }, + { label: 'Юрий Волков' }, + { label: 'Валентина Воробьева' }, + { label: 'Павел Сергеев' }, + { label: 'Людмила Виноградова' }, + { label: 'Антон Соловьев' }, + { label: 'Маргарита Цветкова' }, + { label: 'Роман Трофимов' }, + { label: 'Лариса Зайцева' }, + { label: 'Евгений Никитин' }, + { label: 'Галина Михайлова' }, + { label: 'Владислав Антонов' }, + { label: 'Дарья Филатова' }, + { label: 'Олег Буров' }, + { label: 'Инна Медведева' }, + { label: 'Вячеслав Крылов' }, + { label: 'Тамара Беляева' }, + { label: 'Кирилл Марков' }, + { label: 'Марина Пономарева' }, + { label: 'Борис Захаров' }, + { label: 'Жанна Савельева' }, + { label: 'Федор Жуков' }, + { label: 'Елизавета Логинова' }, + { label: 'Виктор Рыбаков' }, + { label: 'Лилия Макарова' }, + ]; + + const [value, setValue] = useState('') + + return ( +
+ setValue(e.target.value)} onSuggestionSelect={(e) => setValue(e.label)} suggestions={mockData} listMaxHeight="250px" label="Label" placeholder="Placeholder" leftHelper="Введите имя Алексей" /> +
+ ); + } + ``` + + + Это пример с бесконечным лоадингом подсказок в списке. Для удобства порог для открытия списка подсказок понижен до 0 (открываться будет сразу при фокусе). + + ```tsx live + import React from 'react'; + import { Autocomplete, Cell, Spinner } from '@salutejs/sdds-serv'; + + export function App() { + const mockData = [ + { label: 'Алексей Смирнов' }, + { label: 'Екатерина Иванова' }, + { label: 'Дмитрий Петров' }, + { label: 'Ольга Васильева' }, + { label: 'Сергей Сидоров' }, + { label: 'Мария Кузнецова' }, + { label: 'Андрей Попов' }, + { label: 'Анна Николаева' }, + { label: 'Иван Федоров' }, + { label: 'Наталья Морозова' }, + { label: 'Михаил Павлов' }, + { label: 'Елена Романова' }, + { label: 'Владимир Киселев' }, + { label: 'Татьяна Захарова' }, + { label: 'Николай Семенов' }, + { label: 'Юлия Белова' }, + { label: 'Александр Гусев' }, + { label: 'Оксана Яковлева' }, + { label: 'Игорь Егорова' }, + { label: 'Вера Тихомирова' }, + { label: 'Артем Григорьев' }, + { label: 'Евгения Козлова' }, + { label: 'Максим Лебедев' }, + { label: 'Виктория Калашникова' }, + { label: 'Константин Абрамов' }, + { label: 'Светлана Новикова' }, + { label: 'Юрий Волков' }, + { label: 'Валентина Воробьева' }, + { label: 'Павел Сергеев' }, + { label: 'Людмила Виноградова' }, + { label: 'Антон Соловьев' }, + { label: 'Маргарита Цветкова' }, + { label: 'Роман Трофимов' }, + { label: 'Лариса Зайцева' }, + { label: 'Евгений Никитин' }, + { label: 'Галина Михайлова' }, + { label: 'Владислав Антонов' }, + { label: 'Дарья Филатова' }, + { label: 'Олег Буров' }, + { label: 'Инна Медведева' }, + { label: 'Вячеслав Крылов' }, + { label: 'Тамара Беляева' }, + { label: 'Кирилл Марков' }, + { label: 'Марина Пономарева' }, + { label: 'Борис Захаров' }, + { label: 'Жанна Савельева' }, + { label: 'Федор Жуков' }, + { label: 'Елизавета Логинова' }, + { label: 'Виктор Рыбаков' }, + { label: 'Лилия Макарова' }, + ]; + + const getData = async (data, page, pageSize = 10) => { + return new Promise((resolve) => { + setTimeout(() => { + resolve({page, data: data.slice(page * pageSize - 1, page * pageSize - 1 + pageSize)}) + }, 1500) + }) + } + + const [suggestions, setSuggestions] = useState({ page: 1, data: mockData.slice(0, 10) }) + const [isInfiniteLoading, setIsInfiniteLoading] = useState(false) + + const onScroll = async (e) => { + if (isInfiniteLoading) return + + if (e.target.scrollTop + e.target.offsetHeight + 10 > e.target.scrollHeight) { + setIsInfiniteLoading(true) + + const res = await getData(mockData, suggestions.page + 1, 10) + setSuggestions({page: res.page, data: [...suggestions.data, ...res.data]}) + + setIsInfiniteLoading(false) + } + }; + + return ( +
+ } title="Загрузка" stretching="auto" /> : undefined} + label="Label" + placeholder="Placeholder" + leftHelper="Введите имя Алексей" + /> +
+ ); + } + ``` + + + Пример кастомной фильтрации на бекенде. Не забываем отключить дефолтную фильтрацию. + + ```tsx live + import React from 'react'; + import { Autocomplete } from '@salutejs/sdds-serv'; + + export function App() { + const mockData = [ + { label: 'Алексей Смирнов' }, + { label: 'Екатерина Иванова' }, + { label: 'Дмитрий Петров' }, + { label: 'Ольга Васильева' }, + { label: 'Сергей Сидоров' }, + { label: 'Мария Кузнецова' }, + { label: 'Андрей Попов' }, + { label: 'Анна Николаева' }, + { label: 'Иван Федоров' }, + { label: 'Наталья Морозова' }, + { label: 'Михаил Павлов' }, + { label: 'Елена Романова' }, + { label: 'Владимир Киселев' }, + { label: 'Татьяна Захарова' }, + { label: 'Николай Семенов' }, + { label: 'Юлия Белова' }, + { label: 'Александр Гусев' }, + { label: 'Оксана Яковлева' }, + { label: 'Игорь Егорова' }, + { label: 'Вера Тихомирова' }, + { label: 'Артем Григорьев' }, + { label: 'Евгения Козлова' }, + { label: 'Максим Лебедев' }, + { label: 'Виктория Калашникова' }, + { label: 'Константин Абрамов' }, + { label: 'Светлана Новикова' }, + { label: 'Юрий Волков' }, + { label: 'Валентина Воробьева' }, + { label: 'Павел Сергеев' }, + { label: 'Людмила Виноградова' }, + { label: 'Антон Соловьев' }, + { label: 'Маргарита Цветкова' }, + { label: 'Роман Трофимов' }, + { label: 'Лариса Зайцева' }, + { label: 'Евгений Никитин' }, + { label: 'Галина Михайлова' }, + { label: 'Владислав Антонов' }, + { label: 'Дарья Филатова' }, + { label: 'Олег Буров' }, + { label: 'Инна Медведева' }, + { label: 'Вячеслав Крылов' }, + { label: 'Тамара Беляева' }, + { label: 'Кирилл Марков' }, + { label: 'Марина Пономарева' }, + { label: 'Борис Захаров' }, + { label: 'Жанна Савельева' }, + { label: 'Федор Жуков' }, + { label: 'Елизавета Логинова' }, + { label: 'Виктор Рыбаков' }, + { label: 'Лилия Макарова' }, + ]; + + const [value, setValue] = useState('') + const [suggestions, setSuggestions] = useState(mockData) + + + const getData = async (value) => { + return new Promise((resolve) => { + setTimeout(() => { + resolve(mockData.filter(({ label }) => label.toLowerCase().includes(value.toString().toLowerCase()))) + }, 200) + }) + } + + useEffect(() => { + getData(value).then(setSuggestions) + }, [value]) + + return ( +
+ setValue(e.target.value)} + onSuggestionSelect={(e) => setValue(e.label)} + suggestions={suggestions} + listMaxHeight="250px" + filter={() => true} // Отключаем дефолтную фильтрацию + label="Label" + placeholder="Placeholder" + leftHelper="Введите имя Алексей" + /> +
+ ); + } + ``` + + + Если произошла ошибка, или же к примеру нужно показать некую информацию пользователю, то для этой цели можно использовать компонент `EmptyState`. + + ```tsx live + import React from 'react'; + import { Autocomplete, EmptyState, Spinner } from '@salutejs/sdds-serv'; + import { IconRefresh } from '@salutejs/plasma-icons'; + + export function App() { + const mockData = [ + { label: 'Алексей Смирнов' }, + { label: 'Екатерина Иванова' }, + { label: 'Дмитрий Петров' }, + { label: 'Ольга Васильева' }, + { label: 'Сергей Сидоров' }, + { label: 'Мария Кузнецова' }, + { label: 'Андрей Попов' }, + { label: 'Анна Николаева' }, + { label: 'Иван Федоров' }, + { label: 'Наталья Морозова' }, + { label: 'Михаил Павлов' }, + { label: 'Елена Романова' }, + { label: 'Владимир Киселев' }, + { label: 'Татьяна Захарова' }, + { label: 'Николай Семенов' }, + { label: 'Юлия Белова' }, + { label: 'Александр Гусев' }, + { label: 'Оксана Яковлева' }, + { label: 'Игорь Егорова' }, + { label: 'Вера Тихомирова' }, + { label: 'Артем Григорьев' }, + { label: 'Евгения Козлова' }, + { label: 'Максим Лебедев' }, + { label: 'Виктория Калашникова' }, + { label: 'Константин Абрамов' }, + { label: 'Светлана Новикова' }, + { label: 'Юрий Волков' }, + { label: 'Валентина Воробьева' }, + { label: 'Павел Сергеев' }, + { label: 'Людмила Виноградова' }, + { label: 'Антон Соловьев' }, + { label: 'Маргарита Цветкова' }, + { label: 'Роман Трофимов' }, + { label: 'Лариса Зайцева' }, + { label: 'Евгений Никитин' }, + { label: 'Галина Михайлова' }, + { label: 'Владислав Антонов' }, + { label: 'Дарья Филатова' }, + { label: 'Олег Буров' }, + { label: 'Инна Медведева' }, + { label: 'Вячеслав Крылов' }, + { label: 'Тамара Беляева' }, + { label: 'Кирилл Марков' }, + { label: 'Марина Пономарева' }, + { label: 'Борис Захаров' }, + { label: 'Жанна Савельева' }, + { label: 'Федор Жуков' }, + { label: 'Елизавета Логинова' }, + { label: 'Виктор Рыбаков' }, + { label: 'Лилия Макарова' }, + ]; + + const getData = async () => { + return new Promise((resolve) => { + setTimeout(() => { + resolve(mockData) + }, 1500) + }) + } + + const [isError, setIsError] = useState(true) + const [isLoading, setIsLoading] = useState(false) + const [value, setValue] = useState('') + const [suggestions, setSuggestions] = useState([]) + + const handleGetData = async () => { + setIsLoading(true) + + const res = await getData() + + setIsLoading(false) + setIsError(false) + setSuggestions(res) + } + + return ( +
+ setValue(e.target.value)} + onSuggestionSelect={(e) => setValue(e.label)} + suggestions={suggestions} + listMaxHeight="250px" + renderList={isError ? () => } description="Произошла ошибка. Попробуйте обновить." buttonText="Обновить" buttonAction={handleGetData} /> : undefined} + contentRight={isLoading ? : undefined} + label="Label" + placeholder="Placeholder" + leftHelper="Введите имя Алексей" + /> +
+ ); + } + ``` + + + +## Клавиатурная навигация + +Данный компонент соответствует требования W3C: [Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-autocomplete-list/). + +- `Tab, Escape` - закрывает автокомплит. Перемещает фокус на следующий элемент на странице; +- `Enter` - выбираем подсказку из списка; +- `Home` - перемещает фокус на первый элемент; +- `End` - перемещает фокус на последний элемент; +- `ArrowUp` - перемещает фокус на один элемент выше; +- `ArrowDown` - перемещает фокус на один элемент ниже; diff --git a/website/sdds-serv-docs/docs/components/Calendar.mdx b/website/sdds-serv-docs/docs/components/Calendar.mdx new file mode 100644 index 0000000000..e9a1e3948b --- /dev/null +++ b/website/sdds-serv-docs/docs/components/Calendar.mdx @@ -0,0 +1,294 @@ +--- +id: calendar +title: Calendar +--- + +import { PropsTable, Description, StorybookLink } from '@site/src/components'; + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +# Calendar +Компоненты календарей для выбора даты или диапазона дат. + +## Calendar + + + + +Представляет собой универсальный компонент `Calendar`, в котором можно настроить любое доступное представление: базовый, двойной, базовый с диапазоном, двойной с диапазоном. + + + + ```tsx live + import React from 'react'; + import { Calendar } from '@salutejs/sdds-serv'; + + export function App() { + const isRange = false; + const isDouble = false; + const min = new Date(2022, 4, 0); + const max = new Date(2022, 6, 15); + const date = { + day: 6, + monthIndex: 5, + year: 2022, + } + + const [value, setValue] = React.useState(undefined); + const [valueRange, setValueRange] = React.useState([undefined]); + + const handleOnChange = React.useCallback((newValue) => { + setValue(newValue); + }, []); + const handleOnRangeChange = React.useCallback((newValue) => { + setValueRange(newValue); + }, []); + + const baseEvents = [ + { + date: new Date(2022, 5, 6), + }, + { + date: new Date(2022, 5, 10), + color: 'red', + }, + { + date: new Date(2022, 5, 10), + color: 'green', + }, + { + date: new Date(2022, 5, 10), + color: 'blue', + }, + ]; + + const eventsRange = Array.from(Array(10),((_, day) => ({ + date: new Date(2022, 5, 15 + day), + color: 'purple', + }))); + + const disabledDays = Array.from(Array(5),((_, day) => ({ + date: new Date(2022, 5, 11 + day), + + }))); + + return ( +
+ +
+ ); + } + ``` + + + + + + ```tsx live + import React from 'react'; + import { CalendarBase } from '@salutejs/sdds-serv'; + + export function App() { + const min = new Date(2022, 4, 0); + const max = new Date(2022, 7, 15); + + const [value, setValue] = React.useState(new Date(2022, 5, 6)); + const handleOnChange = React.useCallback((newValue) => { + setValue(newValue); + }, []); + + return ( +
+ +
+ ); + } + ``` + + + + + + ```tsx live + import React from 'react'; + import { CalendarDouble } from '@salutejs/sdds-serv'; + + export function App() { + const min = new Date(2022, 4, 0); + const max = new Date(2022, 7, 15); + + const [value, setValue] = React.useState(new Date(2022, 5, 6)); + const handleOnChange = React.useCallback((newValue) => { + setValue(newValue); + }, []); + + return ( +
+ +
+ ); + } + ``` + + + + + + ```tsx live + import React from 'react'; + import { CalendarBaseRange } from '@salutejs/sdds-serv'; + + export function App() { + const min = new Date(2022, 4, 0); + const max = new Date(2022, 7, 15); + + const [value, setValue] = React.useState([new Date(2022, 5, 6), new Date(2022, 5, 16)]); + const handleOnChange = React.useCallback((newValue) => { + setValue(newValue); + }, []); + + return ( +
+ +
+ ); + } + ``` + + + + + + ```tsx live + import React from 'react'; + import { CalendarDoubleRange } from '@salutejs/sdds-serv'; + + export function App() { + const min = new Date(2022, 4, 0); + const max = new Date(2022, 7, 15); + + const [value, setValue] = React.useState([new Date(2022, 5, 6), new Date(2022, 6, 16)]); + const handleOnChange = React.useCallback((newValue) => { + setValue(newValue); + }, []); + + return ( +
+ +
+ ); + } + ``` + + + +## Размер календаря. +Размер календаря задается с помощью свойства `size`. + +```tsx live +import React from 'react'; +import { CalendarBase } from '@salutejs/sdds-serv'; + +export function App() { + const [value, setValue] = React.useState(undefined); + const handleOnChange = React.useCallback((newValue) => { + setValue(newValue); + }, []); + + return ( +
+ + + + +
+ ); +} +``` + +## Сетка выбора даты. +Конечное отображение сетки календаря задается с помощью свойства `type`. + +```tsx live +import React from 'react'; +import { CalendarBase } from '@salutejs/sdds-serv'; + +export function App() { + const [value, setValue] = React.useState(undefined); + const handleOnChange = React.useCallback((newValue) => { + setValue(newValue); + }, []); + + return ( +
+ + + + +
+ ); +} +``` \ No newline at end of file diff --git a/website/sdds-serv-docs/docs/components/Chip.mdx b/website/sdds-serv-docs/docs/components/Chip.mdx index 15f6d88ee6..1a4ed770b8 100644 --- a/website/sdds-serv-docs/docs/components/Chip.mdx +++ b/website/sdds-serv-docs/docs/components/Chip.mdx @@ -20,6 +20,7 @@ Chips могут отображаться в нескольких размера С их помощью можно размещать **иконку** слева или справа от текста. Так же есть свойство `contentClearButton`, которое позволяет прокинуть custom **иконку**. +Отключить отображение иконки закрытия можно с помощью свойства `hasClear`. ```tsx live import React from 'react'; @@ -42,6 +43,8 @@ export function App() { Текст + +
); } diff --git a/website/sdds-serv-docs/docs/components/DatePicker.mdx b/website/sdds-serv-docs/docs/components/DatePicker.mdx index 661cd0313e..c35cb9d8d9 100644 --- a/website/sdds-serv-docs/docs/components/DatePicker.mdx +++ b/website/sdds-serv-docs/docs/components/DatePicker.mdx @@ -36,7 +36,16 @@ export function App() { ``` ### Формат даты -Формат даты задается с помощью свойства `format`. +Формат даты задается с помощью свойства `format`. +| Обозначение | Отображение | Описание | +|-------------|-------------|---------------------| +| DD | 01-31 | Дни месяца, 2 цифры | +| D | 1-31 | Дни месяца | +| MM | 01-12 | Месяц года, 2 цифры | +| M | 1-12 | Месяц года | +| YYYY | 2024 | Год из 4 цифр | +| YY | 24 | Год из 2 цифр | +| Q | 1-4 | Квартал | При выборе даты в календаре или вводе даты через поле ввода, дата будет приводиться к заданному формату. Свойство `maskWithFormat` позволяет маскировать ввод: diff --git a/website/sdds-serv-docs/docs/components/Notification.mdx b/website/sdds-serv-docs/docs/components/Notification.mdx new file mode 100644 index 0000000000..172e80cd60 --- /dev/null +++ b/website/sdds-serv-docs/docs/components/Notification.mdx @@ -0,0 +1,58 @@ +--- +id: notification +title: Notification +--- + +import { PropsTable, Description } from '@site/src/components'; + +# Notification + + + +## Использование +Компонент `Notification` может использоваться для создания собственных систем оповещения. +Вид компонента контролируется свойствами (props). +Текстовая часть оповещения состоит из `title` и `children`. +Слева или сверху от нее, также можно пробросить иконку через свойство `icon`. +Также есть часть `actions`, в которой предполагается отображение кнопок для взаимодействия. + +### Провайдер контекста +Поместите `NotificationsProvider` в [корень приложения](../../#корень-приложения) или там, где будете применять модальные окна: + +```tsx title="index.ts" +import ReactDOM from 'react-dom'; +import { NotificationsProvider } from '@salutejs/sdds-serv'; + +import { App } from './App'; + +ReactDOM.render( + + + , + document.getElementById('root') +); +``` + +### Вызов уведомления +После подключения `NotificationsProvider` станет возможен вызов функции `addNotification`,который приведет к отображению оповещения. +Функция принимает значения свойств компонента `Notification`: + +```tsx live +import React from 'react'; +import { Button, addNotification, NotificationsProvider } from '@salutejs/sdds-serv'; + +export function App() { + const handleClick = React.useCallback(() => { + addNotification({ + title: 'Входящий вызов', + children: 'Принять?', + }, 1000); + }, []); + + return ( + +