@salutejs/plasma-new-hope 0.85.0-canary.1213.9222480539.0 → 0.85.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/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/Range/Range.css +63 -0
- package/cjs/components/Range/Range.js +146 -0
- package/cjs/components/Range/Range.js.map +1 -0
- package/cjs/components/Range/Range.styles.js +63 -0
- package/cjs/components/Range/Range.styles.js.map +1 -0
- package/cjs/components/Range/Range.styles_mc4w65.css +8 -0
- package/cjs/components/Range/Range.tokens.js +106 -0
- package/cjs/components/Range/Range.tokens.js.map +1 -0
- package/cjs/components/Range/utils/index.js +24 -0
- package/cjs/components/Range/utils/index.js.map +1 -0
- package/cjs/components/Range/variations/_disabled/base.js +9 -0
- package/cjs/components/Range/variations/_disabled/base.js.map +1 -0
- package/cjs/components/Range/variations/_disabled/base_1ufizo4.css +1 -0
- package/cjs/components/Range/variations/_readonly/base.js +9 -0
- package/cjs/components/Range/variations/_readonly/base.js.map +1 -0
- package/cjs/components/Range/variations/_readonly/base_tzdxy8.css +1 -0
- package/cjs/components/Range/variations/_size/base.js +9 -0
- package/cjs/components/Range/variations/_size/base.js.map +1 -0
- package/cjs/components/Range/variations/_size/base_16xiubi.css +1 -0
- package/cjs/components/Range/variations/_view/base.js +9 -0
- package/cjs/components/Range/variations/_view/base.js.map +1 -0
- package/cjs/components/Range/variations/_view/base_5iz3nr.css +1 -0
- package/cjs/components/Select/Select.css +6 -9
- package/cjs/components/Select/ui/SelectTarget/SelectTarget.css +6 -9
- package/cjs/components/Slider/Slider.css +11 -9
- package/cjs/components/Slider/components/Double/Double.css +11 -9
- package/cjs/components/TextField/TextField.js +10 -10
- package/cjs/components/TextField/TextField.js.map +1 -1
- package/cjs/components/TextField/TextField.styles.js +13 -1
- package/cjs/components/TextField/TextField.styles.js.map +1 -1
- package/cjs/components/TextField/{TextField.styles_1b1mddp.css → TextField.styles_aqmut.css} +2 -0
- package/cjs/components/TextField/TextField.tokens.js +5 -0
- package/cjs/components/TextField/TextField.tokens.js.map +1 -1
- package/cjs/components/TextField/variations/_label-placement/inner.js +1 -1
- package/cjs/components/TextField/variations/_label-placement/inner.js.map +1 -1
- package/cjs/components/TextField/variations/_label-placement/inner_7c08qb.css +1 -0
- package/cjs/components/TextField/variations/_size/base.js +1 -1
- package/cjs/components/TextField/variations/_size/base.js.map +1 -1
- package/cjs/components/TextField/variations/_size/{base_1khzr9t.css → base_ntoddv.css} +1 -1
- package/cjs/components/TextField/variations/_view/base.js +1 -1
- package/cjs/components/TextField/variations/_view/base.js.map +1 -1
- package/cjs/components/TextField/variations/_view/{base_1qd77x6.css → base_19gxyva.css} +1 -1
- package/cjs/components/Toast/Toast.css +6 -9
- package/cjs/components/Toast/ToastController.css +6 -9
- package/cjs/index.css +37 -21
- package/cjs/index.js +5 -0
- package/cjs/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/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/Range/Range.css +63 -0
- package/es/components/Range/Range.js +141 -0
- package/es/components/Range/Range.js.map +1 -0
- package/es/components/Range/Range.styles.js +52 -0
- package/es/components/Range/Range.styles.js.map +1 -0
- package/es/components/Range/Range.styles_mc4w65.css +8 -0
- package/es/components/Range/Range.tokens.js +101 -0
- package/es/components/Range/Range.tokens.js.map +1 -0
- package/es/components/Range/utils/index.js +19 -0
- package/es/components/Range/utils/index.js.map +1 -0
- package/es/components/Range/variations/_disabled/base.js +5 -0
- package/es/components/Range/variations/_disabled/base.js.map +1 -0
- package/es/components/Range/variations/_disabled/base_1ufizo4.css +1 -0
- package/es/components/Range/variations/_readonly/base.js +5 -0
- package/es/components/Range/variations/_readonly/base.js.map +1 -0
- package/es/components/Range/variations/_readonly/base_tzdxy8.css +1 -0
- package/es/components/Range/variations/_size/base.js +5 -0
- package/es/components/Range/variations/_size/base.js.map +1 -0
- package/es/components/Range/variations/_size/base_16xiubi.css +1 -0
- package/es/components/Range/variations/_view/base.js +5 -0
- package/es/components/Range/variations/_view/base.js.map +1 -0
- package/es/components/Range/variations/_view/base_5iz3nr.css +1 -0
- package/es/components/Select/Select.css +6 -9
- package/es/components/Select/ui/SelectTarget/SelectTarget.css +6 -9
- package/es/components/Slider/Slider.css +11 -9
- package/es/components/Slider/components/Double/Double.css +11 -9
- package/es/components/TextField/TextField.js +11 -11
- package/es/components/TextField/TextField.js.map +1 -1
- package/es/components/TextField/TextField.styles.js +12 -2
- package/es/components/TextField/TextField.styles.js.map +1 -1
- package/es/components/TextField/{TextField.styles_1b1mddp.css → TextField.styles_aqmut.css} +2 -0
- package/es/components/TextField/TextField.tokens.js +5 -0
- package/es/components/TextField/TextField.tokens.js.map +1 -1
- package/es/components/TextField/variations/_label-placement/inner.js +1 -1
- package/es/components/TextField/variations/_label-placement/inner.js.map +1 -1
- package/es/components/TextField/variations/_label-placement/inner_7c08qb.css +1 -0
- package/es/components/TextField/variations/_size/base.js +1 -1
- package/es/components/TextField/variations/_size/base.js.map +1 -1
- package/es/components/TextField/variations/_size/{base_1khzr9t.css → base_ntoddv.css} +1 -1
- package/es/components/TextField/variations/_view/base.js +1 -1
- package/es/components/TextField/variations/_view/base.js.map +1 -1
- package/es/components/TextField/variations/_view/{base_1qd77x6.css → base_19gxyva.css} +1 -1
- package/es/components/Toast/Toast.css +6 -9
- package/es/components/Toast/ToastController.css +6 -9
- package/es/index.css +37 -21
- package/es/index.js +2 -0
- package/es/index.js.map +1 -1
- package/package.json +2 -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/Range/Range.js +148 -0
- package/styled-components/cjs/components/Range/Range.styles.js +39 -0
- package/styled-components/cjs/components/Range/Range.template-doc.mdx +323 -0
- package/styled-components/cjs/components/Range/Range.tokens.js +104 -0
- package/styled-components/cjs/components/Range/Range.types.js +5 -0
- package/styled-components/cjs/components/Range/index.js +25 -0
- package/styled-components/cjs/components/Range/utils/index.js +22 -0
- package/styled-components/cjs/components/Range/variations/_disabled/base.js +9 -0
- package/styled-components/cjs/components/Range/variations/_disabled/tokens.json +4 -0
- package/styled-components/cjs/components/Range/variations/_readonly/base.js +10 -0
- package/styled-components/cjs/components/Range/variations/_readonly/tokens.json +4 -0
- package/styled-components/cjs/components/Range/variations/_size/base.js +10 -0
- package/styled-components/cjs/components/Range/variations/_size/tokens.json +26 -0
- package/styled-components/cjs/components/Range/variations/_view/base.js +10 -0
- package/styled-components/cjs/components/Range/variations/_view/tokens.json +6 -0
- package/styled-components/cjs/components/TextField/TextField.js +10 -10
- package/styled-components/cjs/components/TextField/TextField.styles.js +7 -1
- package/styled-components/cjs/components/TextField/TextField.tokens.js +5 -0
- package/styled-components/cjs/components/TextField/variations/_label-placement/inner.js +1 -1
- package/styled-components/cjs/components/TextField/variations/_size/base.js +1 -1
- package/styled-components/cjs/components/TextField/variations/_view/base.js +1 -1
- 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/Range/Range.config.js +31 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Range/Range.js +11 -0
- package/styled-components/cjs/examples/plasma_b2c/components/Range/Range.stories.tsx +312 -0
- package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.config.js +8 -8
- package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.stories.tsx +2 -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/Range/Range.config.js +31 -0
- package/styled-components/cjs/examples/plasma_web/components/Range/Range.js +11 -0
- package/styled-components/cjs/examples/plasma_web/components/Range/Range.stories.tsx +312 -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/index.js +11 -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/Range/Range.js +139 -0
- package/styled-components/es/components/Range/Range.styles.js +31 -0
- package/styled-components/es/components/Range/Range.template-doc.mdx +323 -0
- package/styled-components/es/components/Range/Range.tokens.js +98 -0
- package/styled-components/es/components/Range/Range.types.js +1 -0
- package/styled-components/es/components/Range/index.js +2 -0
- package/styled-components/es/components/Range/utils/index.js +16 -0
- package/styled-components/es/components/Range/variations/_disabled/base.js +3 -0
- package/styled-components/es/components/Range/variations/_disabled/tokens.json +4 -0
- package/styled-components/es/components/Range/variations/_readonly/base.js +4 -0
- package/styled-components/es/components/Range/variations/_readonly/tokens.json +4 -0
- package/styled-components/es/components/Range/variations/_size/base.js +4 -0
- package/styled-components/es/components/Range/variations/_size/tokens.json +26 -0
- package/styled-components/es/components/Range/variations/_view/base.js +4 -0
- package/styled-components/es/components/Range/variations/_view/tokens.json +6 -0
- package/styled-components/es/components/TextField/TextField.js +11 -11
- package/styled-components/es/components/TextField/TextField.styles.js +6 -0
- package/styled-components/es/components/TextField/TextField.tokens.js +5 -0
- package/styled-components/es/components/TextField/variations/_label-placement/inner.js +2 -2
- package/styled-components/es/components/TextField/variations/_size/base.js +2 -2
- package/styled-components/es/components/TextField/variations/_view/base.js +2 -2
- 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/Range/Range.config.js +25 -0
- package/styled-components/es/examples/plasma_b2c/components/Range/Range.js +5 -0
- package/styled-components/es/examples/plasma_b2c/components/Range/Range.stories.tsx +312 -0
- package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.config.js +8 -8
- package/styled-components/es/examples/plasma_b2c/components/TextField/TextField.stories.tsx +2 -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/Range/Range.config.js +25 -0
- package/styled-components/es/examples/plasma_web/components/Range/Range.js +5 -0
- package/styled-components/es/examples/plasma_web/components/Range/Range.stories.tsx +312 -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/index.js +2 -1
- 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/Range/Range.d.ts +31 -0
- package/types/components/Range/Range.d.ts.map +1 -0
- package/types/components/Range/Range.styles.d.ts +48 -0
- package/types/components/Range/Range.styles.d.ts.map +1 -0
- package/types/components/Range/Range.tokens.d.ts +99 -0
- package/types/components/Range/Range.tokens.d.ts.map +1 -0
- package/types/components/Range/Range.types.d.ts +143 -0
- package/types/components/Range/Range.types.d.ts.map +1 -0
- package/types/components/Range/index.d.ts +4 -0
- package/types/components/Range/index.d.ts.map +1 -0
- package/types/components/Range/utils/index.d.ts +5 -0
- package/types/components/Range/utils/index.d.ts.map +1 -0
- package/types/components/Range/variations/_disabled/base.d.ts +2 -0
- package/types/components/Range/variations/_disabled/base.d.ts.map +1 -0
- package/types/components/Range/variations/_readonly/base.d.ts +2 -0
- package/types/components/Range/variations/_readonly/base.d.ts.map +1 -0
- package/types/components/Range/variations/_size/base.d.ts +2 -0
- package/types/components/Range/variations/_size/base.d.ts.map +1 -0
- package/types/components/Range/variations/_view/base.d.ts +2 -0
- package/types/components/Range/variations/_view/base.d.ts.map +1 -0
- 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/components/Double/Double.styles.d.ts +4 -0
- package/types/components/Slider/components/Double/Double.styles.d.ts.map +1 -1
- package/types/components/TextField/TextField.d.ts.map +1 -1
- package/types/components/TextField/TextField.styles.d.ts +2 -0
- package/types/components/TextField/TextField.styles.d.ts.map +1 -1
- package/types/components/TextField/TextField.tokens.d.ts +5 -0
- package/types/components/TextField/TextField.tokens.d.ts.map +1 -1
- package/types/components/TextField/TextField.types.d.ts +8 -0
- package/types/components/TextField/TextField.types.d.ts.map +1 -1
- package/types/components/TextField/variations/_label-placement/inner.d.ts.map +1 -1
- package/types/components/TextField/variations/_size/base.d.ts.map +1 -1
- package/types/components/TextField/variations/_view/base.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/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/Range/Range.config.d.ts +24 -0
- package/types/examples/plasma_b2c/components/Range/Range.config.d.ts.map +1 -0
- package/types/examples/plasma_b2c/components/Range/Range.d.ts +127 -0
- package/types/examples/plasma_b2c/components/Range/Range.d.ts.map +1 -0
- package/types/examples/plasma_b2c/components/TextField/TextField.config.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/TextField/TextField.d.ts +4 -0
- package/types/examples/plasma_b2c/components/TextField/TextField.d.ts.map +1 -1
- 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/Range/Range.config.d.ts +24 -0
- package/types/examples/plasma_web/components/Range/Range.config.d.ts.map +1 -0
- package/types/examples/plasma_web/components/Range/Range.d.ts +127 -0
- package/types/examples/plasma_web/components/Range/Range.d.ts.map +1 -0
- package/types/examples/plasma_web/components/TextField/TextField.d.ts +4 -0
- package/types/examples/plasma_web/components/TextField/TextField.d.ts.map +1 -1
- 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/examples/sds_engineer/components/TextField/TextField.d.ts +4 -0
- package/types/examples/sds_engineer/components/TextField/TextField.d.ts.map +1 -1
- package/types/index.d.ts +1 -0
- package/types/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/cjs/components/TextField/variations/_label-placement/inner_gqlcj2.css +0 -1
- package/es/components/Button/Button.styles_1oz1dew.css +0 -8
- package/es/components/ButtonGroup/variations/_view/base_1n9gznw.css +0 -1
- package/es/components/TextField/variations/_label-placement/inner_gqlcj2.css +0 -1
@@ -1,117 +1,55 @@
|
|
1
|
-
import
|
2
|
-
import type { ComponentProps } from 'react';
|
1
|
+
import { ComponentProps } from 'react';
|
3
2
|
import type { StoryObj, Meta } from '@storybook/react';
|
4
|
-
import { disableProps } from '@salutejs/plasma-sb-utils';
|
5
3
|
|
6
|
-
import {
|
7
|
-
import {
|
4
|
+
import { buttonConfig } from '../../../../components/Button';
|
5
|
+
import { mergeConfig } from '../../../../engines';
|
6
|
+
import { WithTheme, argTypesFromConfig } from '../../../_helpers';
|
8
7
|
|
8
|
+
import { config } from './Button.config';
|
9
9
|
import { Button } from './Button';
|
10
10
|
|
11
|
-
const views = ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'];
|
12
|
-
const sizes = ['l', 'm', 's', 'xs', 'xxs'];
|
13
|
-
const stretchingValues = ['auto', 'filled', 'fixed'];
|
14
|
-
const pinValues = [
|
15
|
-
'',
|
16
|
-
'square-square',
|
17
|
-
'square-clear',
|
18
|
-
'clear-square',
|
19
|
-
'clear-clear',
|
20
|
-
'clear-circle',
|
21
|
-
'circle-clear',
|
22
|
-
'circle-circle',
|
23
|
-
];
|
24
|
-
const contentPlacinValues = ['default', 'relaxed'];
|
25
|
-
|
26
11
|
const meta: Meta<typeof Button> = {
|
27
12
|
title: 'plasma_web/Button',
|
28
13
|
decorators: [WithTheme],
|
29
14
|
component: Button,
|
30
|
-
args: {
|
31
|
-
view: 'default',
|
32
|
-
size: 'm',
|
33
|
-
contentPlacing: 'default',
|
34
|
-
stretching: 'auto',
|
35
|
-
text: 'Hello',
|
36
|
-
value: 'Value',
|
37
|
-
disabled: false,
|
38
|
-
focused: true,
|
39
|
-
square: false,
|
40
|
-
isLoading: false,
|
41
|
-
},
|
42
15
|
argTypes: {
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
contentPlacing: {
|
56
|
-
options: contentPlacinValues,
|
16
|
+
...argTypesFromConfig(mergeConfig(buttonConfig, config)),
|
17
|
+
pin: {
|
18
|
+
options: [
|
19
|
+
'square-square',
|
20
|
+
'square-clear',
|
21
|
+
'clear-square',
|
22
|
+
'clear-clear',
|
23
|
+
'clear-circle',
|
24
|
+
'circle-clear',
|
25
|
+
'circle-circle',
|
26
|
+
'',
|
27
|
+
],
|
57
28
|
control: {
|
58
29
|
type: 'select',
|
59
30
|
},
|
31
|
+
table: { defaultValue: { summary: 'bottom' } },
|
60
32
|
},
|
61
33
|
stretching: {
|
62
|
-
options:
|
63
|
-
control: {
|
64
|
-
type: 'select',
|
65
|
-
},
|
66
|
-
},
|
67
|
-
pin: {
|
68
|
-
options: pinValues,
|
34
|
+
options: ['auto', 'filled', 'fixed'],
|
69
35
|
control: {
|
70
36
|
type: 'select',
|
71
37
|
},
|
72
|
-
table: { defaultValue: { summary: 'bottom' } },
|
73
38
|
},
|
74
39
|
},
|
75
40
|
};
|
76
41
|
|
77
42
|
export default meta;
|
78
43
|
|
79
|
-
|
80
|
-
enableContentLeft: boolean;
|
81
|
-
enableContentRight: boolean;
|
82
|
-
};
|
83
|
-
|
84
|
-
const StoryDefault = ({ enableContentLeft, enableContentRight, size, ...rest }: StoryPropsDefault) => {
|
85
|
-
const iconSize = size === 'xs' ? 'xs' : 's';
|
86
|
-
|
87
|
-
return (
|
88
|
-
<Button
|
89
|
-
contentLeft={enableContentLeft ? <IconMic size={iconSize} color="inherit" /> : undefined}
|
90
|
-
contentRight={enableContentRight ? <IconMic size={iconSize} color="inherit" /> : undefined}
|
91
|
-
size={size}
|
92
|
-
{...rest}
|
93
|
-
/>
|
94
|
-
);
|
95
|
-
};
|
96
|
-
|
97
|
-
export const Default: StoryObj<StoryPropsDefault> = {
|
44
|
+
export const Default: StoryObj<ComponentProps<typeof Button>> = {
|
98
45
|
args: {
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
render: (props: ComponentProps<typeof Button>) => {
|
108
|
-
const args = { ...props, text: undefined };
|
109
|
-
|
110
|
-
return (
|
111
|
-
<Button {...args}>
|
112
|
-
<IconMic color="inherit" />
|
113
|
-
<span>Включить микрофон</span>
|
114
|
-
</Button>
|
115
|
-
);
|
46
|
+
children: 'Hello',
|
47
|
+
view: 'default',
|
48
|
+
size: 'm',
|
49
|
+
disabled: false,
|
50
|
+
focused: true,
|
51
|
+
square: false,
|
52
|
+
stretching: 'auto',
|
53
|
+
isLoading: false,
|
116
54
|
},
|
117
55
|
};
|
package/styled-components/cjs/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.js
CHANGED
@@ -13,16 +13,16 @@ var config = exports.config = {
|
|
13
13
|
},
|
14
14
|
variations: {
|
15
15
|
view: {
|
16
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--
|
17
|
-
accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--
|
18
|
-
secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--
|
19
|
-
clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--
|
20
|
-
positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--
|
21
|
-
warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--
|
22
|
-
negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--
|
23
|
-
dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-
|
24
|
-
black: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-
|
25
|
-
white: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-
|
16
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--surface-solid-default-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
17
|
+
accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);", ":var(--on-dark-text-primary);", ":var(--surface-accent-hover);", ":var(--on-dark-text-primary);", ":var(--surface-accent-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
18
|
+
secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
19
|
+
clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--surface-clear);", ":var(--text-primary-hover);", ":var(--surface-clear);", ":var(--text-primary-active);", ":var(--surface-clear);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
20
|
+
positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);", ":var(--on-dark-text-primary);", ":var(--surface-positive-hover);", ":var(--on-dark-text-primary);", ":var(--surface-positive-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
21
|
+
warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);", ":var(--on-dark-text-primary);", ":var(--surface-warning-hover);", ":var(--on-dark-text-primary);", ":var(--surface-warning-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
22
|
+
negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);", ":var(--on-dark-text-primary);", ":var(--surface-negative-hover);", ":var(--on-dark-text-primary);", ":var(--surface-negative-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
23
|
+
dark: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-transparent-deep-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
24
|
+
black: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-hover);", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive),
|
25
|
+
white: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-hover);", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default-active);"], _ButtonGroup.buttonGroupTokens.buttonColor, _ButtonGroup.buttonGroupTokens.buttonBackgroundColor, _ButtonGroup.buttonGroupTokens.buttonColorHover, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorHover, _ButtonGroup.buttonGroupTokens.buttonColorActive, _ButtonGroup.buttonGroupTokens.buttonBackgroundColorActive)
|
26
26
|
},
|
27
27
|
size: {
|
28
28
|
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.875rem;", ":0.375rem;", ":0.875rem;", ":3.5rem;", ":1.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);"], _ButtonGroup.buttonGroupTokens.buttonDefaultRadius, _ButtonGroup.buttonGroupTokens.buttonSegmentedRadius, _ButtonGroup.buttonGroupTokens.buttonSideRadius, _ButtonGroup.buttonGroupTokens.buttonHeight, _ButtonGroup.buttonGroupTokens.buttonPadding, _ButtonGroup.buttonGroupTokens.buttonFontFamily, _ButtonGroup.buttonGroupTokens.buttonFontSize, _ButtonGroup.buttonGroupTokens.buttonFontStyle, _ButtonGroup.buttonGroupTokens.buttonFontWeight, _ButtonGroup.buttonGroupTokens.buttonLetterSpacing, _ButtonGroup.buttonGroupTokens.buttonLineHeight),
|
package/styled-components/cjs/examples/plasma_web/components/ButtonGroup/ButtonGroup.stories.tsx
CHANGED
@@ -11,7 +11,7 @@ import { ButtonGroup } from './ButtonGroup';
|
|
11
11
|
type StoryProps = ComponentProps<typeof ButtonGroup> & { itemsCount?: number };
|
12
12
|
type Story = StoryObj<StoryProps>;
|
13
13
|
|
14
|
-
const views = ['accent', 'default', 'secondary', '
|
14
|
+
const views = ['accent', 'default', 'secondary', 'success', 'warning', 'critical', 'clear'];
|
15
15
|
const sizes = ['l', 'm', 's', 'xs', 'xxs'];
|
16
16
|
const orientationValues = ['horizontal', 'vertical'];
|
17
17
|
const gapValues = ['none', 'dense', 'wide'];
|
@@ -0,0 +1,31 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.config = void 0;
|
7
|
+
var _styledComponents = /*#__PURE__*/require("styled-components");
|
8
|
+
var _Range = /*#__PURE__*/require("../../../../components/Range");
|
9
|
+
var config = exports.config = {
|
10
|
+
defaults: {
|
11
|
+
view: 'default',
|
12
|
+
size: 'l'
|
13
|
+
},
|
14
|
+
variations: {
|
15
|
+
view: {
|
16
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-clear);", ":var(--surface-transparent-tertiary);", ":var(--surface-negative);", ":var(--surface-positive);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-accent);", ":var(--surface-accent);", ":var(--surface-negative);", ":var(--surface-accent);", ":var(--surface-positive);", ":var(--surface-accent);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-accent);"], _Range.rangeTokens.background, _Range.rangeTokens.borderColor, _Range.rangeTokens.borderColorError, _Range.rangeTokens.borderColorSuccess, _Range.rangeTokens.dividerColor, _Range.rangeTokens.labelColor, _Range.rangeTokens.leftHelperColor, _Range.rangeTokens.textFieldColor, _Range.rangeTokens.textFieldPlaceholderColor, _Range.rangeTokens.textFieldCaretColor, _Range.rangeTokens.textFieldBorderColorFocus, _Range.rangeTokens.textFieldBorderColorError, _Range.rangeTokens.textFieldBorderColorErrorFocus, _Range.rangeTokens.textFieldBorderColorSuccess, _Range.rangeTokens.textFieldBorderColorSuccessFocus, _Range.rangeTokens.textFieldTextBeforeColor, _Range.rangeTokens.textFieldTextAfterColor, _Range.rangeTokens.focusColor)
|
17
|
+
},
|
18
|
+
size: {
|
19
|
+
l: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.875rem;", ":0.0625rem;", ":0 0.375rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0 0.375rem 0 1rem;", ":0;", ":0 0 0.75rem 0;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":3.5rem;", ":0.875rem;", ":0.0625rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem 0 0 0;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;"], _Range.rangeTokens.borderRadius, _Range.rangeTokens.borderWidth, _Range.rangeTokens.dividerPadding, _Range.rangeTokens.dividerFontFamily, _Range.rangeTokens.dividerFontStyle, _Range.rangeTokens.dividerFontSize, _Range.rangeTokens.dividerFontWeight, _Range.rangeTokens.dividerLetterSpacing, _Range.rangeTokens.dividerLineHeight, _Range.rangeTokens.leftContentMargin, _Range.rangeTokens.rightContentMargin, _Range.rangeTokens.labelOffset, _Range.rangeTokens.labelFontFamily, _Range.rangeTokens.labelFontStyle, _Range.rangeTokens.labelFontSize, _Range.rangeTokens.labelFontWeight, _Range.rangeTokens.labelLetterSpacing, _Range.rangeTokens.labelLineHeight, _Range.rangeTokens.textFieldHeight, _Range.rangeTokens.textFieldBorderRadius, _Range.rangeTokens.textFieldBorderWidth, _Range.rangeTokens.textFieldPadding, _Range.rangeTokens.textFieldFontFamily, _Range.rangeTokens.textFieldFontStyle, _Range.rangeTokens.textFieldFontSize, _Range.rangeTokens.textFieldFontWeight, _Range.rangeTokens.textFieldLetterSpacing, _Range.rangeTokens.textFieldLineHeight, _Range.rangeTokens.leftHelperOffset, _Range.rangeTokens.leftHelperFontFamily, _Range.rangeTokens.leftHelperFontStyle, _Range.rangeTokens.leftHelperFontSize, _Range.rangeTokens.leftHelperFontWeight, _Range.rangeTokens.leftHelperLetterSpacing, _Range.rangeTokens.leftHelperLineHeight, _Range.rangeTokens.textFieldLeftContentMargin, _Range.rangeTokens.textFieldRightContentMargin, _Range.rangeTokens.textFieldTextBeforeMargin, _Range.rangeTokens.textFieldTextAfterMargin),
|
20
|
+
m: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.75rem;", ":0.0625rem;", ":0 0.375rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0 0.375rem 0 0.875rem;", ":0;", ":0 0 0.625rem 0;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":3rem;", ":0.75rem;", ":0.0625rem;", ":0.875rem 1rem 0.875rem 1rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.25rem 0 0 0;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.125rem 0.375rem -0.125rem -0.125rem;", ":-0.125rem -0.125rem -0.125rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;"], _Range.rangeTokens.borderRadius, _Range.rangeTokens.borderWidth, _Range.rangeTokens.dividerPadding, _Range.rangeTokens.dividerFontFamily, _Range.rangeTokens.dividerFontStyle, _Range.rangeTokens.dividerFontSize, _Range.rangeTokens.dividerFontWeight, _Range.rangeTokens.dividerLetterSpacing, _Range.rangeTokens.dividerLineHeight, _Range.rangeTokens.leftContentMargin, _Range.rangeTokens.rightContentMargin, _Range.rangeTokens.labelOffset, _Range.rangeTokens.labelFontFamily, _Range.rangeTokens.labelFontStyle, _Range.rangeTokens.labelFontSize, _Range.rangeTokens.labelFontWeight, _Range.rangeTokens.labelLetterSpacing, _Range.rangeTokens.labelLineHeight, _Range.rangeTokens.textFieldHeight, _Range.rangeTokens.textFieldBorderRadius, _Range.rangeTokens.textFieldBorderWidth, _Range.rangeTokens.textFieldPadding, _Range.rangeTokens.textFieldFontFamily, _Range.rangeTokens.textFieldFontStyle, _Range.rangeTokens.textFieldFontSize, _Range.rangeTokens.textFieldFontWeight, _Range.rangeTokens.textFieldLetterSpacing, _Range.rangeTokens.textFieldLineHeight, _Range.rangeTokens.leftHelperOffset, _Range.rangeTokens.leftHelperFontFamily, _Range.rangeTokens.leftHelperFontStyle, _Range.rangeTokens.leftHelperFontSize, _Range.rangeTokens.leftHelperFontWeight, _Range.rangeTokens.leftHelperLetterSpacing, _Range.rangeTokens.leftHelperLineHeight, _Range.rangeTokens.textFieldLeftContentMargin, _Range.rangeTokens.textFieldRightContentMargin, _Range.rangeTokens.textFieldTextBeforeMargin, _Range.rangeTokens.textFieldTextAfterMargin),
|
21
|
+
s: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.625rem;", ":0.0625rem;", ":0 0.375rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0 0.375rem 0 0.75rem;", ":0;", ":0 0 0.5rem 0;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":2.5rem;", ":0.625rem;", ":0.0625rem;", ":0.6875rem 0.875rem 0.6875rem 0.875rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.25rem 0 0 0;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.1875rem 0.25rem -0.1875rem -0.125rem;", ":-0.1875rem -0.125rem -0.1875rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;"], _Range.rangeTokens.borderRadius, _Range.rangeTokens.borderWidth, _Range.rangeTokens.dividerPadding, _Range.rangeTokens.dividerFontFamily, _Range.rangeTokens.dividerFontStyle, _Range.rangeTokens.dividerFontSize, _Range.rangeTokens.dividerFontWeight, _Range.rangeTokens.dividerLetterSpacing, _Range.rangeTokens.dividerLineHeight, _Range.rangeTokens.leftContentMargin, _Range.rangeTokens.rightContentMargin, _Range.rangeTokens.labelOffset, _Range.rangeTokens.labelFontFamily, _Range.rangeTokens.labelFontStyle, _Range.rangeTokens.labelFontSize, _Range.rangeTokens.labelFontWeight, _Range.rangeTokens.labelLetterSpacing, _Range.rangeTokens.labelLineHeight, _Range.rangeTokens.textFieldHeight, _Range.rangeTokens.textFieldBorderRadius, _Range.rangeTokens.textFieldBorderWidth, _Range.rangeTokens.textFieldPadding, _Range.rangeTokens.textFieldFontFamily, _Range.rangeTokens.textFieldFontStyle, _Range.rangeTokens.textFieldFontSize, _Range.rangeTokens.textFieldFontWeight, _Range.rangeTokens.textFieldLetterSpacing, _Range.rangeTokens.textFieldLineHeight, _Range.rangeTokens.leftHelperOffset, _Range.rangeTokens.leftHelperFontFamily, _Range.rangeTokens.leftHelperFontStyle, _Range.rangeTokens.leftHelperFontSize, _Range.rangeTokens.leftHelperFontWeight, _Range.rangeTokens.leftHelperLetterSpacing, _Range.rangeTokens.leftHelperLineHeight, _Range.rangeTokens.textFieldLeftContentMargin, _Range.rangeTokens.textFieldRightContentMargin, _Range.rangeTokens.textFieldTextBeforeMargin, _Range.rangeTokens.textFieldTextAfterMargin),
|
22
|
+
xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":0.5rem;", ":0.0625rem;", ":0 0.375rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0 0.25rem 0 0.5rem;", ":0;", ":0 0 0.375rem 0;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":2rem;", ":0.5rem;", ":0.0625rem;", ":0.5625rem 0.625rem 0.5625rem 0.625rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.25rem 0 0 0;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":-0.0625rem 0.25rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":0 0.25rem 0 0;", ":0 0 0 0.25rem;"], _Range.rangeTokens.borderRadius, _Range.rangeTokens.borderWidth, _Range.rangeTokens.dividerPadding, _Range.rangeTokens.dividerFontFamily, _Range.rangeTokens.dividerFontStyle, _Range.rangeTokens.dividerFontSize, _Range.rangeTokens.dividerFontWeight, _Range.rangeTokens.dividerLetterSpacing, _Range.rangeTokens.dividerLineHeight, _Range.rangeTokens.leftContentMargin, _Range.rangeTokens.rightContentMargin, _Range.rangeTokens.labelOffset, _Range.rangeTokens.labelFontFamily, _Range.rangeTokens.labelFontStyle, _Range.rangeTokens.labelFontSize, _Range.rangeTokens.labelFontWeight, _Range.rangeTokens.labelLetterSpacing, _Range.rangeTokens.labelLineHeight, _Range.rangeTokens.textFieldHeight, _Range.rangeTokens.textFieldBorderRadius, _Range.rangeTokens.textFieldBorderWidth, _Range.rangeTokens.textFieldPadding, _Range.rangeTokens.textFieldFontFamily, _Range.rangeTokens.textFieldFontStyle, _Range.rangeTokens.textFieldFontSize, _Range.rangeTokens.textFieldFontWeight, _Range.rangeTokens.textFieldLetterSpacing, _Range.rangeTokens.textFieldLineHeight, _Range.rangeTokens.leftHelperOffset, _Range.rangeTokens.leftHelperFontFamily, _Range.rangeTokens.leftHelperFontStyle, _Range.rangeTokens.leftHelperFontSize, _Range.rangeTokens.leftHelperFontWeight, _Range.rangeTokens.leftHelperLetterSpacing, _Range.rangeTokens.leftHelperLineHeight, _Range.rangeTokens.textFieldLeftContentMargin, _Range.rangeTokens.textFieldRightContentMargin, _Range.rangeTokens.textFieldTextBeforeMargin, _Range.rangeTokens.textFieldTextAfterMargin)
|
23
|
+
},
|
24
|
+
disabled: {
|
25
|
+
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Range.rangeTokens.disabledOpacity)
|
26
|
+
},
|
27
|
+
readOnly: {
|
28
|
+
"true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-clear);", ":var(--surface-transparent-tertiary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":transparent;", ":var(--text-secondary);"], _Range.rangeTokens.backgroundReadOnly, _Range.rangeTokens.borderColorReadOnly, _Range.rangeTokens.labelColorReadOnly, _Range.rangeTokens.leftHelperColorReadOnly, _Range.rangeTokens.dividerColorReadOnly, _Range.rangeTokens.textFieldColorReadOnly, _Range.rangeTokens.textFieldBackgroundColorReadOnly, _Range.rangeTokens.textFieldPlaceholderColorReadOnly)
|
29
|
+
}
|
30
|
+
}
|
31
|
+
};
|
@@ -0,0 +1,11 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.Range = void 0;
|
7
|
+
var _engines = /*#__PURE__*/require("../../../../engines");
|
8
|
+
var _Range = /*#__PURE__*/require("../../../../components/Range");
|
9
|
+
var _Range2 = /*#__PURE__*/require("./Range.config");
|
10
|
+
var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Range.rangeConfig, _Range2.config);
|
11
|
+
var Range = exports.Range = /*#__PURE__*/(0, _engines.component)(mergedConfig);
|
@@ -0,0 +1,312 @@
|
|
1
|
+
import React, { ChangeEvent, ComponentProps, Dispatch, SetStateAction, useState } from 'react';
|
2
|
+
import type { StoryObj, Meta } from '@storybook/react';
|
3
|
+
import { action } from '@storybook/addon-actions';
|
4
|
+
import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
|
5
|
+
|
6
|
+
import { WithTheme } from '../../../_helpers';
|
7
|
+
import { IconChevronLeft } from '../../../../components/_Icon';
|
8
|
+
import { IconButton } from '../IconButton/IconButton';
|
9
|
+
|
10
|
+
import { Range } from './Range';
|
11
|
+
|
12
|
+
const onChangeFirstValue = action('onChangeFirstValue');
|
13
|
+
const onChangeSecondValue = action('onChangeSecondValue');
|
14
|
+
const onSearchFirstValue = action('onSearchFirstValue');
|
15
|
+
const onSearchSecondValue = action('onSearchSecondValue');
|
16
|
+
const onFocusFirstTextfield = action('onFocusFirstTextfield');
|
17
|
+
const onFocusSecondTextfield = action('onFocusSecondTextfield');
|
18
|
+
const onBlurFirstTextfield = action('onBlurFirstTextfield');
|
19
|
+
const onBlurSecondTextfield = action('onBlurSecondTextfield');
|
20
|
+
|
21
|
+
const sizes = ['l', 'm', 's', 'xs'];
|
22
|
+
const views = ['default'];
|
23
|
+
const dividers = ['none', 'dash', 'icon'];
|
24
|
+
|
25
|
+
const meta: Meta<typeof Range> = {
|
26
|
+
title: 'plasma_web/Range',
|
27
|
+
component: Range,
|
28
|
+
decorators: [WithTheme],
|
29
|
+
argTypes: {
|
30
|
+
view: {
|
31
|
+
options: views,
|
32
|
+
control: {
|
33
|
+
type: 'inline-radio',
|
34
|
+
},
|
35
|
+
},
|
36
|
+
size: {
|
37
|
+
options: sizes,
|
38
|
+
control: {
|
39
|
+
type: 'inline-radio',
|
40
|
+
},
|
41
|
+
},
|
42
|
+
},
|
43
|
+
};
|
44
|
+
|
45
|
+
export default meta;
|
46
|
+
|
47
|
+
type StoryPropsDefault = ComponentProps<typeof Range> & {
|
48
|
+
enableContentLeft: boolean;
|
49
|
+
enableContentRight: boolean;
|
50
|
+
enableFirstTextfieldContentLeft: boolean;
|
51
|
+
enableSecondTextfieldContentLeft: boolean;
|
52
|
+
enableFirstTextfieldContentRight: boolean;
|
53
|
+
enableSecondTextfieldContentRight: boolean;
|
54
|
+
};
|
55
|
+
|
56
|
+
const getSizeForIcon = (size) => {
|
57
|
+
const map = {
|
58
|
+
m: 's',
|
59
|
+
l: 's',
|
60
|
+
s: 's',
|
61
|
+
xs: 'xs',
|
62
|
+
};
|
63
|
+
if (map[size]) {
|
64
|
+
return map[size];
|
65
|
+
}
|
66
|
+
|
67
|
+
return size;
|
68
|
+
};
|
69
|
+
|
70
|
+
const ActionButton = ({ size }) => {
|
71
|
+
return (
|
72
|
+
<IconButton view="clear" size={size}>
|
73
|
+
<IconChevronLeft size={getSizeForIcon(size)} />
|
74
|
+
</IconButton>
|
75
|
+
);
|
76
|
+
};
|
77
|
+
|
78
|
+
const StoryDefault = ({
|
79
|
+
dividerVariant,
|
80
|
+
enableContentLeft,
|
81
|
+
enableContentRight,
|
82
|
+
firstTextfieldTextBefore,
|
83
|
+
secondTextfieldTextBefore,
|
84
|
+
enableFirstTextfieldContentLeft,
|
85
|
+
enableSecondTextfieldContentLeft,
|
86
|
+
enableFirstTextfieldContentRight,
|
87
|
+
enableSecondTextfieldContentRight,
|
88
|
+
size,
|
89
|
+
...rest
|
90
|
+
}: StoryPropsDefault) => {
|
91
|
+
const [firstValue, setFirstValue] = useState('');
|
92
|
+
const [secondValue, setSecondValue] = useState('');
|
93
|
+
|
94
|
+
const iconSize = size === 'xs' ? 'xs' : 's';
|
95
|
+
const showDividerIcon = dividerVariant === 'icon';
|
96
|
+
const showDefaultTextBefore = dividerVariant === 'none';
|
97
|
+
|
98
|
+
const dividerIconProps = {
|
99
|
+
dividerIcon: showDividerIcon ? <IconPlaceholder size="s" /> : null,
|
100
|
+
dividerVariant,
|
101
|
+
};
|
102
|
+
|
103
|
+
return (
|
104
|
+
<Range
|
105
|
+
size={size}
|
106
|
+
firstValue={firstValue}
|
107
|
+
secondValue={secondValue}
|
108
|
+
contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
|
109
|
+
contentRight={enableContentRight ? <ActionButton size={size} /> : undefined}
|
110
|
+
firstTextfieldContentLeft={
|
111
|
+
enableFirstTextfieldContentLeft ? <IconPlaceholder size={iconSize} /> : undefined
|
112
|
+
}
|
113
|
+
firstTextfieldContentRight={
|
114
|
+
enableFirstTextfieldContentRight ? <IconPlaceholder size={iconSize} /> : undefined
|
115
|
+
}
|
116
|
+
secondTextfieldContentLeft={
|
117
|
+
enableSecondTextfieldContentLeft ? <IconPlaceholder size={iconSize} /> : undefined
|
118
|
+
}
|
119
|
+
secondTextfieldContentRight={
|
120
|
+
enableSecondTextfieldContentRight ? <IconPlaceholder size={iconSize} /> : undefined
|
121
|
+
}
|
122
|
+
firstTextfieldTextBefore={
|
123
|
+
showDefaultTextBefore ? firstTextfieldTextBefore || 'С' : firstTextfieldTextBefore
|
124
|
+
}
|
125
|
+
secondTextfieldTextBefore={
|
126
|
+
showDefaultTextBefore ? secondTextfieldTextBefore || 'ПО' : secondTextfieldTextBefore
|
127
|
+
}
|
128
|
+
onChangeFirstValue={(e) => {
|
129
|
+
setFirstValue(e.target.value);
|
130
|
+
onChangeFirstValue(e, e.target.value);
|
131
|
+
}}
|
132
|
+
onChangeSecondValue={(e) => {
|
133
|
+
setSecondValue(e.target.value);
|
134
|
+
onChangeSecondValue(e, e.target.value);
|
135
|
+
}}
|
136
|
+
onSearchFirstValue={onSearchFirstValue}
|
137
|
+
onSearchSecondValue={onSearchSecondValue}
|
138
|
+
onFocusFirstTextfield={onFocusFirstTextfield}
|
139
|
+
onFocusSecondTextfield={onFocusSecondTextfield}
|
140
|
+
onBlurFirstTextfield={onBlurFirstTextfield}
|
141
|
+
onBlurSecondTextfield={onBlurSecondTextfield}
|
142
|
+
{...dividerIconProps}
|
143
|
+
{...rest}
|
144
|
+
/>
|
145
|
+
);
|
146
|
+
};
|
147
|
+
|
148
|
+
export const Default: StoryObj<StoryPropsDefault> = {
|
149
|
+
argTypes: {
|
150
|
+
dividerVariant: {
|
151
|
+
options: dividers,
|
152
|
+
control: {
|
153
|
+
type: 'inline-radio',
|
154
|
+
},
|
155
|
+
},
|
156
|
+
},
|
157
|
+
args: {
|
158
|
+
label: 'Лейбл',
|
159
|
+
leftHelper: 'Подсказка к полю',
|
160
|
+
firstPlaceholder: 'Заполните поле 1',
|
161
|
+
secondPlaceholder: 'Заполните поле 2',
|
162
|
+
size: 'l',
|
163
|
+
view: 'default',
|
164
|
+
disabled: false,
|
165
|
+
readOnly: false,
|
166
|
+
firstTextfieldTextBefore: 'С',
|
167
|
+
secondTextfieldTextBefore: 'ПО',
|
168
|
+
enableContentLeft: true,
|
169
|
+
enableContentRight: true,
|
170
|
+
dividerVariant: 'dash',
|
171
|
+
enableFirstTextfieldContentLeft: false,
|
172
|
+
enableFirstTextfieldContentRight: false,
|
173
|
+
enableSecondTextfieldContentLeft: false,
|
174
|
+
enableSecondTextfieldContentRight: false,
|
175
|
+
firstValueError: false,
|
176
|
+
secondValueError: false,
|
177
|
+
firstValueSuccess: false,
|
178
|
+
secondValueSuccess: false,
|
179
|
+
},
|
180
|
+
render: (args) => <StoryDefault {...args} />,
|
181
|
+
};
|
182
|
+
|
183
|
+
const StoryDemo = ({ enableContentLeft, enableContentRight, size, ...rest }: StoryPropsDefault) => {
|
184
|
+
const [firstValue, setFirstValue] = useState('');
|
185
|
+
const [secondValue, setSecondValue] = useState('');
|
186
|
+
|
187
|
+
const [firstValueError, setFirstValueError] = useState(false);
|
188
|
+
const [secondValueError, setSecondValueError] = useState(false);
|
189
|
+
|
190
|
+
const [firstValueSuccess, setFirstValueSuccess] = useState(false);
|
191
|
+
const [secondValueSuccess, setSecondValueSuccess] = useState(false);
|
192
|
+
|
193
|
+
const checkValue = (value: string) => /^([1-9][0-9]*|)$/.test(value);
|
194
|
+
|
195
|
+
const handleChangeValue = (
|
196
|
+
e: ChangeEvent<HTMLInputElement>,
|
197
|
+
setter: Dispatch<SetStateAction<string>>,
|
198
|
+
error: boolean,
|
199
|
+
errorSetter: Dispatch<SetStateAction<boolean>>,
|
200
|
+
success: boolean,
|
201
|
+
successSetter: Dispatch<SetStateAction<boolean>>,
|
202
|
+
) => {
|
203
|
+
const { value } = e.target;
|
204
|
+
if (!checkValue(value)) {
|
205
|
+
return;
|
206
|
+
}
|
207
|
+
|
208
|
+
if (error) {
|
209
|
+
errorSetter(false);
|
210
|
+
}
|
211
|
+
|
212
|
+
if (success) {
|
213
|
+
successSetter(false);
|
214
|
+
}
|
215
|
+
|
216
|
+
setter(value);
|
217
|
+
};
|
218
|
+
|
219
|
+
const firstValueConstraint = (value: number) =>
|
220
|
+
value <= 0 || value >= 9 || (secondValue && value >= Number(secondValue) && !secondValueError);
|
221
|
+
const secondValueConstraint = (value: number) =>
|
222
|
+
value <= 0 || value > 10 || (firstValue && value <= Number(firstValue) && !firstValueError);
|
223
|
+
|
224
|
+
const handleCommitValue = (
|
225
|
+
value: string,
|
226
|
+
constraint: (currentValue: number) => boolean,
|
227
|
+
errorSetter: Dispatch<SetStateAction<boolean>>,
|
228
|
+
successSetter: Dispatch<SetStateAction<boolean>>,
|
229
|
+
) => {
|
230
|
+
if (!value) {
|
231
|
+
return;
|
232
|
+
}
|
233
|
+
|
234
|
+
if (!checkValue(value)) {
|
235
|
+
return errorSetter(true);
|
236
|
+
}
|
237
|
+
|
238
|
+
if (constraint(Number(value))) {
|
239
|
+
return errorSetter(true);
|
240
|
+
}
|
241
|
+
|
242
|
+
successSetter(true);
|
243
|
+
};
|
244
|
+
|
245
|
+
const iconSize = size === 'xs' ? 'xs' : 's';
|
246
|
+
|
247
|
+
return (
|
248
|
+
<Range
|
249
|
+
dividerVariant="dash"
|
250
|
+
size={size}
|
251
|
+
firstValue={firstValue}
|
252
|
+
secondValue={secondValue}
|
253
|
+
firstValueError={firstValueError}
|
254
|
+
secondValueError={secondValueError}
|
255
|
+
firstValueSuccess={firstValueSuccess}
|
256
|
+
secondValueSuccess={secondValueSuccess}
|
257
|
+
contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
|
258
|
+
contentRight={enableContentRight ? <ActionButton size={size} /> : undefined}
|
259
|
+
onChangeFirstValue={(e) => {
|
260
|
+
handleChangeValue(
|
261
|
+
e,
|
262
|
+
setFirstValue,
|
263
|
+
firstValueError,
|
264
|
+
setFirstValueError,
|
265
|
+
firstValueSuccess,
|
266
|
+
setFirstValueSuccess,
|
267
|
+
);
|
268
|
+
}}
|
269
|
+
onChangeSecondValue={(e) => {
|
270
|
+
handleChangeValue(
|
271
|
+
e,
|
272
|
+
setSecondValue,
|
273
|
+
secondValueError,
|
274
|
+
setSecondValueError,
|
275
|
+
secondValueSuccess,
|
276
|
+
setSecondValueSuccess,
|
277
|
+
);
|
278
|
+
}}
|
279
|
+
onSearchFirstValue={(e) => {
|
280
|
+
const { value } = e.target as HTMLInputElement;
|
281
|
+
handleCommitValue(value, firstValueConstraint, setFirstValueError, setFirstValueSuccess);
|
282
|
+
}}
|
283
|
+
onSearchSecondValue={(e) => {
|
284
|
+
const { value } = e.target as HTMLInputElement;
|
285
|
+
handleCommitValue(value, secondValueConstraint, setSecondValueError, setSecondValueSuccess);
|
286
|
+
}}
|
287
|
+
onFocusFirstTextfield={onFocusFirstTextfield}
|
288
|
+
onFocusSecondTextfield={onFocusSecondTextfield}
|
289
|
+
onBlurFirstTextfield={onBlurFirstTextfield}
|
290
|
+
onBlurSecondTextfield={onBlurSecondTextfield}
|
291
|
+
{...rest}
|
292
|
+
/>
|
293
|
+
);
|
294
|
+
};
|
295
|
+
|
296
|
+
export const Demo: StoryObj<StoryPropsDefault> = {
|
297
|
+
args: {
|
298
|
+
label: 'Введите кол-во товара',
|
299
|
+
leftHelper: 'Кол-во товара не может быть меньше 1 и превышать 10',
|
300
|
+
firstPlaceholder: '1',
|
301
|
+
secondPlaceholder: '5',
|
302
|
+
size: 'l',
|
303
|
+
view: 'default',
|
304
|
+
disabled: false,
|
305
|
+
readOnly: false,
|
306
|
+
firstTextfieldTextBefore: '',
|
307
|
+
secondTextfieldTextBefore: '',
|
308
|
+
enableContentLeft: true,
|
309
|
+
enableContentRight: true,
|
310
|
+
},
|
311
|
+
render: (args) => <StoryDemo {...args} />,
|
312
|
+
};
|