@salutejs/plasma-new-hope 0.84.0-canary.1213.9187563305.0 → 0.84.0-dev.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Button/Button.css +6 -9
- package/cjs/components/Button/Button.js +2 -16
- package/cjs/components/Button/Button.js.map +1 -1
- package/cjs/components/Button/Button.styles.js +10 -31
- package/cjs/components/Button/Button.styles.js.map +1 -1
- package/cjs/components/Button/Button.styles_uqvh6u.css +5 -0
- package/cjs/components/Button/Button.tokens.js +0 -5
- package/cjs/components/Button/Button.tokens.js.map +1 -1
- package/cjs/components/Button/variations/_stretching/base.js +1 -1
- package/cjs/components/Button/variations/_stretching/base.js.map +1 -1
- package/{es/components/Button/variations/_stretching/base_hy8dc.css → cjs/components/Button/variations/_stretching/base_1lx0ute.css} +1 -1
- package/cjs/components/ButtonGroup/ButtonGroup.css +2 -2
- package/cjs/components/ButtonGroup/ButtonGroup.tokens.js +0 -1
- package/cjs/components/ButtonGroup/ButtonGroup.tokens.js.map +1 -1
- package/cjs/components/ButtonGroup/variations/_orientation/base.js +1 -1
- package/cjs/components/ButtonGroup/variations/_orientation/base.js.map +1 -1
- package/{es/components/ButtonGroup/variations/_orientation/base_y7z7cs.css → cjs/components/ButtonGroup/variations/_orientation/base_p85v51.css} +1 -1
- package/cjs/components/ButtonGroup/variations/_view/base.js +1 -1
- package/cjs/components/ButtonGroup/variations/_view/base.js.map +1 -1
- package/cjs/components/ButtonGroup/variations/_view/base_6k3uip.css +1 -0
- package/cjs/components/Combobox/hooks/useFocusController.js +1 -0
- package/cjs/components/Combobox/hooks/useFocusController.js.map +1 -1
- package/cjs/components/Drawer/Drawer.css +6 -9
- package/cjs/components/Drawer/ui/DrawerContent/DrawerContent.css +6 -9
- package/cjs/components/Header/ui/HeaderArrow/HeaderArrow.css +6 -9
- package/cjs/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
- package/cjs/components/Header/ui/HeaderArrow/HeaderArrow.js.map +1 -1
- package/cjs/components/IconButton/IconButton.css +7 -10
- package/cjs/components/IconButton/IconButton.styles.js +1 -1
- package/cjs/components/IconButton/{IconButton.styles_7v8g0e.css → IconButton.styles_1hknr37.css} +1 -1
- package/cjs/components/Notification/Notification.css +6 -9
- package/cjs/components/Notification/NotificationsProvider.css +6 -9
- package/cjs/components/Pagination/Pagination.css +8 -11
- package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +6 -9
- package/cjs/components/Panel/ui/PanelHeader/PanelHeader.css +6 -9
- package/cjs/components/Select/Select.css +6 -9
- package/cjs/components/Select/ui/SelectTarget/SelectTarget.css +6 -9
- package/cjs/components/Slider/Slider.css +69 -0
- package/cjs/components/Slider/Slider.js +48 -0
- package/cjs/components/Slider/Slider.js.map +1 -0
- package/cjs/components/Slider/Slider.tokens.js +79 -0
- package/cjs/components/Slider/Slider.tokens.js.map +1 -0
- package/cjs/components/Slider/components/Double/Double.css +62 -0
- package/cjs/components/Slider/components/Double/Double.js +306 -0
- package/cjs/components/Slider/components/Double/Double.js.map +1 -0
- package/cjs/components/Slider/components/Double/Double.styles.js +61 -0
- package/cjs/components/Slider/components/Double/Double.styles.js.map +1 -0
- package/cjs/components/Slider/components/Double/Double.styles_1jhda4u.css +7 -0
- package/cjs/components/Slider/components/Single/Single.css +16 -0
- package/cjs/components/Slider/components/Single/Single.js +164 -0
- package/cjs/components/Slider/components/Single/Single.js.map +1 -0
- package/cjs/components/Slider/components/Single/Single.styles.js +45 -0
- package/cjs/components/Slider/components/Single/Single.styles.js.map +1 -0
- package/cjs/components/Slider/components/Single/Single.styles_1r9f1e0.css +6 -0
- package/cjs/components/Slider/components/SliderBase/SliderBase.css +4 -0
- package/cjs/components/Slider/components/SliderBase/SliderBase.js +82 -0
- package/cjs/components/Slider/components/SliderBase/SliderBase.js.map +1 -0
- package/cjs/components/Slider/components/SliderBase/SliderBase.styles.js +33 -0
- package/cjs/components/Slider/components/SliderBase/SliderBase.styles.js.map +1 -0
- package/cjs/components/Slider/components/SliderBase/SliderBase.styles_7is2ll.css +4 -0
- package/cjs/components/Slider/ui/Handler/Handler.css +4 -0
- package/cjs/components/Slider/ui/Handler/Handler.js +168 -0
- package/cjs/components/Slider/ui/Handler/Handler.js.map +1 -0
- package/cjs/components/Slider/ui/Handler/Handler.styles.js +21 -0
- package/cjs/components/Slider/ui/Handler/Handler.styles.js.map +1 -0
- package/cjs/components/Slider/ui/Handler/Handler.styles_8crx5z.css +2 -0
- package/cjs/components/Slider/ui/Thumb/Thumb.css +1 -0
- package/cjs/components/Slider/ui/Thumb/Thumb.js +31 -0
- package/cjs/components/Slider/ui/Thumb/Thumb.js.map +1 -0
- package/cjs/components/Slider/ui/Thumb/Thumb.styles.js +15 -0
- package/cjs/components/Slider/ui/Thumb/Thumb.styles.js.map +1 -0
- package/cjs/components/Slider/ui/Thumb/Thumb.styles_4w4gzn.css +1 -0
- package/cjs/components/Slider/utils/index.js +56 -0
- package/cjs/components/Slider/utils/index.js.map +1 -0
- package/cjs/components/Slider/variations/_disabled/base.js +9 -0
- package/cjs/components/Slider/variations/_disabled/base.js.map +1 -0
- package/cjs/components/Slider/variations/_disabled/base_x642ct.css +1 -0
- package/cjs/components/Slider/variations/_size/base.js +9 -0
- package/cjs/components/Slider/variations/_size/base.js.map +1 -0
- package/cjs/components/Slider/variations/_size/base_x642ct.css +1 -0
- package/cjs/components/Slider/variations/_view/base.js +9 -0
- package/cjs/components/Slider/variations/_view/base.js.map +1 -0
- package/cjs/components/Slider/variations/_view/base_x642ct.css +1 -0
- package/cjs/components/TextField/TextField.js +12 -3
- package/cjs/components/TextField/TextField.js.map +1 -1
- package/cjs/components/Toast/Toast.css +6 -9
- package/cjs/components/Toast/ToastController.css +6 -9
- package/cjs/engines/common.js +4 -0
- package/cjs/engines/common.js.map +1 -1
- package/cjs/engines/index.js.map +1 -1
- package/cjs/hooks/useIsomorphicLayoutEffect.js +15 -0
- package/cjs/hooks/useIsomorphicLayoutEffect.js.map +1 -0
- package/cjs/index.css +34 -12
- package/cjs/index.js +14 -0
- package/cjs/index.js.map +1 -1
- package/cjs/utils/canUseDOM.js +12 -0
- package/cjs/utils/canUseDOM.js.map +1 -0
- package/cjs/utils/index.js.map +1 -1
- package/es/components/Button/Button.css +6 -9
- package/es/components/Button/Button.js +3 -17
- package/es/components/Button/Button.js.map +1 -1
- package/es/components/Button/Button.styles.js +11 -29
- package/es/components/Button/Button.styles.js.map +1 -1
- package/es/components/Button/Button.styles_uqvh6u.css +5 -0
- package/es/components/Button/Button.tokens.js +0 -5
- package/es/components/Button/Button.tokens.js.map +1 -1
- package/es/components/Button/variations/_stretching/base.js +1 -1
- package/es/components/Button/variations/_stretching/base.js.map +1 -1
- package/{cjs/components/Button/variations/_stretching/base_hy8dc.css → es/components/Button/variations/_stretching/base_1lx0ute.css} +1 -1
- package/es/components/ButtonGroup/ButtonGroup.css +2 -2
- package/es/components/ButtonGroup/ButtonGroup.tokens.js +0 -1
- package/es/components/ButtonGroup/ButtonGroup.tokens.js.map +1 -1
- package/es/components/ButtonGroup/variations/_orientation/base.js +1 -1
- package/es/components/ButtonGroup/variations/_orientation/base.js.map +1 -1
- package/{cjs/components/ButtonGroup/variations/_orientation/base_y7z7cs.css → es/components/ButtonGroup/variations/_orientation/base_p85v51.css} +1 -1
- package/es/components/ButtonGroup/variations/_view/base.js +1 -1
- package/es/components/ButtonGroup/variations/_view/base.js.map +1 -1
- package/es/components/ButtonGroup/variations/_view/base_6k3uip.css +1 -0
- package/es/components/Combobox/hooks/useFocusController.js +1 -0
- package/es/components/Combobox/hooks/useFocusController.js.map +1 -1
- package/es/components/Drawer/Drawer.css +6 -9
- package/es/components/Drawer/ui/DrawerContent/DrawerContent.css +6 -9
- package/es/components/Header/ui/HeaderArrow/HeaderArrow.css +6 -9
- package/es/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
- package/es/components/Header/ui/HeaderArrow/HeaderArrow.js.map +1 -1
- package/es/components/IconButton/IconButton.css +7 -10
- package/es/components/IconButton/IconButton.styles.js +1 -1
- package/es/components/IconButton/{IconButton.styles_7v8g0e.css → IconButton.styles_1hknr37.css} +1 -1
- package/es/components/Notification/Notification.css +6 -9
- package/es/components/Notification/NotificationsProvider.css +6 -9
- package/es/components/Pagination/Pagination.css +8 -11
- package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +6 -9
- package/es/components/Panel/ui/PanelHeader/PanelHeader.css +6 -9
- package/es/components/Select/Select.css +6 -9
- package/es/components/Select/ui/SelectTarget/SelectTarget.css +6 -9
- package/es/components/Slider/Slider.css +69 -0
- package/es/components/Slider/Slider.js +43 -0
- package/es/components/Slider/Slider.js.map +1 -0
- package/es/components/Slider/Slider.tokens.js +74 -0
- package/es/components/Slider/Slider.tokens.js.map +1 -0
- package/es/components/Slider/components/Double/Double.css +62 -0
- package/es/components/Slider/components/Double/Double.js +302 -0
- package/es/components/Slider/components/Double/Double.js.map +1 -0
- package/es/components/Slider/components/Double/Double.styles.js +51 -0
- package/es/components/Slider/components/Double/Double.styles.js.map +1 -0
- package/es/components/Slider/components/Double/Double.styles_1jhda4u.css +7 -0
- package/es/components/Slider/components/Single/Single.css +16 -0
- package/es/components/Slider/components/Single/Single.js +160 -0
- package/es/components/Slider/components/Single/Single.js.map +1 -0
- package/es/components/Slider/components/Single/Single.styles.js +36 -0
- package/es/components/Slider/components/Single/Single.styles.js.map +1 -0
- package/es/components/Slider/components/Single/Single.styles_1r9f1e0.css +6 -0
- package/es/components/Slider/components/SliderBase/SliderBase.css +4 -0
- package/es/components/Slider/components/SliderBase/SliderBase.js +78 -0
- package/es/components/Slider/components/SliderBase/SliderBase.js.map +1 -0
- package/es/components/Slider/components/SliderBase/SliderBase.styles.js +26 -0
- package/es/components/Slider/components/SliderBase/SliderBase.styles.js.map +1 -0
- package/es/components/Slider/components/SliderBase/SliderBase.styles_7is2ll.css +4 -0
- package/es/components/Slider/ui/Handler/Handler.css +4 -0
- package/es/components/Slider/ui/Handler/Handler.js +164 -0
- package/es/components/Slider/ui/Handler/Handler.js.map +1 -0
- package/es/components/Slider/ui/Handler/Handler.styles.js +16 -0
- package/es/components/Slider/ui/Handler/Handler.styles.js.map +1 -0
- package/es/components/Slider/ui/Handler/Handler.styles_8crx5z.css +2 -0
- package/es/components/Slider/ui/Thumb/Thumb.css +1 -0
- package/es/components/Slider/ui/Thumb/Thumb.js +27 -0
- package/es/components/Slider/ui/Thumb/Thumb.js.map +1 -0
- package/es/components/Slider/ui/Thumb/Thumb.styles.js +11 -0
- package/es/components/Slider/ui/Thumb/Thumb.styles.js.map +1 -0
- package/es/components/Slider/ui/Thumb/Thumb.styles_4w4gzn.css +1 -0
- package/es/components/Slider/utils/index.js +50 -0
- package/es/components/Slider/utils/index.js.map +1 -0
- package/es/components/Slider/variations/_disabled/base.js +5 -0
- package/es/components/Slider/variations/_disabled/base.js.map +1 -0
- package/es/components/Slider/variations/_disabled/base_x642ct.css +1 -0
- package/es/components/Slider/variations/_size/base.js +5 -0
- package/es/components/Slider/variations/_size/base.js.map +1 -0
- package/es/components/Slider/variations/_size/base_x642ct.css +1 -0
- package/es/components/Slider/variations/_view/base.js +5 -0
- package/es/components/Slider/variations/_view/base.js.map +1 -0
- package/es/components/Slider/variations/_view/base_x642ct.css +1 -0
- package/es/components/TextField/TextField.js +12 -3
- package/es/components/TextField/TextField.js.map +1 -1
- package/es/components/Toast/Toast.css +6 -9
- package/es/components/Toast/ToastController.css +6 -9
- package/es/engines/common.js +4 -0
- package/es/engines/common.js.map +1 -1
- package/es/engines/index.js.map +1 -1
- package/es/hooks/useIsomorphicLayoutEffect.js +11 -0
- package/es/hooks/useIsomorphicLayoutEffect.js.map +1 -0
- package/es/index.css +34 -12
- package/es/index.js +8 -0
- package/es/index.js.map +1 -1
- package/es/utils/canUseDOM.js +8 -0
- package/es/utils/canUseDOM.js.map +1 -0
- package/es/utils/index.js.map +1 -1
- package/package.json +3 -2
- package/styled-components/cjs/components/Button/Button.js +2 -16
- package/styled-components/cjs/components/Button/Button.styles.js +12 -20
- package/styled-components/cjs/components/Button/Button.template-doc.mdx +0 -42
- package/styled-components/cjs/components/Button/Button.tokens.js +0 -5
- package/styled-components/cjs/components/Button/variations/_stretching/base.js +1 -1
- package/styled-components/cjs/components/ButtonGroup/ButtonGroup.tokens.js +0 -1
- package/styled-components/cjs/components/ButtonGroup/variations/_orientation/base.js +1 -2
- package/styled-components/cjs/components/ButtonGroup/variations/_view/base.js +1 -1
- package/styled-components/cjs/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
- package/styled-components/cjs/components/Slider/Slider.js +47 -0
- package/styled-components/cjs/components/Slider/Slider.tokens.js +77 -0
- package/styled-components/cjs/components/Slider/Slider.types.js +5 -0
- package/styled-components/cjs/components/Slider/components/Double/Double.js +318 -0
- package/styled-components/cjs/components/Slider/components/Double/Double.styles.js +36 -0
- package/styled-components/cjs/components/Slider/components/Double/Double.types.js +5 -0
- package/styled-components/cjs/components/Slider/components/Single/Single.js +176 -0
- package/styled-components/cjs/components/Slider/components/Single/Single.styles.js +27 -0
- package/styled-components/cjs/components/Slider/components/Single/Single.types.js +5 -0
- package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.js +83 -0
- package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.styles.js +21 -0
- package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.types.js +5 -0
- package/styled-components/cjs/components/Slider/components/index.js +27 -0
- package/styled-components/cjs/components/Slider/index.js +32 -0
- package/styled-components/cjs/components/Slider/ui/Handler/Handler.js +177 -0
- package/styled-components/cjs/components/Slider/ui/Handler/Handler.styles.js +15 -0
- package/styled-components/cjs/components/Slider/ui/Handler/Handler.types.js +5 -0
- package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.js +32 -0
- package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.styles.js +18 -0
- package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.types.js +5 -0
- package/styled-components/cjs/components/Slider/ui/index.js +63 -0
- package/styled-components/cjs/components/Slider/utils/index.js +55 -0
- package/styled-components/cjs/components/Slider/variations/_disabled/base.js +8 -0
- package/styled-components/cjs/components/Slider/variations/_disabled/tokens.json +4 -0
- package/styled-components/cjs/components/Slider/variations/_size/base.js +8 -0
- package/styled-components/cjs/components/Slider/variations/_size/tokens.json +0 -0
- package/styled-components/cjs/components/Slider/variations/_view/base.js +8 -0
- package/styled-components/cjs/components/Slider/variations/_view/tokens.json +0 -0
- package/styled-components/cjs/components/TextField/TextField.js +12 -3
- package/styled-components/cjs/engines/common.js +4 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.config.js +19 -19
- package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.stories.tsx +21 -67
- package/styled-components/cjs/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.js +10 -10
- package/styled-components/cjs/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.config.js +29 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.js +16 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.stories.tsx +169 -0
- package/styled-components/cjs/examples/plasma_web/components/Button/Button.config.js +19 -19
- package/styled-components/cjs/examples/plasma_web/components/Button/Button.stories.tsx +28 -90
- package/styled-components/cjs/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.js +10 -10
- package/styled-components/cjs/examples/plasma_web/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
- package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.config.js +29 -0
- package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.js +16 -0
- package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.stories.tsx +168 -0
- package/styled-components/cjs/examples/sds_engineer/components/Button/Button.config.js +19 -19
- package/styled-components/cjs/examples/sds_engineer/components/Button/Button.stories.tsx +28 -90
- package/styled-components/cjs/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.js +10 -10
- package/styled-components/cjs/examples/sds_engineer/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
- package/styled-components/cjs/hooks/index.js +8 -1
- package/styled-components/cjs/hooks/useIsomorphicLayoutEffect.js +12 -0
- package/styled-components/cjs/index.js +11 -0
- package/styled-components/cjs/utils/canUseDOM.js +11 -0
- package/styled-components/cjs/utils/index.js +7 -0
- package/styled-components/es/components/Button/Button.js +3 -17
- package/styled-components/es/components/Button/Button.styles.js +11 -19
- package/styled-components/es/components/Button/Button.template-doc.mdx +0 -42
- package/styled-components/es/components/Button/Button.tokens.js +0 -5
- package/styled-components/es/components/Button/variations/_stretching/base.js +1 -1
- package/styled-components/es/components/ButtonGroup/ButtonGroup.tokens.js +0 -1
- package/styled-components/es/components/ButtonGroup/variations/_orientation/base.js +2 -3
- package/styled-components/es/components/ButtonGroup/variations/_view/base.js +1 -1
- package/styled-components/es/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
- package/styled-components/es/components/Slider/Slider.js +38 -0
- package/styled-components/es/components/Slider/Slider.tokens.js +71 -0
- package/styled-components/es/components/Slider/Slider.types.js +1 -0
- package/styled-components/es/components/Slider/components/Double/Double.js +310 -0
- package/styled-components/es/components/Slider/components/Double/Double.styles.js +29 -0
- package/styled-components/es/components/Slider/components/Double/Double.types.js +1 -0
- package/styled-components/es/components/Slider/components/Single/Single.js +168 -0
- package/styled-components/es/components/Slider/components/Single/Single.styles.js +20 -0
- package/styled-components/es/components/Slider/components/Single/Single.types.js +1 -0
- package/styled-components/es/components/Slider/components/SliderBase/SliderBase.js +74 -0
- package/styled-components/es/components/Slider/components/SliderBase/SliderBase.styles.js +14 -0
- package/styled-components/es/components/Slider/components/SliderBase/SliderBase.types.js +1 -0
- package/styled-components/es/components/Slider/components/index.js +3 -0
- package/styled-components/es/components/Slider/index.js +3 -0
- package/styled-components/es/components/Slider/ui/Handler/Handler.js +168 -0
- package/styled-components/es/components/Slider/ui/Handler/Handler.styles.js +8 -0
- package/styled-components/es/components/Slider/ui/Handler/Handler.types.js +1 -0
- package/styled-components/es/components/Slider/ui/Thumb/Thumb.js +25 -0
- package/styled-components/es/components/Slider/ui/Thumb/Thumb.styles.js +11 -0
- package/styled-components/es/components/Slider/ui/Thumb/Thumb.types.js +1 -0
- package/styled-components/es/components/Slider/ui/index.js +5 -0
- package/styled-components/es/components/Slider/utils/index.js +47 -0
- package/styled-components/es/components/Slider/variations/_disabled/base.js +2 -0
- package/styled-components/es/components/Slider/variations/_disabled/tokens.json +4 -0
- package/styled-components/es/components/Slider/variations/_size/base.js +2 -0
- package/styled-components/es/components/Slider/variations/_size/tokens.json +0 -0
- package/styled-components/es/components/Slider/variations/_view/base.js +2 -0
- package/styled-components/es/components/Slider/variations/_view/tokens.json +0 -0
- package/styled-components/es/components/TextField/TextField.js +12 -3
- package/styled-components/es/engines/common.js +4 -0
- package/styled-components/es/examples/plasma_b2c/components/Button/Button.config.js +19 -19
- package/styled-components/es/examples/plasma_b2c/components/Button/Button.stories.tsx +21 -67
- package/styled-components/es/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.js +10 -10
- package/styled-components/es/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
- package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.config.js +23 -0
- package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.js +10 -0
- package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.stories.tsx +169 -0
- package/styled-components/es/examples/plasma_web/components/Button/Button.config.js +19 -19
- package/styled-components/es/examples/plasma_web/components/Button/Button.stories.tsx +28 -90
- package/styled-components/es/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.js +10 -10
- package/styled-components/es/examples/plasma_web/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
- package/styled-components/es/examples/plasma_web/components/Slider/Slider.config.js +23 -0
- package/styled-components/es/examples/plasma_web/components/Slider/Slider.js +10 -0
- package/styled-components/es/examples/plasma_web/components/Slider/Slider.stories.tsx +168 -0
- package/styled-components/es/examples/sds_engineer/components/Button/Button.config.js +19 -19
- package/styled-components/es/examples/sds_engineer/components/Button/Button.stories.tsx +28 -90
- package/styled-components/es/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.js +10 -10
- package/styled-components/es/examples/sds_engineer/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
- package/styled-components/es/hooks/index.js +2 -1
- package/styled-components/es/hooks/useIsomorphicLayoutEffect.js +7 -0
- package/styled-components/es/index.js +2 -1
- package/styled-components/es/utils/canUseDOM.js +5 -0
- package/styled-components/es/utils/index.js +1 -0
- package/types/components/Button/Button.d.ts.map +1 -1
- package/types/components/Button/Button.styles.d.ts +1 -5
- package/types/components/Button/Button.styles.d.ts.map +1 -1
- package/types/components/Button/Button.tokens.d.ts +0 -5
- package/types/components/Button/Button.tokens.d.ts.map +1 -1
- package/types/components/Button/Button.types.d.ts +4 -16
- package/types/components/Button/Button.types.d.ts.map +1 -1
- package/types/components/ButtonGroup/ButtonGroup.tokens.d.ts +0 -1
- package/types/components/ButtonGroup/ButtonGroup.tokens.d.ts.map +1 -1
- package/types/components/ButtonGroup/variations/_orientation/base.d.ts.map +1 -1
- package/types/components/ButtonGroup/variations/_view/base.d.ts.map +1 -1
- package/types/components/Header/ui/HeaderArrow/HeaderArrow.d.ts.map +1 -1
- package/types/components/Notification/Notification.styles.d.ts +1 -43
- package/types/components/Notification/Notification.styles.d.ts.map +1 -1
- package/types/components/Pagination/Pagination.styles.d.ts +2 -86
- package/types/components/Pagination/Pagination.styles.d.ts.map +1 -1
- package/types/components/Panel/ui/PanelHeader/PanelHeader.styles.d.ts +1 -43
- package/types/components/Panel/ui/PanelHeader/PanelHeader.styles.d.ts.map +1 -1
- package/types/components/Select/ui/SelectTarget/SelectTarget.styles.d.ts +1 -43
- package/types/components/Select/ui/SelectTarget/SelectTarget.styles.d.ts.map +1 -1
- package/types/components/Slider/Slider.d.ts +27 -0
- package/types/components/Slider/Slider.d.ts.map +1 -0
- package/types/components/Slider/Slider.tokens.d.ts +72 -0
- package/types/components/Slider/Slider.tokens.d.ts.map +1 -0
- package/types/components/Slider/Slider.types.d.ts +3 -0
- package/types/components/Slider/Slider.types.d.ts.map +1 -0
- package/types/components/Slider/components/Double/Double.d.ts +4 -0
- package/types/components/Slider/components/Double/Double.d.ts.map +1 -0
- package/types/components/Slider/components/Double/Double.styles.d.ts +43 -0
- package/types/components/Slider/components/Double/Double.styles.d.ts.map +1 -0
- package/types/components/Slider/components/Double/Double.types.d.ts +65 -0
- package/types/components/Slider/components/Double/Double.types.d.ts.map +1 -0
- package/types/components/Slider/components/Single/Single.d.ts +4 -0
- package/types/components/Slider/components/Single/Single.d.ts.map +1 -0
- package/types/components/Slider/components/Single/Single.styles.d.ts +8 -0
- package/types/components/Slider/components/Single/Single.styles.d.ts.map +1 -0
- package/types/components/Slider/components/Single/Single.types.d.ts +55 -0
- package/types/components/Slider/components/Single/Single.types.d.ts.map +1 -0
- package/types/components/Slider/components/SliderBase/SliderBase.d.ts +4 -0
- package/types/components/Slider/components/SliderBase/SliderBase.d.ts.map +1 -0
- package/types/components/Slider/components/SliderBase/SliderBase.styles.d.ts +6 -0
- package/types/components/Slider/components/SliderBase/SliderBase.styles.d.ts.map +1 -0
- package/types/components/Slider/components/SliderBase/SliderBase.types.d.ts +45 -0
- package/types/components/Slider/components/SliderBase/SliderBase.types.d.ts.map +1 -0
- package/types/components/Slider/components/index.d.ts +6 -0
- package/types/components/Slider/components/index.d.ts.map +1 -0
- package/types/components/Slider/index.d.ts +6 -0
- package/types/components/Slider/index.d.ts.map +1 -0
- package/types/components/Slider/ui/Handler/Handler.d.ts +9 -0
- package/types/components/Slider/ui/Handler/Handler.d.ts.map +1 -0
- package/types/components/Slider/ui/Handler/Handler.styles.d.ts +4 -0
- package/types/components/Slider/ui/Handler/Handler.styles.d.ts.map +1 -0
- package/types/components/Slider/ui/Handler/Handler.types.d.ts +24 -0
- package/types/components/Slider/ui/Handler/Handler.types.d.ts.map +1 -0
- package/types/components/Slider/ui/Thumb/Thumb.d.ts +4 -0
- package/types/components/Slider/ui/Thumb/Thumb.d.ts.map +1 -0
- package/types/components/Slider/ui/Thumb/Thumb.styles.d.ts +5 -0
- package/types/components/Slider/ui/Thumb/Thumb.styles.d.ts.map +1 -0
- package/types/components/Slider/ui/Thumb/Thumb.types.d.ts +12 -0
- package/types/components/Slider/ui/Thumb/Thumb.types.d.ts.map +1 -0
- package/types/components/Slider/ui/index.d.ts +6 -0
- package/types/components/Slider/ui/index.d.ts.map +1 -0
- package/types/components/Slider/utils/index.d.ts +33 -0
- package/types/components/Slider/utils/index.d.ts.map +1 -0
- package/types/components/Slider/variations/_disabled/base.d.ts +2 -0
- package/types/components/Slider/variations/_disabled/base.d.ts.map +1 -0
- package/types/components/Slider/variations/_size/base.d.ts +2 -0
- package/types/components/Slider/variations/_size/base.d.ts.map +1 -0
- package/types/components/Slider/variations/_view/base.d.ts +2 -0
- package/types/components/Slider/variations/_view/base.d.ts.map +1 -0
- package/types/components/TextField/TextField.d.ts.map +1 -1
- package/types/components/Toast/Toast.styles.d.ts +1 -43
- package/types/components/Toast/Toast.styles.d.ts.map +1 -1
- package/types/components/Toast/utils.d.ts +1 -43
- package/types/components/Toast/utils.d.ts.map +1 -1
- package/types/engines/common.d.ts +3 -3
- package/types/engines/common.d.ts.map +1 -1
- package/types/engines/index.d.ts +1 -1
- package/types/engines/index.d.ts.map +1 -1
- package/types/engines/types.d.ts +4 -0
- package/types/engines/types.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Button/Button.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Button/Button.d.ts +1 -43
- package/types/examples/plasma_b2c/components/Button/Button.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts +1 -43
- package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Slider/Slider.config.d.ts +22 -0
- package/types/examples/plasma_b2c/components/Slider/Slider.config.d.ts.map +1 -0
- package/types/examples/plasma_b2c/components/Slider/Slider.d.ts +21 -0
- package/types/examples/plasma_b2c/components/Slider/Slider.d.ts.map +1 -0
- package/types/examples/plasma_web/components/Button/Button.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Button/Button.d.ts +1 -43
- package/types/examples/plasma_web/components/Button/Button.d.ts.map +1 -1
- package/types/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/IconButton/IconButton.d.ts +1 -43
- package/types/examples/plasma_web/components/IconButton/IconButton.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Slider/Slider.config.d.ts +22 -0
- package/types/examples/plasma_web/components/Slider/Slider.config.d.ts.map +1 -0
- package/types/examples/plasma_web/components/Slider/Slider.d.ts +21 -0
- package/types/examples/plasma_web/components/Slider/Slider.d.ts.map +1 -0
- package/types/examples/sds_engineer/components/Button/Button.config.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/Button/Button.d.ts +1 -43
- package/types/examples/sds_engineer/components/Button/Button.d.ts.map +1 -1
- package/types/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
- package/types/hooks/index.d.ts +1 -0
- package/types/hooks/index.d.ts.map +1 -1
- package/types/hooks/useIsomorphicLayoutEffect.d.ts +6 -0
- package/types/hooks/useIsomorphicLayoutEffect.d.ts.map +1 -0
- package/types/index.d.ts +1 -0
- package/types/index.d.ts.map +1 -1
- package/types/utils/canUseDOM.d.ts +6 -0
- package/types/utils/canUseDOM.d.ts.map +1 -0
- package/types/utils/index.d.ts +1 -0
- package/types/utils/index.d.ts.map +1 -1
- package/cjs/components/Button/Button.styles_1oz1dew.css +0 -8
- package/cjs/components/ButtonGroup/variations/_view/base_1n9gznw.css +0 -1
- package/es/components/Button/Button.styles_1oz1dew.css +0 -8
- package/es/components/ButtonGroup/variations/_view/base_1n9gznw.css +0 -1
@@ -17,7 +17,7 @@ var _base6 = /*#__PURE__*/require("./variations/_blurred/base");
|
|
17
17
|
var _Button = /*#__PURE__*/require("./Button.styles");
|
18
18
|
var _Button2 = /*#__PURE__*/require("./Button.tokens");
|
19
19
|
var _StyledSpinner;
|
20
|
-
var _excluded = ["children", "view", "size", "text", "
|
20
|
+
var _excluded = ["children", "view", "size", "text", "contentLeft", "contentRight", "isLoading", "loader", "stretch", "square", "pin", "disabled", "focused", "outlined", "className", "blur", "style", "stretching"];
|
21
21
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
22
22
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
23
23
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
@@ -34,11 +34,8 @@ var buttonRoot = exports.buttonRoot = function buttonRoot(Root) {
|
|
34
34
|
view = props.view,
|
35
35
|
size = props.size,
|
36
36
|
text = props.text,
|
37
|
-
value = props.value,
|
38
37
|
contentLeft = props.contentLeft,
|
39
38
|
contentRight = props.contentRight,
|
40
|
-
_props$contentPlacing = props.contentPlacing,
|
41
|
-
contentPlacing = _props$contentPlacing === void 0 ? 'default' : _props$contentPlacing,
|
42
39
|
isLoading = props.isLoading,
|
43
40
|
loader = props.loader,
|
44
41
|
stretch = props.stretch,
|
@@ -55,34 +52,23 @@ var buttonRoot = exports.buttonRoot = function buttonRoot(Root) {
|
|
55
52
|
rest = _objectWithoutProperties(props, _excluded);
|
56
53
|
var txt = typeof children === 'string' ? children : text;
|
57
54
|
var stretchingClass = stretch ? _Button2.classes.filledStretching : _Button2.classes["".concat(stretching, "Stretching")];
|
58
|
-
var contentRelaxedClass = contentPlacing === 'relaxed' ? _Button2.classes.contentRelaxed : undefined;
|
59
55
|
var squareClass = square ? _Button2.classes.buttonSquare : undefined;
|
60
56
|
var buttonBorderRadius = pin ? (0, _roundness.convertRoundnessMatrix)(pin, "var(".concat(_Button2.tokens.buttonRadius, ")"), "var(".concat(_Button2.tokens.buttonHeight, ")")) : "var(".concat(_Button2.tokens.buttonRadius, ", calc(var(").concat(_Button2.tokens.buttonHeight, ") / 4))");
|
61
|
-
var contentPlacingMapper = {
|
62
|
-
"default": 'center',
|
63
|
-
relaxed: 'space-between'
|
64
|
-
};
|
65
|
-
var contentPlacementValue = contentPlacing ? contentPlacingMapper[contentPlacing] : 'center';
|
66
57
|
return /*#__PURE__*/_react["default"].createElement(Root, _extends({
|
67
58
|
type: "button",
|
68
59
|
ref: ref,
|
69
60
|
view: view,
|
70
61
|
size: size,
|
71
|
-
value: value,
|
72
62
|
disabled: disabled,
|
73
63
|
focused: focused || outlined,
|
74
|
-
contentPlacing: contentPlacing,
|
75
64
|
className: (0, _utils.cx)(squareClass, stretchingClass, _Button2.classes.buttonItem, className),
|
76
65
|
style: _objectSpread(_objectSpread({}, style), {}, {
|
77
66
|
'--plasma_computed-btn-br': buttonBorderRadius,
|
78
67
|
'--plasma_private-blur': blur
|
79
68
|
})
|
80
69
|
}, rest), /*#__PURE__*/_react["default"].createElement(_Button.LoadWrap, {
|
81
|
-
contentPlacing: contentPlacementValue,
|
82
70
|
isLoading: isLoading
|
83
|
-
}, contentLeft
|
84
|
-
className: contentRelaxedClass
|
85
|
-
}, txt) : children, value && /*#__PURE__*/_react["default"].createElement(_Button.ButtonValue, null, value), contentRight && /*#__PURE__*/_react["default"].createElement(_Button.StyledContentRight, null, contentRight)), isLoading && /*#__PURE__*/_react["default"].createElement(_Button.Loader, null, loader || _StyledSpinner || (_StyledSpinner = /*#__PURE__*/_react["default"].createElement(_Button.StyledSpinner, null))));
|
71
|
+
}, contentLeft, txt ? /*#__PURE__*/_react["default"].createElement(_Button.ButtonText, null, txt) : children, contentRight), isLoading && /*#__PURE__*/_react["default"].createElement(_Button.Loader, null, loader || _StyledSpinner || (_StyledSpinner = /*#__PURE__*/_react["default"].createElement(_Button.StyledSpinner, null))));
|
86
72
|
});
|
87
73
|
};
|
88
74
|
var buttonConfig = exports.buttonConfig = {
|
@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
5
5
|
value: true
|
6
6
|
});
|
7
|
-
exports.baseContent = exports.base = exports.StyledSpinner = exports.
|
7
|
+
exports.baseContent = exports.base = exports.StyledSpinner = exports.Loader = exports.LoadWrap = exports.ButtonText = void 0;
|
8
8
|
var _styledComponents = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("styled-components"));
|
9
9
|
var _mixins = /*#__PURE__*/require("../../mixins");
|
10
10
|
var _engines = /*#__PURE__*/require("../../engines");
|
@@ -17,36 +17,28 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
|
|
17
17
|
// issue #823
|
18
18
|
var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Spinner.spinnerConfig);
|
19
19
|
var Spinner = /*#__PURE__*/(0, _engines.component)(mergedConfig);
|
20
|
+
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n position: relative;\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n justify-content: center;\n\n appearance: none;\n border: none;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n a& {\n text-decoration: none;\n }\n\n /* NOTE: \n --plasma_computed-btn-br-radius is defined in Button.tsx\n */\n --plasma_private-btn-br: var(--plasma_computed-btn-br);\n border-radius: var(--plasma_private-btn-br);\n\n &&.", " {\n width: var(", ");\n padding: 0;\n }\n"])), /*#__PURE__*/String(_Button.classes.buttonSquare), _Button.tokens.buttonHeight);
|
21
|
+
|
22
|
+
// TODO: PLASMA-2164
|
23
|
+
// WHY do we need applyEllipsis ??
|
24
|
+
// Если внутри кнопки тескт и на нее решили повесить square пропс
|
20
25
|
var ButtonText = exports.ButtonText = /*#__PURE__*/_styledComponents["default"].span.withConfig({
|
21
26
|
componentId: "plasma-new-hope__sc-9d9bqj-0"
|
22
|
-
})(["
|
23
|
-
var ButtonValue = exports.ButtonValue = /*#__PURE__*/_styledComponents["default"].span.withConfig({
|
24
|
-
componentId: "plasma-new-hope__sc-9d9bqj-1"
|
25
|
-
})(["color:var(", ");margin:var(", ");min-width:4ch;", ""], _Button.tokens.buttonValueColor, _Button.tokens.buttonValueMargin, /*#__PURE__*/(0, _mixins.applyEllipsis)());
|
27
|
+
})([":not(:last-child){margin-right:0.375rem;}:not(:first-child){margin-left:0.375rem;}", ""], /*#__PURE__*/(0, _mixins.applyEllipsis)());
|
26
28
|
|
27
29
|
// TODO: #720
|
28
30
|
var LoadWrap = exports.LoadWrap = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
29
|
-
componentId: "plasma-new-hope__sc-9d9bqj-
|
30
|
-
})(["opacity:", ";display:flex;align-items:inherit;justify-content:
|
31
|
+
componentId: "plasma-new-hope__sc-9d9bqj-1"
|
32
|
+
})(["opacity:", ";display:flex;width:100%;align-items:inherit;justify-content:inherit;height:100%;"], function (_ref) {
|
31
33
|
var isLoading = _ref.isLoading;
|
32
34
|
return isLoading ? '0' : '1';
|
33
|
-
}, function (_ref2) {
|
34
|
-
var contentPlacing = _ref2.contentPlacing;
|
35
|
-
return contentPlacing;
|
36
35
|
});
|
37
36
|
var Loader = exports.Loader = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
38
|
-
componentId: "plasma-new-hope__sc-9d9bqj-
|
37
|
+
componentId: "plasma-new-hope__sc-9d9bqj-2"
|
39
38
|
})(["position:absolute;"]);
|
40
39
|
var StyledSpinner = exports.StyledSpinner = /*#__PURE__*/(0, _styledComponents["default"])(Spinner).withConfig({
|
41
|
-
componentId: "plasma-new-hope__sc-9d9bqj-
|
40
|
+
componentId: "plasma-new-hope__sc-9d9bqj-3"
|
42
41
|
})(["", ":var(", ");", ":var(", ");"], _Spinner.spinnerTokens.size, _Button.tokens.buttonSpinnerSize, _Spinner.spinnerTokens.color, _Button.tokens.buttonSpinnerColor);
|
43
|
-
var StyledContentLeft = exports.StyledContentLeft = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
44
|
-
componentId: "plasma-new-hope__sc-9d9bqj-5"
|
45
|
-
})(["display:flex;margin:var(", ");"], _Button.tokens.buttonLeftContentMargin);
|
46
|
-
var StyledContentRight = exports.StyledContentRight = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
47
|
-
componentId: "plasma-new-hope__sc-9d9bqj-6"
|
48
|
-
})(["display:flex;margin:var(", ");"], _Button.tokens.buttonRightContentMargin);
|
49
|
-
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n position: relative;\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n justify-content: center;\n\n appearance: none;\n border: none;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n a& {\n text-decoration: none;\n }\n\n /* NOTE: \n --plasma_computed-btn-br-radius is defined in Button.tsx\n */\n --plasma_private-btn-br: var(--plasma_computed-btn-br);\n border-radius: var(--plasma_private-btn-br);\n\n &&.", " {\n width: var(", ");\n padding: 0;\n }\n"])), /*#__PURE__*/String(_Button.classes.buttonSquare), _Button.tokens.buttonHeight);
|
50
42
|
|
51
43
|
// INFO: Для возможности переиспользования стилей в других компонентах
|
52
44
|
var baseContent = exports.baseContent = /*#__PURE__*/"\n position: relative;\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n justify-content: center;\n\n appearance: none;\n border: none;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n a& {\n text-decoration: none;\n }\n\n /* NOTE: \n --plasma_computed-btn-br-radius is defined in Button.tsx\n */\n --plasma_private-btn-br: var(--plasma_computed-btn-br);\n border-radius: var(--plasma_private-btn-br);\n\n &&.".concat(String(_Button.classes.buttonSquare), " {\n width: var(").concat(_Button.tokens.buttonHeight, ");\n padding: 0;\n }\n\n color: var(").concat(_Button.tokens.buttonColor, ");\n background-color: var(").concat(_Button.tokens.buttonBackgroundColor, ");\n\n :hover {\n color: var(").concat(_Button.tokens.buttonColorHover, ", var(").concat(_Button.tokens.buttonColor, "));\n background-color: var(").concat(_Button.tokens.buttonBackgroundColorHover, ", var(").concat(_Button.tokens.buttonBackgroundColor, "));\n\n scale: var(").concat(_Button.tokens.buttonScaleHover, ");\n }\n\n :active {\n color: var(").concat(_Button.tokens.buttonColorActive, ", var(").concat(_Button.tokens.buttonColor, "));\n background-color: var(").concat(_Button.tokens.buttonBackgroundColorActive, ", var(").concat(_Button.tokens.buttonBackgroundColor, "));\n\n scale: var(").concat(_Button.tokens.buttonScaleActive, ");\n }\n\n height: var(").concat(_Button.tokens.buttonHeight, ");\n width: var(").concat(_Button.tokens.buttonWidth, ");\n\n /* TODO: #714 move these calc's to plasma-mapping | ds-generator and add Math.round() */\n padding: 0 var(").concat(_Button.tokens.buttonPadding, ", calc(var(").concat(_Button.tokens.buttonHeight, ") * 1.618 / 4));\n\n font-family: var(").concat(_Button.tokens.buttonFontFamily, ");\n font-size: var(").concat(_Button.tokens.buttonFontSize, ");\n font-style: var(").concat(_Button.tokens.buttonFontStyle, ");\n font-weight: var(").concat(_Button.tokens.buttonFontWeight, ");\n letter-spacing: var(").concat(_Button.tokens.buttonLetterSpacing, ");\n line-height: var(").concat(_Button.tokens.buttonLineHeight, ");\n\n /* TODO: #710 make it token API ? */\n --plasma_private-btn-outline-size: var(--plasma-button-outline-size, 0.0625rem);\n\n :focus {\n outline: none;\n }\n\n ").concat((0, _mixins.addFocus)({
|
@@ -54,4 +46,4 @@ var baseContent = exports.baseContent = /*#__PURE__*/"\n position: relative;\
|
|
54
46
|
outlineSize: 'var(--plasma_private-btn-outline-size)',
|
55
47
|
outlineRadius: 'calc(0.125rem + var(--plasma_private-btn-br))',
|
56
48
|
outlineColor: "var(".concat(_Button.tokens.buttonFocusColor, ")")
|
57
|
-
}), "\n\n &[disabled] {\n opacity: var(").concat(_Button.tokens.buttonDisabledOpacity, ");\n cursor: not-allowed;\n\n :hover,\n :active {\n scale: none;\n\n color: var(").concat(_Button.tokens.buttonColor, ");\n background-color: var(").concat(_Button.tokens.buttonBackgroundColor, ");\n }\n }\n\n &.").concat(_Button.classes.fixedStretching, " {\n width: var(").concat(_Button.tokens.buttonWidth, ");\n }\n &.").concat(_Button.classes.filledStretching, " {\n width: 100%;\n }\n &.").concat(_Button.classes.autoStretching, " {\n width:
|
49
|
+
}), "\n\n &[disabled] {\n opacity: var(").concat(_Button.tokens.buttonDisabledOpacity, ");\n cursor: not-allowed;\n\n :hover,\n :active {\n scale: none;\n\n color: var(").concat(_Button.tokens.buttonColor, ");\n background-color: var(").concat(_Button.tokens.buttonBackgroundColor, ");\n }\n }\n\n &.").concat(_Button.classes.fixedStretching, " {\n width: var(").concat(_Button.tokens.buttonWidth, ");\n }\n &.").concat(_Button.classes.filledStretching, " {\n width: 100%;\n }\n &.").concat(_Button.classes.autoStretching, " {\n width: auto;\n }\n");
|
@@ -68,48 +68,6 @@ export function App() {
|
|
68
68
|
}
|
69
69
|
```
|
70
70
|
|
71
|
-
### Ширина кнопки
|
72
|
-
Ширина кнопки регулируется с помощью свойства `stretching`.
|
73
|
-
Возможные значения свойства `contentPlacing`:
|
74
|
-
+ `auto` – ширина подстраивается под контент;
|
75
|
-
+ `filled` – кнопка растягивается на всю доступную ширину;
|
76
|
-
+ `fixed` – кнопка фиксированной ширины.
|
77
|
-
|
78
|
-
```tsx live
|
79
|
-
import React from 'react';
|
80
|
-
import { Button } from '@salutejs/{{package}}';
|
81
|
-
|
82
|
-
export function App() {
|
83
|
-
return (
|
84
|
-
<div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
|
85
|
-
<Button text="Button" stretching="fixed" />
|
86
|
-
<Button text="Button" stretching="auto" />
|
87
|
-
<Button text="Button" stretching="filled" />
|
88
|
-
</div>
|
89
|
-
);
|
90
|
-
}
|
91
|
-
```
|
92
|
-
|
93
|
-
### Позиционирование контента внутри
|
94
|
-
Позиционирование контента внутри кнопки регулируется с помощью свойства `contentPlacing`.
|
95
|
-
Возможные значения свойства `contentPlacing`:
|
96
|
-
+ `default` – контент центрируется;
|
97
|
-
+ `relaxed` – контент распологается по краям.
|
98
|
-
|
99
|
-
```tsx live
|
100
|
-
import React from 'react';
|
101
|
-
import { Button } from '@salutejs/{{package}}';
|
102
|
-
|
103
|
-
export function App() {
|
104
|
-
return (
|
105
|
-
<div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
|
106
|
-
<Button text="Hello" value="Plasma" stretching="filled" contentPlacing="default" />
|
107
|
-
<Button text="Hello" value="Plasma" stretching="filled" contentPlacing="relaxed" />
|
108
|
-
</div>
|
109
|
-
);
|
110
|
-
}
|
111
|
-
```
|
112
|
-
|
113
71
|
### Вид кнопки
|
114
72
|
Вид кнопки задается с помощью свойства `view`. Возможные значения свойства `view`:
|
115
73
|
+ `"primary"` – основная;
|
@@ -9,13 +9,11 @@ var classes = exports.classes = {
|
|
9
9
|
autoStretching: 'button-stretching-auto',
|
10
10
|
filledStretching: 'button-stretching-filled',
|
11
11
|
fixedStretching: 'button-stretching-fixed',
|
12
|
-
contentRelaxed: 'button-content-relaxed',
|
13
12
|
buttonSquare: 'button-square',
|
14
13
|
buttonItem: 'button-item'
|
15
14
|
};
|
16
15
|
var tokens = exports.tokens = {
|
17
16
|
buttonColor: '--plasma-button-color',
|
18
|
-
buttonValueColor: '--plasma-button-value-color',
|
19
17
|
buttonBackgroundColor: '--plasma-button-background-color',
|
20
18
|
buttonColorHover: '--plasma-button-color-hover',
|
21
19
|
buttonBackgroundColorHover: '--plasma-button-background-color-hover',
|
@@ -34,9 +32,6 @@ var tokens = exports.tokens = {
|
|
34
32
|
buttonFontWeight: '--plasma-button-font-weight',
|
35
33
|
buttonLetterSpacing: '--plasma-button-letter-spacing',
|
36
34
|
buttonLineHeight: '--plasma-button-line-height',
|
37
|
-
buttonLeftContentMargin: '--plasma-button-left-content-margin',
|
38
|
-
buttonRightContentMargin: '--plasma-button-right-content-margin',
|
39
|
-
buttonValueMargin: '--plasma-button-value-margin',
|
40
35
|
buttonDisabledOpacity: '--plasma-button-disabled-opacity',
|
41
36
|
buttonFocusColor: '--plasma-button-focus-color',
|
42
37
|
buttonSpinnerColor: '--plasma-button-spinner-color',
|
@@ -6,4 +6,4 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
exports.base = void 0;
|
7
7
|
var _styledComponents = /*#__PURE__*/require("styled-components");
|
8
8
|
var _Button = /*#__PURE__*/require("../../Button.tokens");
|
9
|
-
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", "{width:var(", ");}&.", "{width:100%;}&.", "{width:
|
9
|
+
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", "{width:var(", ");}&.", "{width:100%;}&.", "{width:auto;}"], _Button.classes.fixedStretching, _Button.tokens.buttonWidth, _Button.classes.filledStretching, _Button.classes.autoStretching);
|
@@ -20,7 +20,6 @@ var classes = exports.classes = {
|
|
20
20
|
var tokens = exports.tokens = {
|
21
21
|
buttonGroupOrientation: '--plasma-button-group-orientation',
|
22
22
|
buttonColor: '--plasma-button-group-item-color',
|
23
|
-
buttonValueColor: '--plasma-button-group-item-value-color',
|
24
23
|
buttonBackgroundColor: '--plasma-button-group-item-background-color',
|
25
24
|
buttonColorHover: '--plasma-button-group-item-color-hover',
|
26
25
|
buttonBackgroundColorHover: '--plasma-button-group-item-background-color-hover',
|
@@ -6,5 +6,4 @@ Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
exports.base = void 0;
|
7
7
|
var _styledComponents = /*#__PURE__*/require("styled-components");
|
8
8
|
var _ButtonGroup = /*#__PURE__*/require("../../ButtonGroup.tokens");
|
9
|
-
var
|
10
|
-
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["flex-direction:var(", ");&.", " .", "{width:auto;}"], _ButtonGroup.tokens.buttonGroupOrientation, _ButtonGroup.classes.vertical, _Button.buttonClasses.buttonItem);
|
9
|
+
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["flex-direction:var(", ");"], _ButtonGroup.tokens.buttonGroupOrientation);
|
@@ -7,4 +7,4 @@ exports.base = void 0;
|
|
7
7
|
var _styledComponents = /*#__PURE__*/require("styled-components");
|
8
8
|
var _ButtonGroup = /*#__PURE__*/require("../../ButtonGroup.tokens");
|
9
9
|
var _Button = /*#__PURE__*/require("../../../Button");
|
10
|
-
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", " .", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");
|
10
|
+
var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", " .", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}"], _ButtonGroup.classes.buttonGroupOverrideStyles, _Button.buttonClasses.buttonItem, _Button.buttonTokens.buttonColor, _ButtonGroup.tokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _ButtonGroup.tokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _ButtonGroup.tokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _ButtonGroup.tokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _ButtonGroup.tokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive, _ButtonGroup.tokens.buttonBackgroundColorActive);
|
@@ -14,7 +14,7 @@ var _utils = /*#__PURE__*/require("../../../../utils");
|
|
14
14
|
var _HeaderArrow = /*#__PURE__*/require("./HeaderArrow.styles");
|
15
15
|
var _base = /*#__PURE__*/require("./variations/_size/base");
|
16
16
|
var _base2 = /*#__PURE__*/require("./variations/_view/base");
|
17
|
-
var _excluded = ["arrow", "iconSize"
|
17
|
+
var _excluded = ["arrow", "iconSize"];
|
18
18
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
19
19
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
20
20
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
@@ -31,7 +31,6 @@ var headerArrowRoot = exports.headerArrowRoot = function headerArrowRoot(Root) {
|
|
31
31
|
var arrow = props.arrow,
|
32
32
|
_props$iconSize = props.iconSize,
|
33
33
|
iconSize = _props$iconSize === void 0 ? 's' : _props$iconSize,
|
34
|
-
value = props.value,
|
35
34
|
rest = _objectWithoutProperties(props, _excluded);
|
36
35
|
var minimizeClass = arrow === 'minimize' ? _Header.classes.headerArrowIconMinimize : undefined;
|
37
36
|
return /*#__PURE__*/_react["default"].createElement(Root, {
|
@@ -40,8 +39,7 @@ var headerArrowRoot = exports.headerArrowRoot = function headerArrowRoot(Root) {
|
|
40
39
|
view: "clear",
|
41
40
|
size: "s",
|
42
41
|
tabIndex: -1,
|
43
|
-
className: _Header.classes.headerArrow
|
44
|
-
value: String(value)
|
42
|
+
className: _Header.classes.headerArrow
|
45
43
|
}, rest), /*#__PURE__*/_react["default"].createElement(_Icon.IconChevronLeft, _extends({
|
46
44
|
size: iconSize,
|
47
45
|
sizeCustomProperty: _Header.tokens.headerArrowIconSize,
|
@@ -0,0 +1,47 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
5
|
+
value: true
|
6
|
+
});
|
7
|
+
exports.sliderRoot = exports.sliderConfig = void 0;
|
8
|
+
var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
|
9
|
+
var _base = /*#__PURE__*/require("./variations/_view/base");
|
10
|
+
var _base2 = /*#__PURE__*/require("./variations/_size/base");
|
11
|
+
var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
|
12
|
+
var _components = /*#__PURE__*/require("./components");
|
13
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
14
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
15
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
16
|
+
var isSingleValueProps = function isSingleValueProps(props) {
|
17
|
+
return typeof props.value === 'number';
|
18
|
+
};
|
19
|
+
var sliderRoot = exports.sliderRoot = function sliderRoot(Root) {
|
20
|
+
return /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
21
|
+
return /*#__PURE__*/_react["default"].createElement(Root, _extends({
|
22
|
+
ref: ref
|
23
|
+
}, props), isSingleValueProps(props) && /*#__PURE__*/_react["default"].createElement(_components.SingleSlider, props), !isSingleValueProps(props) && /*#__PURE__*/_react["default"].createElement(_components.DoubleSlider, props));
|
24
|
+
});
|
25
|
+
};
|
26
|
+
var sliderConfig = exports.sliderConfig = {
|
27
|
+
name: 'Slider',
|
28
|
+
tag: 'div',
|
29
|
+
layout: sliderRoot,
|
30
|
+
base: '',
|
31
|
+
variations: {
|
32
|
+
view: {
|
33
|
+
css: _base.base
|
34
|
+
},
|
35
|
+
size: {
|
36
|
+
css: _base2.base
|
37
|
+
},
|
38
|
+
disabled: {
|
39
|
+
css: _base3.base,
|
40
|
+
attrs: true
|
41
|
+
}
|
42
|
+
},
|
43
|
+
defaults: {
|
44
|
+
view: 'default',
|
45
|
+
size: 'm'
|
46
|
+
}
|
47
|
+
};
|
@@ -0,0 +1,77 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.tokens = exports.classes = void 0;
|
7
|
+
var classes = exports.classes = {
|
8
|
+
labelPlacementOuter: 'slider-label-placement-outer',
|
9
|
+
labelPlacementInner: 'slider-label-placement-inner',
|
10
|
+
rangeValuesPlacementOuter: 'slider-range-values-placement-outer',
|
11
|
+
rangeValuesPlacementInner: 'slider-range-values-placement-inner',
|
12
|
+
maxRangeValue: 'slider-max-range-value',
|
13
|
+
hideMinValue: 'slider-hide-min-value',
|
14
|
+
hideMaxValue: 'slider-hide-max-value',
|
15
|
+
textFieldActive: 'slider-text-field-active',
|
16
|
+
firstTextField: 'slider-first-text-field',
|
17
|
+
secondTextField: 'slider-second-text-field',
|
18
|
+
activeRangeValue: 'slider-active-range-value'
|
19
|
+
};
|
20
|
+
var tokens = exports.tokens = {
|
21
|
+
height: '--plasma-slider-height',
|
22
|
+
labelWrapperGap: '--plasma-slider-label-wrapper-gap',
|
23
|
+
labelWrapperMarginBottom: '--plasma-slider-label-wrapper-margin-bottom',
|
24
|
+
labelWrapperMarginRight: '--plasma-slider-label-wrapper-margin-right',
|
25
|
+
labelColor: '--plasma-slider-label-color',
|
26
|
+
labelFontFamily: '--plasma-slider-label-font-family',
|
27
|
+
labelFontSize: '--plasma-slider-label-font-size',
|
28
|
+
labelFontStyle: '--plasma-slider-label-font-style',
|
29
|
+
labelFontWeight: '--plasma-slider-label-font-weight',
|
30
|
+
labelLetterSpacing: '--plasma-slider-label-letter-spacing',
|
31
|
+
labelLineHeight: '--plasma-slider-label-line-height',
|
32
|
+
rangeMinValueMargin: '--plasma-slider-range-min-value-margin',
|
33
|
+
rangeMaxValueMargin: '--plasma-slider-range-max-value-margin',
|
34
|
+
rangeValueBottomOffset: '--plasma-slider-range-value-bottom-offset',
|
35
|
+
rangeValueColor: '--plasma-slider-range-value-color',
|
36
|
+
rangeValueFontFamily: '--plasma-slider-range-value-font-family',
|
37
|
+
rangeValueFontSize: '--plasma-slider-range-value-font-size',
|
38
|
+
rangeValueFontStyle: '--plasma-slider-range-value-font-style',
|
39
|
+
rangeValueFontWeight: '--plasma-slider-range-value-font-weight',
|
40
|
+
rangeValueLetterSpacing: '--plasma-slider-range-value-letter-spacing',
|
41
|
+
rangeValueLineHeight: '--plasma-slider-range-value-line-height',
|
42
|
+
doubleWrapperGap: '--plasma-slider-double-wrapper-gap',
|
43
|
+
thumbSize: '--plasma-slider-thumb-size',
|
44
|
+
thumbBorder: '--plasma-slider-thumb-border',
|
45
|
+
thumbBorderColor: '--plasma-slider-thumb-border-color',
|
46
|
+
thumbBackgroundColor: '--plasma-slider-thumb-background-color',
|
47
|
+
thumbFocusBorderColor: '--plasma-slider-thumb-focus-border-color',
|
48
|
+
currentValueTopOffset: '--plasma-slider-current-value-top-offset',
|
49
|
+
currentValueFontFamily: '--plasma-slider-current-value-font-family',
|
50
|
+
currentValueFontSize: '--plasma-slider-current-value-font-size',
|
51
|
+
currentValueFontStyle: '--plasma-slider-current-value-font-style',
|
52
|
+
currentValueFontWeight: '--plasma-slider-current-value-font-weight',
|
53
|
+
currentValueLetterSpacing: '--plasma-slider-current-value-letter-spacing',
|
54
|
+
currentValueLineHeight: '--plasma-slider-current-value-line-height',
|
55
|
+
railBackgroundColor: '--plasma-slider-rail-background-color',
|
56
|
+
railHeight: '--plasma-slider-rail-height',
|
57
|
+
railBorderRadius: '--plasma-slider-rail-border-radius',
|
58
|
+
railIndent: '--plasma-slider-rail-indent',
|
59
|
+
fillColor: '--plasma-slider-fill-color',
|
60
|
+
textFieldWrapperGap: '--plasma-slider-text-field-wrapper-gap',
|
61
|
+
textFieldFontFamily: '--plasma-slider-text-field-font-family',
|
62
|
+
textFieldFontSize: '--plasma-slider-text-field-font-size',
|
63
|
+
textFieldFontStyle: '--plasma-slider-text-field-font-style',
|
64
|
+
textFieldFontWeight: '--plasma-slider-text-field-font-weight',
|
65
|
+
textFieldLetterSpacing: '--plasma-slider-text-field-letter-spacing',
|
66
|
+
textFieldLineHeight: '--plasma-slider-text-field-line-height',
|
67
|
+
textFieldHeight: '--plasma-slider-text-field-height',
|
68
|
+
textFieldPadding: '--plasma-slider-text-field-padding',
|
69
|
+
textFieldBorderRadius: '--plasma-slider-text-field-border-radius',
|
70
|
+
textFieldColor: '--plasma-slider-text-field-color',
|
71
|
+
textFieldActiveColor: '--plasma-slider-text-field-active-color',
|
72
|
+
textFieldBackgroundColor: '--plasma-slider-text-field-background-color',
|
73
|
+
textFieldCaretColor: '--plasma-slider-text-field-caret-color',
|
74
|
+
textFieldPlaceholderColor: '--plasma-slider-text-field-placeholder-color',
|
75
|
+
textFiledFocusColor: '--plasma-slider-text-field-focus-color',
|
76
|
+
disabledOpacity: '--plasma-slider-disabled-opacity'
|
77
|
+
};
|