diff --git a/cypress/snapshots/b2c/components/Button/Button.component-test.tsx/plasma-b2c Button -- _pin.snap.png b/cypress/snapshots/b2c/components/Button/Button.component-test.tsx/plasma-b2c Button -- _pin.snap.png new file mode 100644 index 0000000000..3714c202db Binary files /dev/null and b/cypress/snapshots/b2c/components/Button/Button.component-test.tsx/plasma-b2c Button -- _pin.snap.png differ diff --git a/cypress/snapshots/b2c/components/Button/Button.component-test.tsx/plasma-b2c Button -- _size.snap.png b/cypress/snapshots/b2c/components/Button/Button.component-test.tsx/plasma-b2c Button -- _size.snap.png index 37332f86f0..26dbea55ed 100644 Binary files a/cypress/snapshots/b2c/components/Button/Button.component-test.tsx/plasma-b2c Button -- _size.snap.png and b/cypress/snapshots/b2c/components/Button/Button.component-test.tsx/plasma-b2c Button -- _size.snap.png differ diff --git a/cypress/snapshots/b2c/components/Button/Button.component-test.tsx/plasma-b2c Button -- _view.snap.png b/cypress/snapshots/b2c/components/Button/Button.component-test.tsx/plasma-b2c Button -- _view.snap.png new file mode 100644 index 0000000000..a4432782bc Binary files /dev/null and b/cypress/snapshots/b2c/components/Button/Button.component-test.tsx/plasma-b2c Button -- _view.snap.png differ diff --git a/cypress/snapshots/b2c/components/Button/Button.component-test.tsx/plasma-b2c Button -- simple.snap.png b/cypress/snapshots/b2c/components/Button/Button.component-test.tsx/plasma-b2c Button -- simple.snap.png new file mode 100644 index 0000000000..54b1d0bbd3 Binary files /dev/null and b/cypress/snapshots/b2c/components/Button/Button.component-test.tsx/plasma-b2c Button -- simple.snap.png differ diff --git a/cypress/snapshots/b2c/components/Button/Button.component-test.tsx/plasma-b2c Button -- with Icon.snap.png b/cypress/snapshots/b2c/components/Button/Button.component-test.tsx/plasma-b2c Button -- with Icon.snap.png new file mode 100644 index 0000000000..b651725295 Binary files /dev/null and b/cypress/snapshots/b2c/components/Button/Button.component-test.tsx/plasma-b2c Button -- with Icon.snap.png differ diff --git a/cypress/snapshots/b2c/components/Button/Button.component-test.tsx/plasma-b2c Button -- with Loader.snap.png b/cypress/snapshots/b2c/components/Button/Button.component-test.tsx/plasma-b2c Button -- with Loader.snap.png new file mode 100644 index 0000000000..3ea7999109 Binary files /dev/null and b/cypress/snapshots/b2c/components/Button/Button.component-test.tsx/plasma-b2c Button -- with Loader.snap.png differ diff --git a/cypress/snapshots/b2c/components/Button/Button.component-test.tsx/plasma-b2c Button -- withAutoFocus.snap.png b/cypress/snapshots/b2c/components/Button/Button.component-test.tsx/plasma-b2c Button -- withAutoFocus.snap.png new file mode 100644 index 0000000000..3884b54302 Binary files /dev/null and b/cypress/snapshots/b2c/components/Button/Button.component-test.tsx/plasma-b2c Button -- withAutoFocus.snap.png differ diff --git a/cypress/snapshots/b2c/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- _pin.snap.png b/cypress/snapshots/b2c/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- _pin.snap.png deleted file mode 100644 index 2a907bd025..0000000000 Binary files a/cypress/snapshots/b2c/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- _pin.snap.png and /dev/null differ diff --git a/cypress/snapshots/b2c/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- _shift.snap.png b/cypress/snapshots/b2c/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- _shift.snap.png deleted file mode 100644 index 4a49a2f5db..0000000000 Binary files a/cypress/snapshots/b2c/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- _shift.snap.png and /dev/null differ diff --git a/cypress/snapshots/b2c/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- _size.snap.png b/cypress/snapshots/b2c/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- _size.snap.png deleted file mode 100644 index 4bf00e27dc..0000000000 Binary files a/cypress/snapshots/b2c/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- _size.snap.png and /dev/null differ diff --git a/cypress/snapshots/b2c/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- _view.snap.png b/cypress/snapshots/b2c/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- _view.snap.png deleted file mode 100644 index c0aec4aa50..0000000000 Binary files a/cypress/snapshots/b2c/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- _view.snap.png and /dev/null differ diff --git a/cypress/snapshots/b2c/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- simple.snap.png b/cypress/snapshots/b2c/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- simple.snap.png deleted file mode 100644 index a65cc23191..0000000000 Binary files a/cypress/snapshots/b2c/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- simple.snap.png and /dev/null differ diff --git a/cypress/snapshots/b2c/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- with Icon.snap.png b/cypress/snapshots/b2c/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- with Icon.snap.png deleted file mode 100644 index cfbbc52fa0..0000000000 Binary files a/cypress/snapshots/b2c/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- with Icon.snap.png and /dev/null differ diff --git a/cypress/snapshots/b2c/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- with Loader.snap.png b/cypress/snapshots/b2c/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- with Loader.snap.png deleted file mode 100644 index 4a3066f9c1..0000000000 Binary files a/cypress/snapshots/b2c/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- with Loader.snap.png and /dev/null differ diff --git a/cypress/snapshots/b2c/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- withAutoFocus.snap.png b/cypress/snapshots/b2c/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- withAutoFocus.snap.png deleted file mode 100644 index 71b5648acd..0000000000 Binary files a/cypress/snapshots/b2c/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- withAutoFocus.snap.png and /dev/null differ diff --git a/cypress/snapshots/b2c/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-b2c ButtonGroup -- _gap.snap.png b/cypress/snapshots/b2c/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-b2c ButtonGroup -- _gap.snap.png new file mode 100644 index 0000000000..90384787df Binary files /dev/null and b/cypress/snapshots/b2c/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-b2c ButtonGroup -- _gap.snap.png differ diff --git a/cypress/snapshots/b2c/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-b2c ButtonGroup -- _orientation single button.snap.png b/cypress/snapshots/b2c/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-b2c ButtonGroup -- _orientation single button.snap.png new file mode 100644 index 0000000000..1ba2126593 Binary files /dev/null and b/cypress/snapshots/b2c/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-b2c ButtonGroup -- _orientation single button.snap.png differ diff --git a/cypress/snapshots/b2c/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-b2c ButtonGroup -- _orientation stretching - filled.snap.png b/cypress/snapshots/b2c/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-b2c ButtonGroup -- _orientation stretching - filled.snap.png new file mode 100644 index 0000000000..951bfcb88a Binary files /dev/null and b/cypress/snapshots/b2c/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-b2c ButtonGroup -- _orientation stretching - filled.snap.png differ diff --git a/cypress/snapshots/b2c/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-b2c ButtonGroup -- _orientation.snap.png b/cypress/snapshots/b2c/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-b2c ButtonGroup -- _orientation.snap.png new file mode 100644 index 0000000000..75655a77ea Binary files /dev/null and b/cypress/snapshots/b2c/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-b2c ButtonGroup -- _orientation.snap.png differ diff --git a/cypress/snapshots/b2c/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-b2c ButtonGroup -- _shape.snap.png b/cypress/snapshots/b2c/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-b2c ButtonGroup -- _shape.snap.png new file mode 100644 index 0000000000..5a94362e9a Binary files /dev/null and b/cypress/snapshots/b2c/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-b2c ButtonGroup -- _shape.snap.png differ diff --git a/cypress/snapshots/b2c/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-b2c ButtonGroup -- _size.snap.png b/cypress/snapshots/b2c/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-b2c ButtonGroup -- _size.snap.png new file mode 100644 index 0000000000..6a908b863c Binary files /dev/null and b/cypress/snapshots/b2c/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-b2c ButtonGroup -- _size.snap.png differ diff --git a/cypress/snapshots/b2c/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-b2c ButtonGroup -- _view.snap.png b/cypress/snapshots/b2c/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-b2c ButtonGroup -- _view.snap.png new file mode 100644 index 0000000000..247dbad215 Binary files /dev/null and b/cypress/snapshots/b2c/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-b2c ButtonGroup -- _view.snap.png differ diff --git a/cypress/snapshots/b2c/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-b2c ButtonGroup -- custom buttons.snap.png b/cypress/snapshots/b2c/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-b2c ButtonGroup -- custom buttons.snap.png new file mode 100644 index 0000000000..60fc437400 Binary files /dev/null and b/cypress/snapshots/b2c/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-b2c ButtonGroup -- custom buttons.snap.png differ diff --git a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- set value.snap.png b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- set value.snap.png index f74cde5517..0edcefebf7 100644 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- set value.snap.png and b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web Calendar -- set value.snap.png differ diff --git a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- set value.snap.png b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- set value.snap.png index 4336ec667d..3ed0474360 100644 Binary files a/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- set value.snap.png and b/cypress/snapshots/b2c/components/Calendar/CalendarBase.component-test.tsx/plasma-web CalendarDouble -- set value.snap.png differ diff --git a/cypress/snapshots/b2c/components/Combobox/Combobox.component-test.tsx/plasma-web Combobox keyboard navigation -- multiple.snap.png b/cypress/snapshots/b2c/components/Combobox/Combobox.component-test.tsx/plasma-web Combobox keyboard navigation -- multiple.snap.png index 161b7014fe..42bd553e6b 100644 Binary files a/cypress/snapshots/b2c/components/Combobox/Combobox.component-test.tsx/plasma-web Combobox keyboard navigation -- multiple.snap.png and b/cypress/snapshots/b2c/components/Combobox/Combobox.component-test.tsx/plasma-web Combobox keyboard navigation -- multiple.snap.png differ diff --git a/cypress/snapshots/b2c/components/Combobox/Combobox.component-test.tsx/plasma-web Combobox keyboard navigation -- single.snap.png b/cypress/snapshots/b2c/components/Combobox/Combobox.component-test.tsx/plasma-web Combobox keyboard navigation -- single.snap.png index 16c4906518..0c026a4a35 100644 Binary files a/cypress/snapshots/b2c/components/Combobox/Combobox.component-test.tsx/plasma-web Combobox keyboard navigation -- single.snap.png and b/cypress/snapshots/b2c/components/Combobox/Combobox.component-test.tsx/plasma-web Combobox keyboard navigation -- single.snap.png differ diff --git a/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- auto placement bottom.snap.png b/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- auto placement bottom.snap.png index 464f772bf2..4d658c3d8b 100644 Binary files a/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- auto placement bottom.snap.png and b/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- auto placement bottom.snap.png differ diff --git a/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- auto placement top.snap.png b/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- auto placement top.snap.png index 5496b52f38..0f9f2a725b 100644 Binary files a/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- auto placement top.snap.png and b/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- auto placement top.snap.png differ diff --git a/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- block and popup's width.snap.png b/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- block and popup's width.snap.png index 70d3fe6611..5c633ded7f 100644 Binary files a/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- block and popup's width.snap.png and b/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- block and popup's width.snap.png differ diff --git a/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- handling dropdown menu height.snap.png b/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- handling dropdown menu height.snap.png index aaf1fe98d6..b2cb1cbfbe 100644 Binary files a/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- handling dropdown menu height.snap.png and b/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- handling dropdown menu height.snap.png differ diff --git a/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- radius and padding.snap.png b/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- radius and padding.snap.png index 4ab1cc02ea..b4ca6caa9e 100644 Binary files a/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- radius and padding.snap.png and b/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- radius and padding.snap.png differ diff --git a/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- simple.snap.png b/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- simple.snap.png index 54b1f17c08..2768622400 100644 Binary files a/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- simple.snap.png and b/cypress/snapshots/b2c/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- simple.snap.png differ diff --git a/cypress/snapshots/b2c/components/Modal/ModalBase.component-test.tsx/plasma-web Modal -- open.snap.png b/cypress/snapshots/b2c/components/Modal/ModalBase.component-test.tsx/plasma-web Modal -- open.snap.png index 69b1a40b9f..48265cd766 100644 Binary files a/cypress/snapshots/b2c/components/Modal/ModalBase.component-test.tsx/plasma-web Modal -- open.snap.png and b/cypress/snapshots/b2c/components/Modal/ModalBase.component-test.tsx/plasma-web Modal -- open.snap.png differ diff --git a/cypress/snapshots/b2c/components/Modal/ModalBase.component-test.tsx/plasma-web Modal -- simple.snap.png b/cypress/snapshots/b2c/components/Modal/ModalBase.component-test.tsx/plasma-web Modal -- simple.snap.png index 69b1a40b9f..48265cd766 100644 Binary files a/cypress/snapshots/b2c/components/Modal/ModalBase.component-test.tsx/plasma-web Modal -- simple.snap.png and b/cypress/snapshots/b2c/components/Modal/ModalBase.component-test.tsx/plasma-web Modal -- simple.snap.png differ diff --git a/cypress/snapshots/b2c/components/Modal/ModalBase.component-test.tsx/plasma-web Modal -- withBlur.snap.png b/cypress/snapshots/b2c/components/Modal/ModalBase.component-test.tsx/plasma-web Modal -- withBlur.snap.png index 97ab879ca4..18fed5ee83 100644 Binary files a/cypress/snapshots/b2c/components/Modal/ModalBase.component-test.tsx/plasma-web Modal -- withBlur.snap.png and b/cypress/snapshots/b2c/components/Modal/ModalBase.component-test.tsx/plasma-web Modal -- withBlur.snap.png differ diff --git a/cypress/snapshots/b2c/components/Modal/ModalBase.component-test.tsx/plasma-web Modal -- without close icon.snap.png b/cypress/snapshots/b2c/components/Modal/ModalBase.component-test.tsx/plasma-web Modal -- without close icon.snap.png index 25cb2104d8..abdb26840f 100644 Binary files a/cypress/snapshots/b2c/components/Modal/ModalBase.component-test.tsx/plasma-web Modal -- without close icon.snap.png and b/cypress/snapshots/b2c/components/Modal/ModalBase.component-test.tsx/plasma-web Modal -- without close icon.snap.png differ diff --git a/cypress/snapshots/b2c/components/ModalBase/ModalBase.component-test.tsx/plasma-web ModalBase -- double close.snap.png b/cypress/snapshots/b2c/components/ModalBase/ModalBase.component-test.tsx/plasma-web ModalBase -- double close.snap.png index 4784fab159..93eb4ce22b 100644 Binary files a/cypress/snapshots/b2c/components/ModalBase/ModalBase.component-test.tsx/plasma-web ModalBase -- double close.snap.png and b/cypress/snapshots/b2c/components/ModalBase/ModalBase.component-test.tsx/plasma-web ModalBase -- double close.snap.png differ diff --git a/cypress/snapshots/b2c/components/ModalBase/ModalBase.component-test.tsx/plasma-web ModalBase -- simple.snap.png b/cypress/snapshots/b2c/components/ModalBase/ModalBase.component-test.tsx/plasma-web ModalBase -- simple.snap.png index d5fdefeb82..8e5c4fd28e 100644 Binary files a/cypress/snapshots/b2c/components/ModalBase/ModalBase.component-test.tsx/plasma-web ModalBase -- simple.snap.png and b/cypress/snapshots/b2c/components/ModalBase/ModalBase.component-test.tsx/plasma-web ModalBase -- simple.snap.png differ diff --git a/cypress/snapshots/b2c/components/ModalBase/ModalBase.component-test.tsx/plasma-web ModalBase -- withBlur.snap.png b/cypress/snapshots/b2c/components/ModalBase/ModalBase.component-test.tsx/plasma-web ModalBase -- withBlur.snap.png index bda130f9ae..3e1c1e0f41 100644 Binary files a/cypress/snapshots/b2c/components/ModalBase/ModalBase.component-test.tsx/plasma-web ModalBase -- withBlur.snap.png and b/cypress/snapshots/b2c/components/ModalBase/ModalBase.component-test.tsx/plasma-web ModalBase -- withBlur.snap.png differ diff --git a/cypress/snapshots/b2c/components/Notification/Notification.component-test.tsx/plasma-web Notification -- default.snap.png b/cypress/snapshots/b2c/components/Notification/Notification.component-test.tsx/plasma-web Notification -- default.snap.png index a087951d44..3b8207964f 100644 Binary files a/cypress/snapshots/b2c/components/Notification/Notification.component-test.tsx/plasma-web Notification -- default.snap.png and b/cypress/snapshots/b2c/components/Notification/Notification.component-test.tsx/plasma-web Notification -- default.snap.png differ diff --git a/cypress/snapshots/b2c/components/Notification/Notification.component-test.tsx/plasma-web Notification -- icon positions.snap.png b/cypress/snapshots/b2c/components/Notification/Notification.component-test.tsx/plasma-web Notification -- icon positions.snap.png index 254bf26069..04a9768941 100644 Binary files a/cypress/snapshots/b2c/components/Notification/Notification.component-test.tsx/plasma-web Notification -- icon positions.snap.png and b/cypress/snapshots/b2c/components/Notification/Notification.component-test.tsx/plasma-web Notification -- icon positions.snap.png differ diff --git a/cypress/snapshots/b2c/components/Notification/Notification.component-test.tsx/plasma-web Notification -- layout.snap.png b/cypress/snapshots/b2c/components/Notification/Notification.component-test.tsx/plasma-web Notification -- layout.snap.png index 76d795357a..cc9f81c7e3 100644 Binary files a/cypress/snapshots/b2c/components/Notification/Notification.component-test.tsx/plasma-web Notification -- layout.snap.png and b/cypress/snapshots/b2c/components/Notification/Notification.component-test.tsx/plasma-web Notification -- layout.snap.png differ diff --git a/cypress/snapshots/b2c/components/Notification/Notification.component-test.tsx/plasma-web Notification -- long text.snap.png b/cypress/snapshots/b2c/components/Notification/Notification.component-test.tsx/plasma-web Notification -- long text.snap.png index 024da0f571..2575e035fa 100644 Binary files a/cypress/snapshots/b2c/components/Notification/Notification.component-test.tsx/plasma-web Notification -- long text.snap.png and b/cypress/snapshots/b2c/components/Notification/Notification.component-test.tsx/plasma-web Notification -- long text.snap.png differ diff --git a/cypress/snapshots/b2c/components/Notification/Notification.component-test.tsx/plasma-web Notification -- oneline horizontal.snap.png b/cypress/snapshots/b2c/components/Notification/Notification.component-test.tsx/plasma-web Notification -- oneline horizontal.snap.png index 074481eb23..8fc9d00a4b 100644 Binary files a/cypress/snapshots/b2c/components/Notification/Notification.component-test.tsx/plasma-web Notification -- oneline horizontal.snap.png and b/cypress/snapshots/b2c/components/Notification/Notification.component-test.tsx/plasma-web Notification -- oneline horizontal.snap.png differ diff --git a/cypress/snapshots/b2c/components/Overlay/Overlay.component-test.tsx/plasma-web Overlay -- simple.snap.png b/cypress/snapshots/b2c/components/Overlay/Overlay.component-test.tsx/plasma-web Overlay -- simple.snap.png index 49114fe701..9193314d2c 100644 Binary files a/cypress/snapshots/b2c/components/Overlay/Overlay.component-test.tsx/plasma-web Overlay -- simple.snap.png and b/cypress/snapshots/b2c/components/Overlay/Overlay.component-test.tsx/plasma-web Overlay -- simple.snap.png differ diff --git a/cypress/snapshots/b2c/components/Overlay/Overlay.component-test.tsx/plasma-web Overlay -- transparent.snap.png b/cypress/snapshots/b2c/components/Overlay/Overlay.component-test.tsx/plasma-web Overlay -- transparent.snap.png index 0ae70fdd8a..d97da23844 100644 Binary files a/cypress/snapshots/b2c/components/Overlay/Overlay.component-test.tsx/plasma-web Overlay -- transparent.snap.png and b/cypress/snapshots/b2c/components/Overlay/Overlay.component-test.tsx/plasma-web Overlay -- transparent.snap.png differ diff --git a/cypress/snapshots/b2c/components/Overlay/Overlay.component-test.tsx/plasma-web Overlay -- withBlur.snap.png b/cypress/snapshots/b2c/components/Overlay/Overlay.component-test.tsx/plasma-web Overlay -- withBlur.snap.png index 5eb77a1e2f..7d12f919c4 100644 Binary files a/cypress/snapshots/b2c/components/Overlay/Overlay.component-test.tsx/plasma-web Overlay -- withBlur.snap.png and b/cypress/snapshots/b2c/components/Overlay/Overlay.component-test.tsx/plasma-web Overlay -- withBlur.snap.png differ diff --git a/cypress/snapshots/b2c/components/PopupBase/PopupBase.component-test.tsx/plasma-web PopupBase -- frame.snap.png b/cypress/snapshots/b2c/components/PopupBase/PopupBase.component-test.tsx/plasma-web PopupBase -- frame.snap.png index 0f09e5e139..0c1496d79c 100644 Binary files a/cypress/snapshots/b2c/components/PopupBase/PopupBase.component-test.tsx/plasma-web PopupBase -- frame.snap.png and b/cypress/snapshots/b2c/components/PopupBase/PopupBase.component-test.tsx/plasma-web PopupBase -- frame.snap.png differ diff --git a/cypress/snapshots/b2c/components/PopupBase/PopupBase.component-test.tsx/plasma-web PopupBase -- placement basic.snap.png b/cypress/snapshots/b2c/components/PopupBase/PopupBase.component-test.tsx/plasma-web PopupBase -- placement basic.snap.png index d02ae2ec9e..b5d38da6b1 100644 Binary files a/cypress/snapshots/b2c/components/PopupBase/PopupBase.component-test.tsx/plasma-web PopupBase -- placement basic.snap.png and b/cypress/snapshots/b2c/components/PopupBase/PopupBase.component-test.tsx/plasma-web PopupBase -- placement basic.snap.png differ diff --git a/cypress/snapshots/b2c/components/PopupBase/PopupBase.component-test.tsx/plasma-web PopupBase -- placement combination + offset.snap.png b/cypress/snapshots/b2c/components/PopupBase/PopupBase.component-test.tsx/plasma-web PopupBase -- placement combination + offset.snap.png index 1d4f1adf92..d3d39541cc 100644 Binary files a/cypress/snapshots/b2c/components/PopupBase/PopupBase.component-test.tsx/plasma-web PopupBase -- placement combination + offset.snap.png and b/cypress/snapshots/b2c/components/PopupBase/PopupBase.component-test.tsx/plasma-web PopupBase -- placement combination + offset.snap.png differ diff --git a/cypress/snapshots/b2c/components/PopupBase/PopupBase.component-test.tsx/plasma-web PopupBase -- placement combination.snap.png b/cypress/snapshots/b2c/components/PopupBase/PopupBase.component-test.tsx/plasma-web PopupBase -- placement combination.snap.png index 0a52f07b88..30d7dca4f3 100644 Binary files a/cypress/snapshots/b2c/components/PopupBase/PopupBase.component-test.tsx/plasma-web PopupBase -- placement combination.snap.png and b/cypress/snapshots/b2c/components/PopupBase/PopupBase.component-test.tsx/plasma-web PopupBase -- placement combination.snap.png differ diff --git a/cypress/snapshots/b2c/components/PopupBase/PopupBase.component-test.tsx/plasma-web PopupBase -- simple.snap.png b/cypress/snapshots/b2c/components/PopupBase/PopupBase.component-test.tsx/plasma-web PopupBase -- simple.snap.png index acd362d006..8559a71600 100644 Binary files a/cypress/snapshots/b2c/components/PopupBase/PopupBase.component-test.tsx/plasma-web PopupBase -- simple.snap.png and b/cypress/snapshots/b2c/components/PopupBase/PopupBase.component-test.tsx/plasma-web PopupBase -- simple.snap.png differ diff --git a/cypress/snapshots/b2c/components/Skeleton/Skeleton.component-test.tsx/plasma-core Skeleton -- withSkeleton -- simple.snap.png b/cypress/snapshots/b2c/components/Skeleton/Skeleton.component-test.tsx/plasma-core Skeleton -- withSkeleton -- simple.snap.png index 46c819cf5e..9539fd7cda 100644 Binary files a/cypress/snapshots/b2c/components/Skeleton/Skeleton.component-test.tsx/plasma-core Skeleton -- withSkeleton -- simple.snap.png and b/cypress/snapshots/b2c/components/Skeleton/Skeleton.component-test.tsx/plasma-core Skeleton -- withSkeleton -- simple.snap.png differ diff --git a/cypress/snapshots/b2c/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- clearTimeout on hide.snap.png b/cypress/snapshots/b2c/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- clearTimeout on hide.snap.png index c11dcfe13f..3a9c47eb41 100644 Binary files a/cypress/snapshots/b2c/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- clearTimeout on hide.snap.png and b/cypress/snapshots/b2c/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- clearTimeout on hide.snap.png differ diff --git a/cypress/snapshots/b2c/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- offset.snap.png b/cypress/snapshots/b2c/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- offset.snap.png index efbdc9b0a7..8f7dfc1238 100644 Binary files a/cypress/snapshots/b2c/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- offset.snap.png and b/cypress/snapshots/b2c/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- offset.snap.png differ diff --git a/cypress/snapshots/b2c/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- _pilled.snap.png b/cypress/snapshots/b2c/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- _pilled.snap.png index 0ceb6dcf6a..1c8aa0f419 100644 Binary files a/cypress/snapshots/b2c/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- _pilled.snap.png and b/cypress/snapshots/b2c/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- _pilled.snap.png differ diff --git a/cypress/snapshots/b2c/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- _position.snap.png b/cypress/snapshots/b2c/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- _position.snap.png index d3bf848270..56203e9fe9 100644 Binary files a/cypress/snapshots/b2c/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- _position.snap.png and b/cypress/snapshots/b2c/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- _position.snap.png differ diff --git a/cypress/snapshots/b2c/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- dumm.snap.png b/cypress/snapshots/b2c/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- dumm.snap.png index fd234faa80..78e40e28cf 100644 Binary files a/cypress/snapshots/b2c/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- dumm.snap.png and b/cypress/snapshots/b2c/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- dumm.snap.png differ diff --git a/cypress/snapshots/b2c/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- showToast.snap.png b/cypress/snapshots/b2c/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- showToast.snap.png index 09e9942168..fd5411bbac 100644 Binary files a/cypress/snapshots/b2c/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- showToast.snap.png and b/cypress/snapshots/b2c/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- showToast.snap.png differ diff --git a/cypress/snapshots/b2c/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- timeout.snap.png b/cypress/snapshots/b2c/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- timeout.snap.png index 09e9942168..fd5411bbac 100644 Binary files a/cypress/snapshots/b2c/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- timeout.snap.png and b/cypress/snapshots/b2c/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- timeout.snap.png differ diff --git a/cypress/snapshots/b2c/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- two lines additional content.snap.png b/cypress/snapshots/b2c/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- two lines additional content.snap.png index 467f90af5b..a69322bf62 100644 Binary files a/cypress/snapshots/b2c/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- two lines additional content.snap.png and b/cypress/snapshots/b2c/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- two lines additional content.snap.png differ diff --git a/cypress/snapshots/b2c/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- two lines.snap.png b/cypress/snapshots/b2c/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- two lines.snap.png index fa93076505..5eb9575c33 100644 Binary files a/cypress/snapshots/b2c/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- two lines.snap.png and b/cypress/snapshots/b2c/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- two lines.snap.png differ diff --git a/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/empty.snap.png b/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/empty.snap.png index 010d5b487e..df99930a05 100644 Binary files a/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/empty.snap.png and b/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/empty.snap.png differ diff --git a/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/multiple.snap.png b/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/multiple.snap.png index 27016c87ec..67a319f6ae 100644 Binary files a/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/multiple.snap.png and b/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/multiple.snap.png differ diff --git a/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- interaction.snap.png b/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- interaction.snap.png index 51b8bdfaba..b837a072f4 100644 Binary files a/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- interaction.snap.png and b/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- interaction.snap.png differ diff --git a/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- isOpen false.snap.png b/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- isOpen false.snap.png index fa38d71dee..f9e3498f06 100644 Binary files a/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- isOpen false.snap.png and b/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- isOpen false.snap.png differ diff --git a/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- long text.snap.png b/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- long text.snap.png index 6e6db39b4d..b0debaf047 100644 Binary files a/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- long text.snap.png and b/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- long text.snap.png differ diff --git a/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- multiple placement.snap.png b/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- multiple placement.snap.png index 9217932c19..22a96f8a3b 100644 Binary files a/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- multiple placement.snap.png and b/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- multiple placement.snap.png differ diff --git a/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- out of bounds + multiple placement.snap.png b/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- out of bounds + multiple placement.snap.png index 045070f327..10fa011f49 100644 Binary files a/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- out of bounds + multiple placement.snap.png and b/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- out of bounds + multiple placement.snap.png differ diff --git a/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- simple.snap.png b/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- simple.snap.png index 22f7a545bd..3324274902 100644 Binary files a/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- simple.snap.png and b/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- simple.snap.png differ diff --git a/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- wrapper overflow scroll.snap.png b/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- wrapper overflow scroll.snap.png index 0dcb0808b6..9d68a9082f 100644 Binary files a/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- wrapper overflow scroll.snap.png and b/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- wrapper overflow scroll.snap.png differ diff --git a/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/single.snap.png b/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/single.snap.png index 257e7691bd..36c8a8733b 100644 Binary files a/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/single.snap.png and b/cypress/snapshots/b2c/components/Tooltip/Tooltip.component-test.tsx/single.snap.png differ diff --git a/cypress/snapshots/web/components/Button/Button.component-test.tsx/plasma-web Button -- _pin.snap.png b/cypress/snapshots/web/components/Button/Button.component-test.tsx/plasma-web Button -- _pin.snap.png new file mode 100644 index 0000000000..b9fce63021 Binary files /dev/null and b/cypress/snapshots/web/components/Button/Button.component-test.tsx/plasma-web Button -- _pin.snap.png differ diff --git a/cypress/snapshots/web/components/Button/Button.component-test.tsx/plasma-web Button -- _size.snap.png b/cypress/snapshots/web/components/Button/Button.component-test.tsx/plasma-web Button -- _size.snap.png index 219b0cd342..f284a9d34a 100644 Binary files a/cypress/snapshots/web/components/Button/Button.component-test.tsx/plasma-web Button -- _size.snap.png and b/cypress/snapshots/web/components/Button/Button.component-test.tsx/plasma-web Button -- _size.snap.png differ diff --git a/cypress/snapshots/web/components/Button/Button.component-test.tsx/plasma-web Button -- _view.snap.png b/cypress/snapshots/web/components/Button/Button.component-test.tsx/plasma-web Button -- _view.snap.png new file mode 100644 index 0000000000..124c8127ab Binary files /dev/null and b/cypress/snapshots/web/components/Button/Button.component-test.tsx/plasma-web Button -- _view.snap.png differ diff --git a/cypress/snapshots/web/components/Button/Button.component-test.tsx/plasma-web Button -- simple.snap.png b/cypress/snapshots/web/components/Button/Button.component-test.tsx/plasma-web Button -- simple.snap.png new file mode 100644 index 0000000000..d99c79db5b Binary files /dev/null and b/cypress/snapshots/web/components/Button/Button.component-test.tsx/plasma-web Button -- simple.snap.png differ diff --git a/cypress/snapshots/web/components/Button/Button.component-test.tsx/plasma-web Button -- with Icon.snap.png b/cypress/snapshots/web/components/Button/Button.component-test.tsx/plasma-web Button -- with Icon.snap.png new file mode 100644 index 0000000000..92ff6da0c7 Binary files /dev/null and b/cypress/snapshots/web/components/Button/Button.component-test.tsx/plasma-web Button -- with Icon.snap.png differ diff --git a/cypress/snapshots/web/components/Button/Button.component-test.tsx/plasma-web Button -- with Loader.snap.png b/cypress/snapshots/web/components/Button/Button.component-test.tsx/plasma-web Button -- with Loader.snap.png new file mode 100644 index 0000000000..94bd0ceda7 Binary files /dev/null and b/cypress/snapshots/web/components/Button/Button.component-test.tsx/plasma-web Button -- with Loader.snap.png differ diff --git a/cypress/snapshots/web/components/Button/Button.component-test.tsx/plasma-web Button -- withAutoFocus.snap.png b/cypress/snapshots/web/components/Button/Button.component-test.tsx/plasma-web Button -- withAutoFocus.snap.png new file mode 100644 index 0000000000..d72c1634c3 Binary files /dev/null and b/cypress/snapshots/web/components/Button/Button.component-test.tsx/plasma-web Button -- withAutoFocus.snap.png differ diff --git a/cypress/snapshots/web/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- _pin.snap.png b/cypress/snapshots/web/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- _pin.snap.png deleted file mode 100644 index 407012109b..0000000000 Binary files a/cypress/snapshots/web/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- _pin.snap.png and /dev/null differ diff --git a/cypress/snapshots/web/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- _shift.snap.png b/cypress/snapshots/web/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- _shift.snap.png deleted file mode 100644 index b99ed1dd04..0000000000 Binary files a/cypress/snapshots/web/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- _shift.snap.png and /dev/null differ diff --git a/cypress/snapshots/web/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- _size.snap.png b/cypress/snapshots/web/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- _size.snap.png deleted file mode 100644 index 82d49e5c81..0000000000 Binary files a/cypress/snapshots/web/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- _size.snap.png and /dev/null differ diff --git a/cypress/snapshots/web/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- _view.snap.png b/cypress/snapshots/web/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- _view.snap.png deleted file mode 100644 index ee8ef5608c..0000000000 Binary files a/cypress/snapshots/web/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- _view.snap.png and /dev/null differ diff --git a/cypress/snapshots/web/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- simple.snap.png b/cypress/snapshots/web/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- simple.snap.png deleted file mode 100644 index 9c52bb47d6..0000000000 Binary files a/cypress/snapshots/web/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- simple.snap.png and /dev/null differ diff --git a/cypress/snapshots/web/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- with Icon.snap.png b/cypress/snapshots/web/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- with Icon.snap.png deleted file mode 100644 index 1dfb256225..0000000000 Binary files a/cypress/snapshots/web/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- with Icon.snap.png and /dev/null differ diff --git a/cypress/snapshots/web/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- with Loader.snap.png b/cypress/snapshots/web/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- with Loader.snap.png deleted file mode 100644 index 73ca66f35b..0000000000 Binary files a/cypress/snapshots/web/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- with Loader.snap.png and /dev/null differ diff --git a/cypress/snapshots/web/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- withAutoFocus.snap.png b/cypress/snapshots/web/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- withAutoFocus.snap.png deleted file mode 100644 index 77b2f09257..0000000000 Binary files a/cypress/snapshots/web/components/Button/ButtonBase.component-test.tsx/plasma-core Button -- withAutoFocus.snap.png and /dev/null differ diff --git a/cypress/snapshots/web/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-web ButtonGroup -- _gap.snap.png b/cypress/snapshots/web/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-web ButtonGroup -- _gap.snap.png new file mode 100644 index 0000000000..109b73f4e7 Binary files /dev/null and b/cypress/snapshots/web/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-web ButtonGroup -- _gap.snap.png differ diff --git a/cypress/snapshots/web/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-web ButtonGroup -- _orientation single button.snap.png b/cypress/snapshots/web/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-web ButtonGroup -- _orientation single button.snap.png new file mode 100644 index 0000000000..98ae199840 Binary files /dev/null and b/cypress/snapshots/web/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-web ButtonGroup -- _orientation single button.snap.png differ diff --git a/cypress/snapshots/web/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-web ButtonGroup -- _orientation stretching - filled.snap.png b/cypress/snapshots/web/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-web ButtonGroup -- _orientation stretching - filled.snap.png new file mode 100644 index 0000000000..838ff73b53 Binary files /dev/null and b/cypress/snapshots/web/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-web ButtonGroup -- _orientation stretching - filled.snap.png differ diff --git a/cypress/snapshots/web/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-web ButtonGroup -- _orientation.snap.png b/cypress/snapshots/web/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-web ButtonGroup -- _orientation.snap.png new file mode 100644 index 0000000000..c6e661b425 Binary files /dev/null and b/cypress/snapshots/web/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-web ButtonGroup -- _orientation.snap.png differ diff --git a/cypress/snapshots/web/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-web ButtonGroup -- _shape.snap.png b/cypress/snapshots/web/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-web ButtonGroup -- _shape.snap.png new file mode 100644 index 0000000000..abee77bfc6 Binary files /dev/null and b/cypress/snapshots/web/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-web ButtonGroup -- _shape.snap.png differ diff --git a/cypress/snapshots/web/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-web ButtonGroup -- _size.snap.png b/cypress/snapshots/web/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-web ButtonGroup -- _size.snap.png new file mode 100644 index 0000000000..6af2fc61f4 Binary files /dev/null and b/cypress/snapshots/web/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-web ButtonGroup -- _size.snap.png differ diff --git a/cypress/snapshots/web/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-web ButtonGroup -- _view.snap.png b/cypress/snapshots/web/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-web ButtonGroup -- _view.snap.png new file mode 100644 index 0000000000..e6bc12da1b Binary files /dev/null and b/cypress/snapshots/web/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-web ButtonGroup -- _view.snap.png differ diff --git a/cypress/snapshots/web/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-web ButtonGroup -- custom buttons.snap.png b/cypress/snapshots/web/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-web ButtonGroup -- custom buttons.snap.png new file mode 100644 index 0000000000..aa7d781396 Binary files /dev/null and b/cypress/snapshots/web/components/ButtonGroup/ButtonGroup.component-test.tsx/plasma-web ButtonGroup -- custom buttons.snap.png differ diff --git a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- set value.snap.png b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- set value.snap.png index 288ab12122..2a7c5c7ac9 100644 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- set value.snap.png and b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web Calendar -- set value.snap.png differ diff --git a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- set value.snap.png b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- set value.snap.png index 7335818041..f64f0d3ebc 100644 Binary files a/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- set value.snap.png and b/cypress/snapshots/web/components/Calendar/Calendar.component-test.tsx/plasma-web CalendarDouble -- set value.snap.png differ diff --git a/cypress/snapshots/web/components/Combobox/Combobox.component-test.tsx/plasma-web Combobox keyboard navigation -- multiple.snap.png b/cypress/snapshots/web/components/Combobox/Combobox.component-test.tsx/plasma-web Combobox keyboard navigation -- multiple.snap.png index 5e6419445c..f4179ad709 100644 Binary files a/cypress/snapshots/web/components/Combobox/Combobox.component-test.tsx/plasma-web Combobox keyboard navigation -- multiple.snap.png and b/cypress/snapshots/web/components/Combobox/Combobox.component-test.tsx/plasma-web Combobox keyboard navigation -- multiple.snap.png differ diff --git a/cypress/snapshots/web/components/Combobox/Combobox.component-test.tsx/plasma-web Combobox keyboard navigation -- single.snap.png b/cypress/snapshots/web/components/Combobox/Combobox.component-test.tsx/plasma-web Combobox keyboard navigation -- single.snap.png index 3b52103189..bcc1487d89 100644 Binary files a/cypress/snapshots/web/components/Combobox/Combobox.component-test.tsx/plasma-web Combobox keyboard navigation -- single.snap.png and b/cypress/snapshots/web/components/Combobox/Combobox.component-test.tsx/plasma-web Combobox keyboard navigation -- single.snap.png differ diff --git a/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- auto placement bottom.snap.png b/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- auto placement bottom.snap.png index 87f9617083..e90030f30d 100644 Binary files a/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- auto placement bottom.snap.png and b/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- auto placement bottom.snap.png differ diff --git a/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- auto placement top.snap.png b/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- auto placement top.snap.png index 37e859da29..a5ebe52adf 100644 Binary files a/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- auto placement top.snap.png and b/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- auto placement top.snap.png differ diff --git a/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- block and popup's width.snap.png b/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- block and popup's width.snap.png index 52be82c91f..7e8a122354 100644 Binary files a/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- block and popup's width.snap.png and b/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- block and popup's width.snap.png differ diff --git a/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- handling dropdown menu height.snap.png b/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- handling dropdown menu height.snap.png index c5d0b54ed4..d349f9c7e7 100644 Binary files a/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- handling dropdown menu height.snap.png and b/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- handling dropdown menu height.snap.png differ diff --git a/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- radius and padding.snap.png b/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- radius and padding.snap.png index c04194741a..c16cc1a24b 100644 Binary files a/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- radius and padding.snap.png and b/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- radius and padding.snap.png differ diff --git a/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- simple.snap.png b/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- simple.snap.png index cba3ecaca9..0d3c4b988e 100644 Binary files a/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- simple.snap.png and b/cypress/snapshots/web/components/Dropdown/Dropdown.component-test.tsx/plasma-hope Dropdown -- simple.snap.png differ diff --git a/cypress/snapshots/web/components/Modal/Modal.component-test.tsx/plasma-web Modal -- open.snap.png b/cypress/snapshots/web/components/Modal/Modal.component-test.tsx/plasma-web Modal -- open.snap.png index 4f223bf900..0c8d9d5a2d 100644 Binary files a/cypress/snapshots/web/components/Modal/Modal.component-test.tsx/plasma-web Modal -- open.snap.png and b/cypress/snapshots/web/components/Modal/Modal.component-test.tsx/plasma-web Modal -- open.snap.png differ diff --git a/cypress/snapshots/web/components/Modal/Modal.component-test.tsx/plasma-web Modal -- simple.snap.png b/cypress/snapshots/web/components/Modal/Modal.component-test.tsx/plasma-web Modal -- simple.snap.png index 4f223bf900..0c8d9d5a2d 100644 Binary files a/cypress/snapshots/web/components/Modal/Modal.component-test.tsx/plasma-web Modal -- simple.snap.png and b/cypress/snapshots/web/components/Modal/Modal.component-test.tsx/plasma-web Modal -- simple.snap.png differ diff --git a/cypress/snapshots/web/components/Modal/Modal.component-test.tsx/plasma-web Modal -- withBlur.snap.png b/cypress/snapshots/web/components/Modal/Modal.component-test.tsx/plasma-web Modal -- withBlur.snap.png index c955569f09..2e6906ee53 100644 Binary files a/cypress/snapshots/web/components/Modal/Modal.component-test.tsx/plasma-web Modal -- withBlur.snap.png and b/cypress/snapshots/web/components/Modal/Modal.component-test.tsx/plasma-web Modal -- withBlur.snap.png differ diff --git a/cypress/snapshots/web/components/Modal/Modal.component-test.tsx/plasma-web Modal -- without close icon.snap.png b/cypress/snapshots/web/components/Modal/Modal.component-test.tsx/plasma-web Modal -- without close icon.snap.png index b366317688..e132838f4f 100644 Binary files a/cypress/snapshots/web/components/Modal/Modal.component-test.tsx/plasma-web Modal -- without close icon.snap.png and b/cypress/snapshots/web/components/Modal/Modal.component-test.tsx/plasma-web Modal -- without close icon.snap.png differ diff --git a/cypress/snapshots/web/components/ModalBase/ModalBase.component-test.tsx/plasma-web ModalBase -- double close.snap.png b/cypress/snapshots/web/components/ModalBase/ModalBase.component-test.tsx/plasma-web ModalBase -- double close.snap.png index acf1e5cc0f..7d61c01196 100644 Binary files a/cypress/snapshots/web/components/ModalBase/ModalBase.component-test.tsx/plasma-web ModalBase -- double close.snap.png and b/cypress/snapshots/web/components/ModalBase/ModalBase.component-test.tsx/plasma-web ModalBase -- double close.snap.png differ diff --git a/cypress/snapshots/web/components/ModalBase/ModalBase.component-test.tsx/plasma-web ModalBase -- simple.snap.png b/cypress/snapshots/web/components/ModalBase/ModalBase.component-test.tsx/plasma-web ModalBase -- simple.snap.png index d4f69288cf..af03203829 100644 Binary files a/cypress/snapshots/web/components/ModalBase/ModalBase.component-test.tsx/plasma-web ModalBase -- simple.snap.png and b/cypress/snapshots/web/components/ModalBase/ModalBase.component-test.tsx/plasma-web ModalBase -- simple.snap.png differ diff --git a/cypress/snapshots/web/components/ModalBase/ModalBase.component-test.tsx/plasma-web ModalBase -- withBlur.snap.png b/cypress/snapshots/web/components/ModalBase/ModalBase.component-test.tsx/plasma-web ModalBase -- withBlur.snap.png index 2f0f356fe2..990dbe7dcd 100644 Binary files a/cypress/snapshots/web/components/ModalBase/ModalBase.component-test.tsx/plasma-web ModalBase -- withBlur.snap.png and b/cypress/snapshots/web/components/ModalBase/ModalBase.component-test.tsx/plasma-web ModalBase -- withBlur.snap.png differ diff --git a/cypress/snapshots/web/components/Notification/Notification.component-test.tsx/plasma-web Notification -- default.snap.png b/cypress/snapshots/web/components/Notification/Notification.component-test.tsx/plasma-web Notification -- default.snap.png index 4421083058..a2ce43f7e1 100644 Binary files a/cypress/snapshots/web/components/Notification/Notification.component-test.tsx/plasma-web Notification -- default.snap.png and b/cypress/snapshots/web/components/Notification/Notification.component-test.tsx/plasma-web Notification -- default.snap.png differ diff --git a/cypress/snapshots/web/components/Notification/Notification.component-test.tsx/plasma-web Notification -- icon positions.snap.png b/cypress/snapshots/web/components/Notification/Notification.component-test.tsx/plasma-web Notification -- icon positions.snap.png index 3598749473..97719a297f 100644 Binary files a/cypress/snapshots/web/components/Notification/Notification.component-test.tsx/plasma-web Notification -- icon positions.snap.png and b/cypress/snapshots/web/components/Notification/Notification.component-test.tsx/plasma-web Notification -- icon positions.snap.png differ diff --git a/cypress/snapshots/web/components/Notification/Notification.component-test.tsx/plasma-web Notification -- layout.snap.png b/cypress/snapshots/web/components/Notification/Notification.component-test.tsx/plasma-web Notification -- layout.snap.png index 79fcf67c22..791977e419 100644 Binary files a/cypress/snapshots/web/components/Notification/Notification.component-test.tsx/plasma-web Notification -- layout.snap.png and b/cypress/snapshots/web/components/Notification/Notification.component-test.tsx/plasma-web Notification -- layout.snap.png differ diff --git a/cypress/snapshots/web/components/Notification/Notification.component-test.tsx/plasma-web Notification -- long text.snap.png b/cypress/snapshots/web/components/Notification/Notification.component-test.tsx/plasma-web Notification -- long text.snap.png index 05345e3ff9..a52a4ef0b7 100644 Binary files a/cypress/snapshots/web/components/Notification/Notification.component-test.tsx/plasma-web Notification -- long text.snap.png and b/cypress/snapshots/web/components/Notification/Notification.component-test.tsx/plasma-web Notification -- long text.snap.png differ diff --git a/cypress/snapshots/web/components/Notification/Notification.component-test.tsx/plasma-web Notification -- oneline horizontal.snap.png b/cypress/snapshots/web/components/Notification/Notification.component-test.tsx/plasma-web Notification -- oneline horizontal.snap.png index 7473202a58..fd0abdb9e9 100644 Binary files a/cypress/snapshots/web/components/Notification/Notification.component-test.tsx/plasma-web Notification -- oneline horizontal.snap.png and b/cypress/snapshots/web/components/Notification/Notification.component-test.tsx/plasma-web Notification -- oneline horizontal.snap.png differ diff --git a/cypress/snapshots/web/components/Overlay/Overlay.component-test.tsx/plasma-web Overlay -- simple.snap.png b/cypress/snapshots/web/components/Overlay/Overlay.component-test.tsx/plasma-web Overlay -- simple.snap.png index cdee9affb6..7e08a199da 100644 Binary files a/cypress/snapshots/web/components/Overlay/Overlay.component-test.tsx/plasma-web Overlay -- simple.snap.png and b/cypress/snapshots/web/components/Overlay/Overlay.component-test.tsx/plasma-web Overlay -- simple.snap.png differ diff --git a/cypress/snapshots/web/components/Overlay/Overlay.component-test.tsx/plasma-web Overlay -- transparent.snap.png b/cypress/snapshots/web/components/Overlay/Overlay.component-test.tsx/plasma-web Overlay -- transparent.snap.png index 7e46c4f127..ed08b54274 100644 Binary files a/cypress/snapshots/web/components/Overlay/Overlay.component-test.tsx/plasma-web Overlay -- transparent.snap.png and b/cypress/snapshots/web/components/Overlay/Overlay.component-test.tsx/plasma-web Overlay -- transparent.snap.png differ diff --git a/cypress/snapshots/web/components/Overlay/Overlay.component-test.tsx/plasma-web Overlay -- withBlur.snap.png b/cypress/snapshots/web/components/Overlay/Overlay.component-test.tsx/plasma-web Overlay -- withBlur.snap.png index 9d36e28234..33dfded4c9 100644 Binary files a/cypress/snapshots/web/components/Overlay/Overlay.component-test.tsx/plasma-web Overlay -- withBlur.snap.png and b/cypress/snapshots/web/components/Overlay/Overlay.component-test.tsx/plasma-web Overlay -- withBlur.snap.png differ diff --git a/cypress/snapshots/web/components/PopupBase/PopupBase.component-test.tsx/plasma-web PopupBase -- frame.snap.png b/cypress/snapshots/web/components/PopupBase/PopupBase.component-test.tsx/plasma-web PopupBase -- frame.snap.png index 2f08226977..6ee69a4cb9 100644 Binary files a/cypress/snapshots/web/components/PopupBase/PopupBase.component-test.tsx/plasma-web PopupBase -- frame.snap.png and b/cypress/snapshots/web/components/PopupBase/PopupBase.component-test.tsx/plasma-web PopupBase -- frame.snap.png differ diff --git a/cypress/snapshots/web/components/PopupBase/PopupBase.component-test.tsx/plasma-web PopupBase -- placement basic.snap.png b/cypress/snapshots/web/components/PopupBase/PopupBase.component-test.tsx/plasma-web PopupBase -- placement basic.snap.png index 6f9306e4f3..bbad2cba6d 100644 Binary files a/cypress/snapshots/web/components/PopupBase/PopupBase.component-test.tsx/plasma-web PopupBase -- placement basic.snap.png and b/cypress/snapshots/web/components/PopupBase/PopupBase.component-test.tsx/plasma-web PopupBase -- placement basic.snap.png differ diff --git a/cypress/snapshots/web/components/PopupBase/PopupBase.component-test.tsx/plasma-web PopupBase -- placement combination + offset.snap.png b/cypress/snapshots/web/components/PopupBase/PopupBase.component-test.tsx/plasma-web PopupBase -- placement combination + offset.snap.png index dac08a2f8c..e4dc0a599d 100644 Binary files a/cypress/snapshots/web/components/PopupBase/PopupBase.component-test.tsx/plasma-web PopupBase -- placement combination + offset.snap.png and b/cypress/snapshots/web/components/PopupBase/PopupBase.component-test.tsx/plasma-web PopupBase -- placement combination + offset.snap.png differ diff --git a/cypress/snapshots/web/components/PopupBase/PopupBase.component-test.tsx/plasma-web PopupBase -- placement combination.snap.png b/cypress/snapshots/web/components/PopupBase/PopupBase.component-test.tsx/plasma-web PopupBase -- placement combination.snap.png index 579627948c..174085e515 100644 Binary files a/cypress/snapshots/web/components/PopupBase/PopupBase.component-test.tsx/plasma-web PopupBase -- placement combination.snap.png and b/cypress/snapshots/web/components/PopupBase/PopupBase.component-test.tsx/plasma-web PopupBase -- placement combination.snap.png differ diff --git a/cypress/snapshots/web/components/PopupBase/PopupBase.component-test.tsx/plasma-web PopupBase -- simple.snap.png b/cypress/snapshots/web/components/PopupBase/PopupBase.component-test.tsx/plasma-web PopupBase -- simple.snap.png index c645d99421..5c79d56538 100644 Binary files a/cypress/snapshots/web/components/PopupBase/PopupBase.component-test.tsx/plasma-web PopupBase -- simple.snap.png and b/cypress/snapshots/web/components/PopupBase/PopupBase.component-test.tsx/plasma-web PopupBase -- simple.snap.png differ diff --git a/cypress/snapshots/web/components/Skeleton/Skeleton.component-test.tsx/plasma-core Skeleton -- withSkeleton -- simple.snap.png b/cypress/snapshots/web/components/Skeleton/Skeleton.component-test.tsx/plasma-core Skeleton -- withSkeleton -- simple.snap.png index 878ef088fa..780d0ed60c 100644 Binary files a/cypress/snapshots/web/components/Skeleton/Skeleton.component-test.tsx/plasma-core Skeleton -- withSkeleton -- simple.snap.png and b/cypress/snapshots/web/components/Skeleton/Skeleton.component-test.tsx/plasma-core Skeleton -- withSkeleton -- simple.snap.png differ diff --git a/cypress/snapshots/web/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- clearTimeout on hide.snap.png b/cypress/snapshots/web/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- clearTimeout on hide.snap.png index 37b51f7a79..311fb53011 100644 Binary files a/cypress/snapshots/web/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- clearTimeout on hide.snap.png and b/cypress/snapshots/web/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- clearTimeout on hide.snap.png differ diff --git a/cypress/snapshots/web/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- offset.snap.png b/cypress/snapshots/web/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- offset.snap.png index 11dd7c21a2..904fcd28ee 100644 Binary files a/cypress/snapshots/web/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- offset.snap.png and b/cypress/snapshots/web/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- offset.snap.png differ diff --git a/cypress/snapshots/web/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- _pilled.snap.png b/cypress/snapshots/web/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- _pilled.snap.png index ac8fb8b45b..fb86368f4f 100644 Binary files a/cypress/snapshots/web/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- _pilled.snap.png and b/cypress/snapshots/web/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- _pilled.snap.png differ diff --git a/cypress/snapshots/web/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- _position.snap.png b/cypress/snapshots/web/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- _position.snap.png index a213df88c5..237df6d51c 100644 Binary files a/cypress/snapshots/web/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- _position.snap.png and b/cypress/snapshots/web/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- _position.snap.png differ diff --git a/cypress/snapshots/web/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- dumm.snap.png b/cypress/snapshots/web/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- dumm.snap.png index 354b20f1b5..69c69c6b5e 100644 Binary files a/cypress/snapshots/web/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- dumm.snap.png and b/cypress/snapshots/web/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- dumm.snap.png differ diff --git a/cypress/snapshots/web/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- showToast.snap.png b/cypress/snapshots/web/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- showToast.snap.png index 23812cec34..627912045c 100644 Binary files a/cypress/snapshots/web/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- showToast.snap.png and b/cypress/snapshots/web/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- showToast.snap.png differ diff --git a/cypress/snapshots/web/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- timeout.snap.png b/cypress/snapshots/web/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- timeout.snap.png index 23812cec34..627912045c 100644 Binary files a/cypress/snapshots/web/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- timeout.snap.png and b/cypress/snapshots/web/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- timeout.snap.png differ diff --git a/cypress/snapshots/web/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- two lines additional content.snap.png b/cypress/snapshots/web/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- two lines additional content.snap.png index 9407ba284b..fe5ec985b1 100644 Binary files a/cypress/snapshots/web/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- two lines additional content.snap.png and b/cypress/snapshots/web/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- two lines additional content.snap.png differ diff --git a/cypress/snapshots/web/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- two lines.snap.png b/cypress/snapshots/web/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- two lines.snap.png index 128112ff4a..df4c6cc1d4 100644 Binary files a/cypress/snapshots/web/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- two lines.snap.png and b/cypress/snapshots/web/components/Toast/ToastBase.component-test.tsx/plasma-core Toast -- useToast -- two lines.snap.png differ diff --git a/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/empty.snap.png b/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/empty.snap.png index 4e139e3c04..8413b5cbe9 100644 Binary files a/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/empty.snap.png and b/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/empty.snap.png differ diff --git a/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/multiple.snap.png b/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/multiple.snap.png index 4e303d375c..4a341dc525 100644 Binary files a/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/multiple.snap.png and b/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/multiple.snap.png differ diff --git a/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- interaction.snap.png b/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- interaction.snap.png index bf57087f72..74481cfa30 100644 Binary files a/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- interaction.snap.png and b/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- interaction.snap.png differ diff --git a/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- isOpen false.snap.png b/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- isOpen false.snap.png index 705c18fc3d..34cca79019 100644 Binary files a/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- isOpen false.snap.png and b/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- isOpen false.snap.png differ diff --git a/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- long text.snap.png b/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- long text.snap.png index 818068b75e..1348e217c8 100644 Binary files a/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- long text.snap.png and b/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- long text.snap.png differ diff --git a/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- multiple placement.snap.png b/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- multiple placement.snap.png index c1652c5a65..a37f76179b 100644 Binary files a/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- multiple placement.snap.png and b/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- multiple placement.snap.png differ diff --git a/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- out of bounds + multiple placement.snap.png b/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- out of bounds + multiple placement.snap.png index e4ed3e4170..e3e36c0362 100644 Binary files a/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- out of bounds + multiple placement.snap.png and b/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- out of bounds + multiple placement.snap.png differ diff --git a/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- simple.snap.png b/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- simple.snap.png index a461baa091..589309d320 100644 Binary files a/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- simple.snap.png and b/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- simple.snap.png differ diff --git a/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- wrapper overflow scroll.snap.png b/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- wrapper overflow scroll.snap.png index 0ad1bc3b6a..a05c20f942 100644 Binary files a/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- wrapper overflow scroll.snap.png and b/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/plasma-web Tooltip -- wrapper overflow scroll.snap.png differ diff --git a/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/single.snap.png b/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/single.snap.png index bb516b26a7..1a6b87e30b 100644 Binary files a/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/single.snap.png and b/cypress/snapshots/web/components/Tooltip/Tooltip.component-test.tsx/single.snap.png differ diff --git a/packages/caldera-online/api/caldera-online.api.md b/packages/caldera-online/api/caldera-online.api.md index 9236ba60e0..66ce3cd531 100644 --- a/packages/caldera-online/api/caldera-online.api.md +++ b/packages/caldera-online/api/caldera-online.api.md @@ -21,6 +21,7 @@ import { bodyXXS } from '@salutejs/plasma-new-hope'; import { bodyXXSBold } from '@salutejs/plasma-new-hope'; import { BoldProps } from '@salutejs/plasma-new-hope/types/components/Typography/Typography.types'; import { ButtonHTMLAttributes } from 'react'; +import { ButtonProps as ButtonProps_2 } from '@salutejs/plasma-new-hope/styled-components'; import { CustomDropdownProps } from '@salutejs/plasma-new-hope/types/components/Dropdown/Dropdown.types'; import { CustomToastProps } from '@salutejs/plasma-new-hope/types/components/Toast/Toast.types'; import { DropdownPlacement } from '@salutejs/plasma-new-hope/styled-components'; @@ -155,8 +156,8 @@ export { bodyXXSBold } // @public export const Button: FunctionComponent & ButtonHTMLAttributes & { -text?: string | undefined; -contentLeft?: ReactNode; -contentRight?: ReactNode; -isLoading?: boolean | undefined; -loader?: ReactNode; -stretch?: boolean | undefined; -square?: boolean | undefined; -focused?: boolean | undefined; -pin?: "square-square" | "square-clear" | "clear-square" | "clear-clear" | "clear-circle" | "circle-clear" | "circle-circle" | undefined; -view?: string | undefined; -size?: string | undefined; -} & RefAttributes>; +stretching: { +auto: string; +filled: string; +fixed: string; +}; +}> & ButtonProps_2 & RefAttributes>; // Warning: (ae-forgotten-export) The symbol "ButtonComponent" needs to be exported by the entry point index.d.ts // @@ -479,7 +473,9 @@ view?: string | undefined; } & RefAttributes) | (HTMLAttributes & { width: number; height: number; -size?: undefined; +size?: undefined; /** +* @deprecated +*/ view?: string | undefined; } & RefAttributes) | (HTMLAttributes & { width: string; diff --git a/packages/caldera-online/src/components/Button/Button.config.ts b/packages/caldera-online/src/components/Button/Button.config.ts index 66a58e781b..59a25fdc98 100644 --- a/packages/caldera-online/src/components/Button/Button.config.ts +++ b/packages/caldera-online/src/components/Button/Button.config.ts @@ -2,13 +2,13 @@ import { css, buttonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { defaults: { - view: 'default', + view: 'primary', focused: 'true', size: 'm', }, variations: { view: { - default: css` + primary: css` ${buttonTokens.buttonColor}: var(--inverse-text-primary); ${buttonTokens.buttonBackgroundColor}: var(--surface-solid-default); ${buttonTokens.buttonColorHover}: var(--inverse-text-primary); @@ -24,7 +24,7 @@ export const config = { var(--surface-solid-default) 80% ); `, - primary: css` + accent: css` ${buttonTokens.buttonColor}: var(--on-dark-text-primary); ${buttonTokens.buttonBackgroundColor}: var(--surface-accent); ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary); @@ -96,103 +96,148 @@ export const config = { size: { l: css` ${buttonTokens.buttonHeight}: 3.5rem; + ${buttonTokens.buttonWidth}: 12.5rem; ${buttonTokens.buttonPadding}: 1.5rem; ${buttonTokens.buttonRadius}: 0.875rem; - + ${buttonTokens.buttonScaleActive}: 0.98; + ${buttonTokens.buttonScaleHover}: 1.02; ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + + ${buttonTokens.buttonSpinnerSize}: 22px; + ${buttonTokens.buttonSpinnerColor}: inherit; `, lr: css` ${buttonTokens.buttonHeight}: 3.5rem; - + ${buttonTokens.buttonWidth}: 12.5rem; + ${buttonTokens.buttonScaleActive}: 0.98; + ${buttonTokens.buttonScaleHover}: 1.02; ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + + ${buttonTokens.buttonSpinnerSize}: 22px; + ${buttonTokens.buttonSpinnerColor}: inherit; `, m: css` ${buttonTokens.buttonHeight}: 3rem; + ${buttonTokens.buttonWidth}: 11.25rem; ${buttonTokens.buttonPadding}: 1.25rem; ${buttonTokens.buttonRadius}: 0.75rem; - + ${buttonTokens.buttonScaleActive}: 0.98; + ${buttonTokens.buttonScaleHover}: 1.02; ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + + ${buttonTokens.buttonSpinnerSize}: 22px; + ${buttonTokens.buttonSpinnerColor}: inherit; `, mr: css` ${buttonTokens.buttonHeight}: 3rem; - + ${buttonTokens.buttonScaleActive}: 0.98; + ${buttonTokens.buttonWidth}: 11.25rem; + ${buttonTokens.buttonScaleHover}: 1.02; ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + + ${buttonTokens.buttonSpinnerSize}: 22px; + ${buttonTokens.buttonSpinnerColor}: inherit; `, s: css` ${buttonTokens.buttonHeight}: 2.5rem; + ${buttonTokens.buttonWidth}: 11.25rem; ${buttonTokens.buttonPadding}: 1rem; ${buttonTokens.buttonRadius}: 0.625rem; - + ${buttonTokens.buttonScaleActive}: 0.98; + ${buttonTokens.buttonScaleHover}: 1.02; ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + + ${buttonTokens.buttonSpinnerSize}: 22px; + ${buttonTokens.buttonSpinnerColor}: inherit; `, sr: css` ${buttonTokens.buttonHeight}: 2.5rem; - + ${buttonTokens.buttonWidth}: 11.25rem; + ${buttonTokens.buttonScaleActive}: 0.98; + ${buttonTokens.buttonScaleHover}: 1.02; ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + + ${buttonTokens.buttonSpinnerSize}: 22px; + ${buttonTokens.buttonSpinnerColor}: inherit; `, xs: css` ${buttonTokens.buttonHeight}: 2rem; + ${buttonTokens.buttonWidth}: 10rem; ${buttonTokens.buttonPadding}: 0.75rem; ${buttonTokens.buttonRadius}: 0.5rem; - + ${buttonTokens.buttonScaleActive}: 0.98; + ${buttonTokens.buttonScaleHover}: 1.02; ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${buttonTokens.buttonSpinnerSize}: 16px; + ${buttonTokens.buttonSpinnerColor}: inherit; `, xsr: css` ${buttonTokens.buttonHeight}: 2rem; - + ${buttonTokens.buttonWidth}: 10rem; + ${buttonTokens.buttonScaleActive}: 0.98; + ${buttonTokens.buttonScaleHover}: 1.02; ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${buttonTokens.buttonSpinnerSize}: 16px; + ${buttonTokens.buttonSpinnerColor}: inherit; `, xxs: css` ${buttonTokens.buttonHeight}: 1.5rem; + ${buttonTokens.buttonWidth}: 8.75rem; ${buttonTokens.buttonPadding}: 0.625rem; ${buttonTokens.buttonRadius}: 0.375rem; - + ${buttonTokens.buttonScaleActive}: 0.98; + ${buttonTokens.buttonScaleHover}: 1.02; ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${buttonTokens.buttonSpinnerSize}: 12px; + ${buttonTokens.buttonSpinnerColor}: inherit; `, }, disabled: { @@ -205,5 +250,10 @@ export const config = { ${buttonTokens.buttonFocusColor}: var(--surface-accent); `, }, + stretching: { + auto: css``, + filled: css``, + fixed: css``, + }, }, }; diff --git a/packages/caldera-online/src/components/Button/Button.stories.tsx b/packages/caldera-online/src/components/Button/Button.stories.tsx index aeb5040ef5..efe46bc650 100644 --- a/packages/caldera-online/src/components/Button/Button.stories.tsx +++ b/packages/caldera-online/src/components/Button/Button.stories.tsx @@ -10,8 +10,9 @@ import type { ButtonProps as Base } from '.'; type ButtonProps = ComponentProps; -const views = ['default', 'primary', 'secondary', 'success', 'warning', 'critical', 'clear']; +const views = ['accent', 'primary', 'secondary', 'success', 'warning', 'critical', 'clear']; const sizes = ['l', 'm', 's', 'xs', 'xxs']; +const stretching = ['auto', 'filled', 'fixed']; const pins = [ 'square-square', 'square-clear', @@ -57,6 +58,12 @@ const meta: Meta = { type: 'select', }, }, + stretching: { + options: stretching, + control: { + type: 'select', + }, + }, view: { options: views, control: { @@ -81,7 +88,7 @@ const iconSize = { export const Default: StoryObj = { args: { - view: 'default', + view: 'primary', size: 'l', disabled: false, text: 'Label', @@ -89,7 +96,7 @@ export const Default: StoryObj = { isLoading: false, focused: true, square: false, - stretch: false, + stretching: 'auto', onClick, onFocus, onBlur, diff --git a/packages/caldera/api/caldera.api.md b/packages/caldera/api/caldera.api.md index 35c4c30b56..45f298ea4d 100644 --- a/packages/caldera/api/caldera.api.md +++ b/packages/caldera/api/caldera.api.md @@ -21,6 +21,7 @@ import { bodyXXS } from '@salutejs/plasma-new-hope'; import { bodyXXSBold } from '@salutejs/plasma-new-hope'; import { BoldProps } from '@salutejs/plasma-new-hope/types/components/Typography/Typography.types'; import { ButtonHTMLAttributes } from 'react'; +import { ButtonProps as ButtonProps_2 } from '@salutejs/plasma-new-hope/styled-components'; import { CustomDropdownProps } from '@salutejs/plasma-new-hope/types/components/Dropdown/Dropdown.types'; import { CustomToastProps } from '@salutejs/plasma-new-hope/types/components/Toast/Toast.types'; import { DropdownPlacement } from '@salutejs/plasma-new-hope/styled-components'; @@ -155,8 +156,8 @@ export { bodyXXSBold } // @public export const Button: FunctionComponent & ButtonHTMLAttributes & { -text?: string | undefined; -contentLeft?: ReactNode; -contentRight?: ReactNode; -isLoading?: boolean | undefined; -loader?: ReactNode; -stretch?: boolean | undefined; -square?: boolean | undefined; -focused?: boolean | undefined; -pin?: "square-square" | "square-clear" | "clear-square" | "clear-clear" | "clear-circle" | "circle-clear" | "circle-circle" | undefined; -view?: string | undefined; -size?: string | undefined; -} & RefAttributes>; +stretching: { +auto: string; +filled: string; +fixed: string; +}; +}> & ButtonProps_2 & RefAttributes>; // Warning: (ae-forgotten-export) The symbol "ButtonComponent" needs to be exported by the entry point index.d.ts // @@ -479,7 +473,9 @@ view?: string | undefined; } & RefAttributes) | (HTMLAttributes & { width: number; height: number; -size?: undefined; +size?: undefined; /** +* @deprecated +*/ view?: string | undefined; } & RefAttributes) | (HTMLAttributes & { width: string; diff --git a/packages/caldera/src/components/Button/Button.config.ts b/packages/caldera/src/components/Button/Button.config.ts index 66a58e781b..59a25fdc98 100644 --- a/packages/caldera/src/components/Button/Button.config.ts +++ b/packages/caldera/src/components/Button/Button.config.ts @@ -2,13 +2,13 @@ import { css, buttonTokens } from '@salutejs/plasma-new-hope/styled-components'; export const config = { defaults: { - view: 'default', + view: 'primary', focused: 'true', size: 'm', }, variations: { view: { - default: css` + primary: css` ${buttonTokens.buttonColor}: var(--inverse-text-primary); ${buttonTokens.buttonBackgroundColor}: var(--surface-solid-default); ${buttonTokens.buttonColorHover}: var(--inverse-text-primary); @@ -24,7 +24,7 @@ export const config = { var(--surface-solid-default) 80% ); `, - primary: css` + accent: css` ${buttonTokens.buttonColor}: var(--on-dark-text-primary); ${buttonTokens.buttonBackgroundColor}: var(--surface-accent); ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary); @@ -96,103 +96,148 @@ export const config = { size: { l: css` ${buttonTokens.buttonHeight}: 3.5rem; + ${buttonTokens.buttonWidth}: 12.5rem; ${buttonTokens.buttonPadding}: 1.5rem; ${buttonTokens.buttonRadius}: 0.875rem; - + ${buttonTokens.buttonScaleActive}: 0.98; + ${buttonTokens.buttonScaleHover}: 1.02; ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + + ${buttonTokens.buttonSpinnerSize}: 22px; + ${buttonTokens.buttonSpinnerColor}: inherit; `, lr: css` ${buttonTokens.buttonHeight}: 3.5rem; - + ${buttonTokens.buttonWidth}: 12.5rem; + ${buttonTokens.buttonScaleActive}: 0.98; + ${buttonTokens.buttonScaleHover}: 1.02; ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + + ${buttonTokens.buttonSpinnerSize}: 22px; + ${buttonTokens.buttonSpinnerColor}: inherit; `, m: css` ${buttonTokens.buttonHeight}: 3rem; + ${buttonTokens.buttonWidth}: 11.25rem; ${buttonTokens.buttonPadding}: 1.25rem; ${buttonTokens.buttonRadius}: 0.75rem; - + ${buttonTokens.buttonScaleActive}: 0.98; + ${buttonTokens.buttonScaleHover}: 1.02; ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + + ${buttonTokens.buttonSpinnerSize}: 22px; + ${buttonTokens.buttonSpinnerColor}: inherit; `, mr: css` ${buttonTokens.buttonHeight}: 3rem; - + ${buttonTokens.buttonScaleActive}: 0.98; + ${buttonTokens.buttonWidth}: 11.25rem; + ${buttonTokens.buttonScaleHover}: 1.02; ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + + ${buttonTokens.buttonSpinnerSize}: 22px; + ${buttonTokens.buttonSpinnerColor}: inherit; `, s: css` ${buttonTokens.buttonHeight}: 2.5rem; + ${buttonTokens.buttonWidth}: 11.25rem; ${buttonTokens.buttonPadding}: 1rem; ${buttonTokens.buttonRadius}: 0.625rem; - + ${buttonTokens.buttonScaleActive}: 0.98; + ${buttonTokens.buttonScaleHover}: 1.02; ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + + ${buttonTokens.buttonSpinnerSize}: 22px; + ${buttonTokens.buttonSpinnerColor}: inherit; `, sr: css` ${buttonTokens.buttonHeight}: 2.5rem; - + ${buttonTokens.buttonWidth}: 11.25rem; + ${buttonTokens.buttonScaleActive}: 0.98; + ${buttonTokens.buttonScaleHover}: 1.02; ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + + ${buttonTokens.buttonSpinnerSize}: 22px; + ${buttonTokens.buttonSpinnerColor}: inherit; `, xs: css` ${buttonTokens.buttonHeight}: 2rem; + ${buttonTokens.buttonWidth}: 10rem; ${buttonTokens.buttonPadding}: 0.75rem; ${buttonTokens.buttonRadius}: 0.5rem; - + ${buttonTokens.buttonScaleActive}: 0.98; + ${buttonTokens.buttonScaleHover}: 1.02; ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${buttonTokens.buttonSpinnerSize}: 16px; + ${buttonTokens.buttonSpinnerColor}: inherit; `, xsr: css` ${buttonTokens.buttonHeight}: 2rem; - + ${buttonTokens.buttonWidth}: 10rem; + ${buttonTokens.buttonScaleActive}: 0.98; + ${buttonTokens.buttonScaleHover}: 1.02; ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${buttonTokens.buttonSpinnerSize}: 16px; + ${buttonTokens.buttonSpinnerColor}: inherit; `, xxs: css` ${buttonTokens.buttonHeight}: 1.5rem; + ${buttonTokens.buttonWidth}: 8.75rem; ${buttonTokens.buttonPadding}: 0.625rem; ${buttonTokens.buttonRadius}: 0.375rem; - + ${buttonTokens.buttonScaleActive}: 0.98; + ${buttonTokens.buttonScaleHover}: 1.02; ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${buttonTokens.buttonSpinnerSize}: 12px; + ${buttonTokens.buttonSpinnerColor}: inherit; `, }, disabled: { @@ -205,5 +250,10 @@ export const config = { ${buttonTokens.buttonFocusColor}: var(--surface-accent); `, }, + stretching: { + auto: css``, + filled: css``, + fixed: css``, + }, }, }; diff --git a/packages/caldera/src/components/Button/Button.stories.tsx b/packages/caldera/src/components/Button/Button.stories.tsx index aeb5040ef5..efe46bc650 100644 --- a/packages/caldera/src/components/Button/Button.stories.tsx +++ b/packages/caldera/src/components/Button/Button.stories.tsx @@ -10,8 +10,9 @@ import type { ButtonProps as Base } from '.'; type ButtonProps = ComponentProps; -const views = ['default', 'primary', 'secondary', 'success', 'warning', 'critical', 'clear']; +const views = ['accent', 'primary', 'secondary', 'success', 'warning', 'critical', 'clear']; const sizes = ['l', 'm', 's', 'xs', 'xxs']; +const stretching = ['auto', 'filled', 'fixed']; const pins = [ 'square-square', 'square-clear', @@ -57,6 +58,12 @@ const meta: Meta = { type: 'select', }, }, + stretching: { + options: stretching, + control: { + type: 'select', + }, + }, view: { options: views, control: { @@ -81,7 +88,7 @@ const iconSize = { export const Default: StoryObj = { args: { - view: 'default', + view: 'primary', size: 'l', disabled: false, text: 'Label', @@ -89,7 +96,7 @@ export const Default: StoryObj = { isLoading: false, focused: true, square: false, - stretch: false, + stretching: 'auto', onClick, onFocus, onBlur, diff --git a/packages/plasma-asdk/api/plasma-asdk.api.md b/packages/plasma-asdk/api/plasma-asdk.api.md index 81d9d6309b..8e9c98b333 100644 --- a/packages/plasma-asdk/api/plasma-asdk.api.md +++ b/packages/plasma-asdk/api/plasma-asdk.api.md @@ -9,7 +9,7 @@ import { AnchorHTMLAttributes } from 'react'; import type { BaseboxProps } from '@salutejs/plasma-new-hope/styled-components'; import { BoldProps } from '@salutejs/plasma-new-hope/types/components/Typography/Typography.types'; -import { ButtonHTMLAttributes } from 'react'; +import { ButtonProps as ButtonProps_2 } from '@salutejs/plasma-new-hope/styled-components'; import { Filter } from '@salutejs/plasma-new-hope/types/engines/types'; import { FocusProps } from '@salutejs/plasma-new-hope/styled-components'; import { FunctionComponent } from 'react'; @@ -18,7 +18,6 @@ import type { InputHTMLAttributes } from 'react'; import { LinkCustomProps } from '@salutejs/plasma-new-hope/types/components/Link/Link'; import { PropsType } from '@salutejs/plasma-new-hope/types/engines/types'; import { RadioGroup } from '@salutejs/plasma-new-hope/styled-components'; -import { ReactNode } from 'react'; import { RefAttributes } from 'react'; import { SpacingProps } from '@salutejs/plasma-new-hope/styled-components'; import { SSRProvider } from '@salutejs/plasma-new-hope/styled-components'; @@ -108,6 +107,7 @@ mr: string; s: string; sr: string; xs: string; +xsr: string; xxs: string; }; disabled: { @@ -116,19 +116,12 @@ true: string; focused: { true: string; }; -}> & ButtonHTMLAttributes & { -text?: string | undefined; -contentLeft?: ReactNode; -contentRight?: ReactNode; -isLoading?: boolean | undefined; -loader?: ReactNode; -stretch?: boolean | undefined; -square?: boolean | undefined; -focused?: boolean | undefined; -pin?: "square-square" | "square-clear" | "clear-square" | "clear-clear" | "clear-circle" | "circle-clear" | "circle-circle" | undefined; -view?: string | undefined; -size?: string | undefined; -} & RefAttributes>; +stretching: { +auto: string; +filled: string; +fixed: string; +}; +}> & ButtonProps_2 & RefAttributes>; // @public (undocumented) export const Button1: FunctionComponent) | (HTMLAttributes & { width: number; height: number; -size?: undefined; +size?: undefined; /** +* @deprecated +*/ view?: string | undefined; } & RefAttributes) | (HTMLAttributes & { width: string; diff --git a/packages/plasma-asdk/src/components/Button/Button.config.ts b/packages/plasma-asdk/src/components/Button/Button.config.ts index 467efbe5eb..7f004b478f 100644 --- a/packages/plasma-asdk/src/components/Button/Button.config.ts +++ b/packages/plasma-asdk/src/components/Button/Button.config.ts @@ -96,6 +96,7 @@ export const config = { size: { l: css` ${buttonTokens.buttonHeight}: 3.5rem; + ${buttonTokens.buttonWidth}: 12.5rem; ${buttonTokens.buttonPadding}: 1.5rem; ${buttonTokens.buttonRadius}: 0.875rem; ${buttonTokens.buttonScaleActive}: 0.98; @@ -106,9 +107,13 @@ export const config = { ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + + ${buttonTokens.buttonSpinnerSize}: 22px; + ${buttonTokens.buttonSpinnerColor}: inherit; `, lr: css` ${buttonTokens.buttonHeight}: 3.5rem; + ${buttonTokens.buttonWidth}: 12.5rem; ${buttonTokens.buttonScaleActive}: 0.98; ${buttonTokens.buttonScaleHover}: 1.02; ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); @@ -117,9 +122,13 @@ export const config = { ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + + ${buttonTokens.buttonSpinnerSize}: 22px; + ${buttonTokens.buttonSpinnerColor}: inherit; `, m: css` ${buttonTokens.buttonHeight}: 3rem; + ${buttonTokens.buttonWidth}: 11.25rem; ${buttonTokens.buttonPadding}: 1.25rem; ${buttonTokens.buttonRadius}: 0.75rem; ${buttonTokens.buttonScaleActive}: 0.98; @@ -130,10 +139,14 @@ export const config = { ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + + ${buttonTokens.buttonSpinnerSize}: 22px; + ${buttonTokens.buttonSpinnerColor}: inherit; `, mr: css` ${buttonTokens.buttonHeight}: 3rem; ${buttonTokens.buttonScaleActive}: 0.98; + ${buttonTokens.buttonWidth}: 11.25rem; ${buttonTokens.buttonScaleHover}: 1.02; ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); @@ -141,9 +154,13 @@ export const config = { ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + + ${buttonTokens.buttonSpinnerSize}: 22px; + ${buttonTokens.buttonSpinnerColor}: inherit; `, s: css` ${buttonTokens.buttonHeight}: 2.5rem; + ${buttonTokens.buttonWidth}: 11.25rem; ${buttonTokens.buttonPadding}: 1rem; ${buttonTokens.buttonRadius}: 0.625rem; ${buttonTokens.buttonScaleActive}: 0.98; @@ -154,9 +171,13 @@ export const config = { ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + + ${buttonTokens.buttonSpinnerSize}: 22px; + ${buttonTokens.buttonSpinnerColor}: inherit; `, sr: css` ${buttonTokens.buttonHeight}: 2.5rem; + ${buttonTokens.buttonWidth}: 11.25rem; ${buttonTokens.buttonScaleActive}: 0.98; ${buttonTokens.buttonScaleHover}: 1.02; ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); @@ -165,9 +186,13 @@ export const config = { ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + + ${buttonTokens.buttonSpinnerSize}: 22px; + ${buttonTokens.buttonSpinnerColor}: inherit; `, xs: css` ${buttonTokens.buttonHeight}: 2rem; + ${buttonTokens.buttonWidth}: 10rem; ${buttonTokens.buttonPadding}: 0.75rem; ${buttonTokens.buttonRadius}: 0.5rem; ${buttonTokens.buttonScaleActive}: 0.98; @@ -178,17 +203,41 @@ export const config = { ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${buttonTokens.buttonSpinnerSize}: 16px; + ${buttonTokens.buttonSpinnerColor}: inherit; + `, + xsr: css` + ${buttonTokens.buttonHeight}: 2rem; + ${buttonTokens.buttonWidth}: 10rem; + ${buttonTokens.buttonScaleActive}: 0.98; + ${buttonTokens.buttonScaleHover}: 1.02; + ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); + ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); + ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); + ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${buttonTokens.buttonSpinnerSize}: 16px; + ${buttonTokens.buttonSpinnerColor}: inherit; `, xxs: css` ${buttonTokens.buttonHeight}: 1.5rem; + ${buttonTokens.buttonWidth}: 8.75rem; + ${buttonTokens.buttonPadding}: 0.625rem; + ${buttonTokens.buttonRadius}: 0.375rem; ${buttonTokens.buttonScaleActive}: 0.98; ${buttonTokens.buttonScaleHover}: 1.02; - ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xxs-font-family); - ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xxs-font-size); - ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xxs-font-style); - ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xxs-bold-font-weight); - ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xxs-letter-spacing); - ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xxs-line-height); + ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); + ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); + ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); + ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${buttonTokens.buttonSpinnerSize}: 12px; + ${buttonTokens.buttonSpinnerColor}: inherit; `, }, disabled: { @@ -198,8 +247,13 @@ export const config = { }, focused: { true: css` - ${buttonTokens.buttonFocusColor}: var(--surface-accent-main); + ${buttonTokens.buttonFocusColor}: var(--surface-accent); `, }, + stretching: { + auto: css``, + filled: css``, + fixed: css``, + }, }, }; diff --git a/packages/plasma-asdk/src/components/Button/Button.stories.tsx b/packages/plasma-asdk/src/components/Button/Button.stories.tsx index 39222c0a01..efda06b661 100644 --- a/packages/plasma-asdk/src/components/Button/Button.stories.tsx +++ b/packages/plasma-asdk/src/components/Button/Button.stories.tsx @@ -10,8 +10,9 @@ import type { ButtonProps as Base } from '.'; type ButtonProps = ComponentProps; -const views = ['primary', 'secondary', 'success', 'warning', 'critical', 'clear']; +const views = ['default', 'primary', 'secondary', 'success', 'warning', 'critical', 'clear']; const sizes = ['l', 'm', 's', 'xs', 'xxs']; +const stretching = ['auto', 'filled', 'fixed']; const pins = [ 'square-square', 'square-clear', @@ -57,6 +58,12 @@ const meta: Meta = { type: 'select', }, }, + stretching: { + options: stretching, + control: { + type: 'select', + }, + }, view: { options: views, control: { @@ -81,7 +88,7 @@ const iconSize = { export const Default: StoryObj = { args: { - view: 'primary', + view: 'default', size: 'l', disabled: false, text: 'Label', @@ -89,7 +96,7 @@ export const Default: StoryObj = { isLoading: false, focused: true, square: false, - stretch: false, + stretching: 'auto', onClick, onFocus, onBlur, diff --git a/packages/plasma-b2c/api/plasma-b2c.api.md b/packages/plasma-b2c/api/plasma-b2c.api.md index 588f0e7473..f53daf7cc1 100644 --- a/packages/plasma-b2c/api/plasma-b2c.api.md +++ b/packages/plasma-b2c/api/plasma-b2c.api.md @@ -38,10 +38,9 @@ import { blurs } from '@salutejs/plasma-core'; import { BoldProps } from '@salutejs/plasma-new-hope/types/components/Typography/Typography.types'; import { Breakpoint } from '@salutejs/plasma-hope'; import { BreakWordProps } from '@salutejs/plasma-core'; +import { ButtonGroupProps } from '@salutejs/plasma-new-hope/styled-components'; import { ButtonHTMLAttributes } from 'react'; -import { ButtonProps } from '@salutejs/plasma-hope'; -import { ButtonView } from '@salutejs/plasma-hope'; -import { buttonViews } from '@salutejs/plasma-hope'; +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 { CalendarDoubleProps } from '@salutejs/plasma-new-hope/styled-components'; @@ -439,7 +438,39 @@ export { Breakpoint } export { BreakWordProps } // @public -export const Button: React_2.ForwardRefExoticComponent>; +export const Button: FunctionComponent & ButtonProps & RefAttributes>; // @public (undocumented) export const Button1: FunctionComponent & TypographyOldProps & RefAttributes>; -export { ButtonProps } +// @public +export const ButtonGroup: FunctionComponent & ButtonGroupProps & RefAttributes>; -export { ButtonView } +export { ButtonGroupProps } -export { buttonViews } +export { ButtonProps } // @public (undocumented) export const Calendar: FC; @@ -596,8 +666,8 @@ contentRight?: ReactNode; contentClearButton?: ReactNode; disabled?: boolean | undefined; readOnly?: boolean | undefined; -size?: "m" | "s" | "l" | "xs" | undefined; -view?: "secondary" | "default" | "positive" | undefined; +size?: "m" | "s" | "xs" | "l" | undefined; +view?: "default" | "secondary" | "positive" | undefined; onClear?: (() => void) | undefined; } & { children?: ReactNode; @@ -630,11 +700,11 @@ l: string; view: { default: string; }; -}> & ((Omit, "size" | "checked" | "type" | "target" | "onChange" | "value" | "minLength" | "maxLength"> & CustomComboboxProps & { +}> & ((Omit, "type" | "target" | "onChange" | "size" | "value" | "checked" | "minLength" | "maxLength"> & CustomComboboxProps & { valueType?: "single" | undefined; value?: ComboboxPrimitiveValue | undefined; onChangeValue?: ((value?: ComboboxPrimitiveValue | undefined) => void) | undefined; -} & RefAttributes) | (Omit, "size" | "checked" | "type" | "target" | "onChange" | "value" | "minLength" | "maxLength"> & CustomComboboxProps & { +} & RefAttributes) | (Omit, "type" | "target" | "onChange" | "size" | "value" | "checked" | "minLength" | "maxLength"> & CustomComboboxProps & { valueType: "multiple"; value?: ComboboxPrimitiveValue[] | undefined; onChangeValue?: ((value?: ComboboxPrimitiveValue[] | undefined) => void) | undefined; @@ -922,7 +992,7 @@ s: string; }; }> & HTMLAttributes & { size: "m" | "s" | "l"; -view: "warning" | "accent" | "default" | "positive" | "negative" | "inactive" | "black" | "white"; +view: "accent" | "default" | "warning" | "positive" | "negative" | "inactive" | "black" | "white"; } & RefAttributes>; export { IndicatorProps } diff --git a/packages/plasma-b2c/src/components/Button/Button.component-test.tsx b/packages/plasma-b2c/src/components/Button/Button.component-test.tsx index 7629cfc7f6..5d06293bfb 100644 --- a/packages/plasma-b2c/src/components/Button/Button.component-test.tsx +++ b/packages/plasma-b2c/src/components/Button/Button.component-test.tsx @@ -1,15 +1,114 @@ import React from 'react'; import { IconDownload } from '@salutejs/plasma-icons'; -import { mount, CypressTestDecorator, getComponent, PadMe } from '@salutejs/plasma-cy-utils'; +import { mount, CypressTestDecorator, getComponent, PadMe, SpaceMe } from '@salutejs/plasma-cy-utils'; -const Icon = () => ; +const Icon = () => ; describe('plasma-b2c: Button', () => { const Button = getComponent('Button'); + it('simple', () => { + mount( + + + , + ); + cy.matchImageSnapshot(); + }); + + it('with Icon', () => { + mount( + + + + + + + + + , + ); + + cy.get('[type="button"]').first().should('have.prop', 'tagName').should('eq', 'A'); + }); }); diff --git a/packages/plasma-b2c/src/components/Button/Button.config.ts b/packages/plasma-b2c/src/components/Button/Button.config.ts new file mode 100644 index 0000000000..59a25fdc98 --- /dev/null +++ b/packages/plasma-b2c/src/components/Button/Button.config.ts @@ -0,0 +1,259 @@ +import { css, buttonTokens } from '@salutejs/plasma-new-hope/styled-components'; + +export const config = { + defaults: { + view: 'primary', + focused: 'true', + size: 'm', + }, + variations: { + view: { + primary: css` + ${buttonTokens.buttonColor}: var(--inverse-text-primary); + ${buttonTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${buttonTokens.buttonColorHover}: var(--inverse-text-primary); + ${buttonTokens.buttonBackgroundColorHover}: color-mix( + in srgb, + var(--inverse-text-primary), + var(--surface-solid-default) 85% + ); + ${buttonTokens.buttonColorActive}: var(--inverse-text-primary); + ${buttonTokens.buttonBackgroundColorActive}: color-mix( + in srgb, + var(--inverse-text-primary), + var(--surface-solid-default) 80% + ); + `, + accent: css` + ${buttonTokens.buttonColor}: var(--on-dark-text-primary); + ${buttonTokens.buttonBackgroundColor}: var(--surface-accent); + ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary); + ${buttonTokens.buttonBackgroundColorHover}: color-mix(in srgb, var(--text-primary), var(--surface-accent) 85%); + ${buttonTokens.buttonColorActive}: var(--on-dark-text-primary); + ${buttonTokens.buttonBackgroundColorActive}: color-mix(in srgb, var(--text-primary), var(--surface-accent) 80%); + `, + secondary: css` + ${buttonTokens.buttonColor}: var(--text-primary); + ${buttonTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${buttonTokens.buttonColorHover}: var(--text-primary); + ${buttonTokens.buttonBackgroundColorHover}: color-mix( + in srgb, + var(--inverse-text-primary), + var(--surface-transparent-secondary) 85% + ); + ${buttonTokens.buttonColorActive}: var(--text-primary); + ${buttonTokens.buttonBackgroundColorActive}: color-mix( + in srgb, + var(--inverse-text-primary), + var(--surface-transparent-secondary) 80% + ); + `, + clear: css` + ${buttonTokens.buttonColor}: var(--text-primary); + ${buttonTokens.buttonBackgroundColor}: var(--surface-clear); + ${buttonTokens.buttonColorHover}: var(--text-primary); + ${buttonTokens.buttonBackgroundColorHover}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 95%); + ${buttonTokens.buttonColorActive}: var(--text-primary); + ${buttonTokens.buttonBackgroundColorActive}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 90%); + `, + success: css` + ${buttonTokens.buttonColor}: var(--on-dark-text-primary); + ${buttonTokens.buttonBackgroundColor}: var(--surface-positive); + ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary); + ${buttonTokens.buttonBackgroundColorHover}: color-mix( + in srgb, + var(--inverse-text-primary), + var(--surface-positive) 85% + ); + ${buttonTokens.buttonColorActive}: var(--on-dark-text-primary); + ${buttonTokens.buttonBackgroundColorActive}: color-mix(in srgb, var(--text-primary), var(--surface-positive) 85%); + `, + warning: css` + ${buttonTokens.buttonColor}: var(--on-dark-text-primary); + ${buttonTokens.buttonBackgroundColor}: var(--surface-warning); + ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary); + ${buttonTokens.buttonBackgroundColorHover}: color-mix( + in srgb, + var(--inverse-text-primary), + var(--surface-warning) 85% + ); + ${buttonTokens.buttonColorActive}: var(--on-dark-text-primary); + ${buttonTokens.buttonBackgroundColorActive}: color-mix(in srgb, var(--text-primary), var(--surface-warning) 85%); + `, + critical: css` + ${buttonTokens.buttonColor}: var(--on-dark-text-primary); + ${buttonTokens.buttonBackgroundColor}: var(--surface-negative); + ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary); + ${buttonTokens.buttonBackgroundColorHover}: color-mix( + in srgb, + var(--inverse-text-primary), + var(--surface-negative) 85% + ); + ${buttonTokens.buttonColorActive}: var(--on-dark-text-primary); + ${buttonTokens.buttonBackgroundColorActive}: color-mix(in srgb, var(--text-primary), var(--surface-negative) 85%); + `, + }, + size: { + l: css` + ${buttonTokens.buttonHeight}: 3.5rem; + ${buttonTokens.buttonWidth}: 12.5rem; + ${buttonTokens.buttonPadding}: 1.5rem; + ${buttonTokens.buttonRadius}: 0.875rem; + ${buttonTokens.buttonScaleActive}: 0.98; + ${buttonTokens.buttonScaleHover}: 1.02; + ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); + ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); + ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); + ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + + ${buttonTokens.buttonSpinnerSize}: 22px; + ${buttonTokens.buttonSpinnerColor}: inherit; + `, + lr: css` + ${buttonTokens.buttonHeight}: 3.5rem; + ${buttonTokens.buttonWidth}: 12.5rem; + ${buttonTokens.buttonScaleActive}: 0.98; + ${buttonTokens.buttonScaleHover}: 1.02; + ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); + ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); + ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); + ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + + ${buttonTokens.buttonSpinnerSize}: 22px; + ${buttonTokens.buttonSpinnerColor}: inherit; + `, + m: css` + ${buttonTokens.buttonHeight}: 3rem; + ${buttonTokens.buttonWidth}: 11.25rem; + ${buttonTokens.buttonPadding}: 1.25rem; + ${buttonTokens.buttonRadius}: 0.75rem; + ${buttonTokens.buttonScaleActive}: 0.98; + ${buttonTokens.buttonScaleHover}: 1.02; + ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); + ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); + ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); + ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + + ${buttonTokens.buttonSpinnerSize}: 22px; + ${buttonTokens.buttonSpinnerColor}: inherit; + `, + mr: css` + ${buttonTokens.buttonHeight}: 3rem; + ${buttonTokens.buttonScaleActive}: 0.98; + ${buttonTokens.buttonWidth}: 11.25rem; + ${buttonTokens.buttonScaleHover}: 1.02; + ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); + ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); + ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); + ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + + ${buttonTokens.buttonSpinnerSize}: 22px; + ${buttonTokens.buttonSpinnerColor}: inherit; + `, + s: css` + ${buttonTokens.buttonHeight}: 2.5rem; + ${buttonTokens.buttonWidth}: 11.25rem; + ${buttonTokens.buttonPadding}: 1rem; + ${buttonTokens.buttonRadius}: 0.625rem; + ${buttonTokens.buttonScaleActive}: 0.98; + ${buttonTokens.buttonScaleHover}: 1.02; + ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); + ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); + ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); + ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + + ${buttonTokens.buttonSpinnerSize}: 22px; + ${buttonTokens.buttonSpinnerColor}: inherit; + `, + sr: css` + ${buttonTokens.buttonHeight}: 2.5rem; + ${buttonTokens.buttonWidth}: 11.25rem; + ${buttonTokens.buttonScaleActive}: 0.98; + ${buttonTokens.buttonScaleHover}: 1.02; + ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); + ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); + ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); + ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + + ${buttonTokens.buttonSpinnerSize}: 22px; + ${buttonTokens.buttonSpinnerColor}: inherit; + `, + xs: css` + ${buttonTokens.buttonHeight}: 2rem; + ${buttonTokens.buttonWidth}: 10rem; + ${buttonTokens.buttonPadding}: 0.75rem; + ${buttonTokens.buttonRadius}: 0.5rem; + ${buttonTokens.buttonScaleActive}: 0.98; + ${buttonTokens.buttonScaleHover}: 1.02; + ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); + ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); + ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); + ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${buttonTokens.buttonSpinnerSize}: 16px; + ${buttonTokens.buttonSpinnerColor}: inherit; + `, + xsr: css` + ${buttonTokens.buttonHeight}: 2rem; + ${buttonTokens.buttonWidth}: 10rem; + ${buttonTokens.buttonScaleActive}: 0.98; + ${buttonTokens.buttonScaleHover}: 1.02; + ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); + ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); + ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); + ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${buttonTokens.buttonSpinnerSize}: 16px; + ${buttonTokens.buttonSpinnerColor}: inherit; + `, + xxs: css` + ${buttonTokens.buttonHeight}: 1.5rem; + ${buttonTokens.buttonWidth}: 8.75rem; + ${buttonTokens.buttonPadding}: 0.625rem; + ${buttonTokens.buttonRadius}: 0.375rem; + ${buttonTokens.buttonScaleActive}: 0.98; + ${buttonTokens.buttonScaleHover}: 1.02; + ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); + ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); + ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); + ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${buttonTokens.buttonSpinnerSize}: 12px; + ${buttonTokens.buttonSpinnerColor}: inherit; + `, + }, + disabled: { + true: css` + ${buttonTokens.buttonDisabledOpacity}: 0.4; + `, + }, + focused: { + true: css` + ${buttonTokens.buttonFocusColor}: var(--surface-accent); + `, + }, + stretching: { + auto: css``, + filled: css``, + fixed: css``, + }, + }, +}; diff --git a/packages/plasma-b2c/src/components/Button/Button.stories.tsx b/packages/plasma-b2c/src/components/Button/Button.stories.tsx index 3fb921e68c..d8a1ca8d76 100644 --- a/packages/plasma-b2c/src/components/Button/Button.stories.tsx +++ b/packages/plasma-b2c/src/components/Button/Button.stories.tsx @@ -1,25 +1,24 @@ -import React, { useState, useCallback, useRef } from 'react'; +import React, { useState, useCallback, useRef, ComponentProps } from 'react'; import type { StoryObj, Meta } from '@storybook/react'; import { action } from '@storybook/addon-actions'; import { IconPlaceholder, disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils'; -import { Button } from '.'; -import type { ButtonProps } from '.'; +import { Button } from './Button'; -type StoryButtonProps = ButtonProps & { contentType: string; isLoading: boolean }; - -const views = ['primary', 'secondary', 'success', 'critical']; +type StoryButtonProps = ComponentProps & { contentType: string; isLoading: boolean }; +const views = ['accent', 'primary', 'secondary', 'success', 'warning', 'critical', 'clear']; const sizes = ['l', 'm', 's', 'xs', 'xxs']; - +const stretching = ['auto', 'filled', 'fixed']; const pins = [ 'square-square', - 'circle-circle', - 'circle-clear', - 'clear-circle', - 'clear-clear', 'square-clear', 'clear-square', + 'clear-clear', + 'clear-circle', + 'circle-clear', + 'circle-circle', + '', ]; const contentTypes = ['Text', 'Text+Left', 'Text+Right', 'Left']; @@ -64,21 +63,13 @@ const meta: Meta = { type: 'select', }, }, - ...disableProps([ - 'theme', - 'as', - 'forwardedAs', - 'contentLeft', - 'contentRight', - 'shiftLeft', - 'shiftRight', - 'blur', - 'stretch', - 'square', - 'onClick', - 'onFocus', - 'onBlur', - ]), + stretching: { + options: stretching, + control: { + type: 'select', + }, + }, + ...disableProps(['theme', 'loader', 'onClick', 'onFocus', 'onBlur', 'contentLeft', 'contentRight']), }, }; @@ -90,13 +81,13 @@ const StoryBaseButton: Story = { args: { view: 'primary', size: 'l', - pin: 'square-square', disabled: false, - outlined: true, - focused: false, text: 'Label', contentType: 'Text', isLoading: false, + focused: true, + square: false, + stretching: 'auto', onClick, onFocus, onBlur, diff --git a/packages/plasma-b2c/src/components/Button/Button.tsx b/packages/plasma-b2c/src/components/Button/Button.tsx index 890e6392f3..df45c80c80 100644 --- a/packages/plasma-b2c/src/components/Button/Button.tsx +++ b/packages/plasma-b2c/src/components/Button/Button.tsx @@ -1,11 +1,11 @@ -import React, { forwardRef } from 'react'; -import { Button as ButtonHope } from '@salutejs/plasma-hope'; -import type { ButtonProps } from '@salutejs/plasma-hope'; +import { buttonConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components'; -export const ButtonBase = ButtonHope({ design: 'b2c' }); +import { config } from './Button.config'; + +const mergedConfig = mergeConfig(buttonConfig, config); +const ButtonComponent = component(mergedConfig); /** * Кнопка. - * Поддерживает несколько режимов отображения (`view`) и размеров (`size`). */ -export const Button = forwardRef((props, ref) => ); +export const Button = ButtonComponent; diff --git a/packages/plasma-b2c/src/components/Button/ButtonBase.component-test.tsx b/packages/plasma-b2c/src/components/Button/ButtonBase.component-test.tsx deleted file mode 120000 index 7284d23576..0000000000 --- a/packages/plasma-b2c/src/components/Button/ButtonBase.component-test.tsx +++ /dev/null @@ -1 +0,0 @@ -../../../../plasma-core/src/components/Button/Button.component-test.tsx \ No newline at end of file diff --git a/packages/plasma-b2c/src/components/Button/index.tsx b/packages/plasma-b2c/src/components/Button/index.tsx index 65564a5f8f..262da21e67 100644 --- a/packages/plasma-b2c/src/components/Button/index.tsx +++ b/packages/plasma-b2c/src/components/Button/index.tsx @@ -1,5 +1,3 @@ export { Button } from './Button'; -export type { ButtonProps } from '@salutejs/plasma-hope'; -export { buttonViews } from '@salutejs/plasma-hope'; -export type { ButtonView } from '@salutejs/plasma-hope'; +export type { ButtonProps } from '@salutejs/plasma-new-hope/styled-components'; diff --git a/packages/plasma-b2c/src/components/ButtonGroup/ButtonGroup.component-test.tsx b/packages/plasma-b2c/src/components/ButtonGroup/ButtonGroup.component-test.tsx new file mode 100644 index 0000000000..06be86619b --- /dev/null +++ b/packages/plasma-b2c/src/components/ButtonGroup/ButtonGroup.component-test.tsx @@ -0,0 +1,168 @@ +import React from 'react'; +import { mount, CypressTestDecorator, getComponent, PadMe } from '@salutejs/plasma-cy-utils'; + +describe('plasma-b2c: ButtonGroup', () => { + const ButtonGroup = getComponent('ButtonGroup'); + const Button = getComponent('Button'); + + const getButtons = () => [ + + , + ); + cy.matchImageSnapshot(); + }); + + it('with Icon', () => { + mount( + + + + + + + + + , + ); + + cy.get('[type="button"]').first().should('have.prop', 'tagName').should('eq', 'A'); + }); }); diff --git a/packages/plasma-web/src/components/Button/Button.config.ts b/packages/plasma-web/src/components/Button/Button.config.ts new file mode 100644 index 0000000000..59a25fdc98 --- /dev/null +++ b/packages/plasma-web/src/components/Button/Button.config.ts @@ -0,0 +1,259 @@ +import { css, buttonTokens } from '@salutejs/plasma-new-hope/styled-components'; + +export const config = { + defaults: { + view: 'primary', + focused: 'true', + size: 'm', + }, + variations: { + view: { + primary: css` + ${buttonTokens.buttonColor}: var(--inverse-text-primary); + ${buttonTokens.buttonBackgroundColor}: var(--surface-solid-default); + ${buttonTokens.buttonColorHover}: var(--inverse-text-primary); + ${buttonTokens.buttonBackgroundColorHover}: color-mix( + in srgb, + var(--inverse-text-primary), + var(--surface-solid-default) 85% + ); + ${buttonTokens.buttonColorActive}: var(--inverse-text-primary); + ${buttonTokens.buttonBackgroundColorActive}: color-mix( + in srgb, + var(--inverse-text-primary), + var(--surface-solid-default) 80% + ); + `, + accent: css` + ${buttonTokens.buttonColor}: var(--on-dark-text-primary); + ${buttonTokens.buttonBackgroundColor}: var(--surface-accent); + ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary); + ${buttonTokens.buttonBackgroundColorHover}: color-mix(in srgb, var(--text-primary), var(--surface-accent) 85%); + ${buttonTokens.buttonColorActive}: var(--on-dark-text-primary); + ${buttonTokens.buttonBackgroundColorActive}: color-mix(in srgb, var(--text-primary), var(--surface-accent) 80%); + `, + secondary: css` + ${buttonTokens.buttonColor}: var(--text-primary); + ${buttonTokens.buttonBackgroundColor}: var(--surface-transparent-secondary); + ${buttonTokens.buttonColorHover}: var(--text-primary); + ${buttonTokens.buttonBackgroundColorHover}: color-mix( + in srgb, + var(--inverse-text-primary), + var(--surface-transparent-secondary) 85% + ); + ${buttonTokens.buttonColorActive}: var(--text-primary); + ${buttonTokens.buttonBackgroundColorActive}: color-mix( + in srgb, + var(--inverse-text-primary), + var(--surface-transparent-secondary) 80% + ); + `, + clear: css` + ${buttonTokens.buttonColor}: var(--text-primary); + ${buttonTokens.buttonBackgroundColor}: var(--surface-clear); + ${buttonTokens.buttonColorHover}: var(--text-primary); + ${buttonTokens.buttonBackgroundColorHover}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 95%); + ${buttonTokens.buttonColorActive}: var(--text-primary); + ${buttonTokens.buttonBackgroundColorActive}: color-mix(in srgb, var(--text-primary), var(--surface-clear) 90%); + `, + success: css` + ${buttonTokens.buttonColor}: var(--on-dark-text-primary); + ${buttonTokens.buttonBackgroundColor}: var(--surface-positive); + ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary); + ${buttonTokens.buttonBackgroundColorHover}: color-mix( + in srgb, + var(--inverse-text-primary), + var(--surface-positive) 85% + ); + ${buttonTokens.buttonColorActive}: var(--on-dark-text-primary); + ${buttonTokens.buttonBackgroundColorActive}: color-mix(in srgb, var(--text-primary), var(--surface-positive) 85%); + `, + warning: css` + ${buttonTokens.buttonColor}: var(--on-dark-text-primary); + ${buttonTokens.buttonBackgroundColor}: var(--surface-warning); + ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary); + ${buttonTokens.buttonBackgroundColorHover}: color-mix( + in srgb, + var(--inverse-text-primary), + var(--surface-warning) 85% + ); + ${buttonTokens.buttonColorActive}: var(--on-dark-text-primary); + ${buttonTokens.buttonBackgroundColorActive}: color-mix(in srgb, var(--text-primary), var(--surface-warning) 85%); + `, + critical: css` + ${buttonTokens.buttonColor}: var(--on-dark-text-primary); + ${buttonTokens.buttonBackgroundColor}: var(--surface-negative); + ${buttonTokens.buttonColorHover}: var(--on-dark-text-primary); + ${buttonTokens.buttonBackgroundColorHover}: color-mix( + in srgb, + var(--inverse-text-primary), + var(--surface-negative) 85% + ); + ${buttonTokens.buttonColorActive}: var(--on-dark-text-primary); + ${buttonTokens.buttonBackgroundColorActive}: color-mix(in srgb, var(--text-primary), var(--surface-negative) 85%); + `, + }, + size: { + l: css` + ${buttonTokens.buttonHeight}: 3.5rem; + ${buttonTokens.buttonWidth}: 12.5rem; + ${buttonTokens.buttonPadding}: 1.5rem; + ${buttonTokens.buttonRadius}: 0.875rem; + ${buttonTokens.buttonScaleActive}: 0.98; + ${buttonTokens.buttonScaleHover}: 1.02; + ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); + ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); + ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); + ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + + ${buttonTokens.buttonSpinnerSize}: 22px; + ${buttonTokens.buttonSpinnerColor}: inherit; + `, + lr: css` + ${buttonTokens.buttonHeight}: 3.5rem; + ${buttonTokens.buttonWidth}: 12.5rem; + ${buttonTokens.buttonScaleActive}: 0.98; + ${buttonTokens.buttonScaleHover}: 1.02; + ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-l-font-family); + ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-l-font-size); + ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-l-font-style); + ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-l-bold-font-weight); + ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing); + ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-l-line-height); + + ${buttonTokens.buttonSpinnerSize}: 22px; + ${buttonTokens.buttonSpinnerColor}: inherit; + `, + m: css` + ${buttonTokens.buttonHeight}: 3rem; + ${buttonTokens.buttonWidth}: 11.25rem; + ${buttonTokens.buttonPadding}: 1.25rem; + ${buttonTokens.buttonRadius}: 0.75rem; + ${buttonTokens.buttonScaleActive}: 0.98; + ${buttonTokens.buttonScaleHover}: 1.02; + ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); + ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); + ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); + ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + + ${buttonTokens.buttonSpinnerSize}: 22px; + ${buttonTokens.buttonSpinnerColor}: inherit; + `, + mr: css` + ${buttonTokens.buttonHeight}: 3rem; + ${buttonTokens.buttonScaleActive}: 0.98; + ${buttonTokens.buttonWidth}: 11.25rem; + ${buttonTokens.buttonScaleHover}: 1.02; + ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-m-font-family); + ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-m-font-size); + ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-m-font-style); + ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-m-bold-font-weight); + ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing); + ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-m-line-height); + + ${buttonTokens.buttonSpinnerSize}: 22px; + ${buttonTokens.buttonSpinnerColor}: inherit; + `, + s: css` + ${buttonTokens.buttonHeight}: 2.5rem; + ${buttonTokens.buttonWidth}: 11.25rem; + ${buttonTokens.buttonPadding}: 1rem; + ${buttonTokens.buttonRadius}: 0.625rem; + ${buttonTokens.buttonScaleActive}: 0.98; + ${buttonTokens.buttonScaleHover}: 1.02; + ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); + ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); + ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); + ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + + ${buttonTokens.buttonSpinnerSize}: 22px; + ${buttonTokens.buttonSpinnerColor}: inherit; + `, + sr: css` + ${buttonTokens.buttonHeight}: 2.5rem; + ${buttonTokens.buttonWidth}: 11.25rem; + ${buttonTokens.buttonScaleActive}: 0.98; + ${buttonTokens.buttonScaleHover}: 1.02; + ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-s-font-family); + ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-s-font-size); + ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-s-font-style); + ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-s-bold-font-weight); + ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing); + ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-s-line-height); + + ${buttonTokens.buttonSpinnerSize}: 22px; + ${buttonTokens.buttonSpinnerColor}: inherit; + `, + xs: css` + ${buttonTokens.buttonHeight}: 2rem; + ${buttonTokens.buttonWidth}: 10rem; + ${buttonTokens.buttonPadding}: 0.75rem; + ${buttonTokens.buttonRadius}: 0.5rem; + ${buttonTokens.buttonScaleActive}: 0.98; + ${buttonTokens.buttonScaleHover}: 1.02; + ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); + ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); + ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); + ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${buttonTokens.buttonSpinnerSize}: 16px; + ${buttonTokens.buttonSpinnerColor}: inherit; + `, + xsr: css` + ${buttonTokens.buttonHeight}: 2rem; + ${buttonTokens.buttonWidth}: 10rem; + ${buttonTokens.buttonScaleActive}: 0.98; + ${buttonTokens.buttonScaleHover}: 1.02; + ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); + ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); + ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); + ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${buttonTokens.buttonSpinnerSize}: 16px; + ${buttonTokens.buttonSpinnerColor}: inherit; + `, + xxs: css` + ${buttonTokens.buttonHeight}: 1.5rem; + ${buttonTokens.buttonWidth}: 8.75rem; + ${buttonTokens.buttonPadding}: 0.625rem; + ${buttonTokens.buttonRadius}: 0.375rem; + ${buttonTokens.buttonScaleActive}: 0.98; + ${buttonTokens.buttonScaleHover}: 1.02; + ${buttonTokens.buttonFontFamily}: var(--plasma-typo-body-xs-font-family); + ${buttonTokens.buttonFontSize}: var(--plasma-typo-body-xs-font-size); + ${buttonTokens.buttonFontStyle}: var(--plasma-typo-body-xs-font-style); + ${buttonTokens.buttonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight); + ${buttonTokens.buttonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing); + ${buttonTokens.buttonLineHeight}: var(--plasma-typo-body-xs-line-height); + + ${buttonTokens.buttonSpinnerSize}: 12px; + ${buttonTokens.buttonSpinnerColor}: inherit; + `, + }, + disabled: { + true: css` + ${buttonTokens.buttonDisabledOpacity}: 0.4; + `, + }, + focused: { + true: css` + ${buttonTokens.buttonFocusColor}: var(--surface-accent); + `, + }, + stretching: { + auto: css``, + filled: css``, + fixed: css``, + }, + }, +}; diff --git a/packages/plasma-web/src/components/Button/Button.perftest.tsx b/packages/plasma-web/src/components/Button/Button.perftest.tsx index e9136f8433..e7e91536f3 100644 --- a/packages/plasma-web/src/components/Button/Button.perftest.tsx +++ b/packages/plasma-web/src/components/Button/Button.perftest.tsx @@ -1,6 +1,5 @@ import React from 'react'; - -import { IconPlaceholder } from '../../helpers'; +import { IconPlaceholder } from '@salutejs/plasma-sb-utils'; import { Button } from '.'; @@ -20,9 +19,15 @@ const defaultProps = { const text = 'Label' as const; export const Default = () => { + return ( + @@ -52,7 +52,7 @@ export function App() { ## Примеры ### Размер кнопки -Размер кнопки задается с помощью свойства `size`. Возможные значения свойства: `"l"`, `"m"` или `"s"`: +Размер кнопки задается с помощью свойства `size`. ```tsx live import React from 'react'; @@ -64,6 +64,8 @@ export function App() { - ); } diff --git a/website/plasma-web-docs/docs/components/ButtonGroup.mdx b/website/plasma-web-docs/docs/components/ButtonGroup.mdx new file mode 100644 index 0000000000..85924c2a60 --- /dev/null +++ b/website/plasma-web-docs/docs/components/ButtonGroup.mdx @@ -0,0 +1,132 @@ +--- +id: buttonGroup +title: ButtonGroup +--- + +import { PropsTable, Description, StorybookLink } from '@site/src/components'; + +# ButtonGroup + + + + +## Использование +Компонент `ButtonGroup` - это обертка для Button. Принимает в себя группу кнопок. + +```tsx live +import React from 'react'; +import { ButtonGroup, Button } from '@salutejs/plasma-web'; + +export function App() { + return ( + + {Array(5) + .fill(true) + .map((_, i) => ( +