@salutejs/plasma-new-hope 0.83.0-canary.1213.9176450261.0 → 0.84.0-canary.1194.9208145301.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/Avatar/Avatar.template-doc.mdx +3 -1
- package/styled-components/cjs/components/Badge/Badge.template-doc.mdx +9 -9
- 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 +8 -51
- 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/Cell/Cell.template-doc.mdx +68 -0
- package/styled-components/cjs/components/Checkbox/Checkbox.template-doc.mdx +2 -2
- package/styled-components/cjs/components/Chip/Chip.template-doc.mdx +1 -1
- package/styled-components/cjs/components/Combobox/Combobox.template-doc.mdx +14 -14
- package/styled-components/cjs/components/Counter/Counter.template-doc.mdx +5 -5
- package/styled-components/cjs/components/Divider/Divider.template-docs.mdx +57 -0
- package/styled-components/cjs/components/Drawer/Drawer.template-doc.mdx +3 -3
- package/styled-components/cjs/components/Dropdown/Dropdown.template-doc.mdx +262 -261
- package/styled-components/cjs/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
- package/styled-components/cjs/components/IconButton/IconButton.template-doc.mdx +156 -0
- package/styled-components/cjs/components/Image/Image.template-doc.mdx +1 -1
- package/styled-components/cjs/components/Link/Link.template-doc.mdx +4 -4
- package/styled-components/cjs/components/Modal/Modal.template-doc.mdx +85 -33
- package/styled-components/cjs/components/Notification/Notification.template-doc.mdx +1 -2
- package/styled-components/cjs/components/Pagination/Pagination.template-doc.mdx +130 -0
- package/styled-components/cjs/components/Popover/Popover.template-doc.mdx +3 -3
- package/styled-components/cjs/components/Popup/Popup.template-doc.mdx +70 -74
- package/styled-components/cjs/components/Progress/Progress.template-doc.mdx +33 -0
- package/styled-components/cjs/components/Radiobox/Radiobox.template-doc.mdx +2 -1
- package/styled-components/cjs/components/Segment/Segment.template-doc.mdx +2 -2
- package/styled-components/cjs/components/Skeleton/Skeleton.template-doc.mdx +4 -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/Tabs/Tabs.template-doc.mdx +1 -1
- package/styled-components/cjs/components/TextField/TextField.js +12 -3
- package/styled-components/cjs/components/TextField/TextField.template-doc.mdx +2 -2
- package/styled-components/cjs/components/Toolbar/Toolbar.template-doc.mdx +120 -0
- 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/Avatar/Avatar.template-doc.mdx +3 -1
- package/styled-components/es/components/Badge/Badge.template-doc.mdx +9 -9
- 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 +8 -51
- 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/Cell/Cell.template-doc.mdx +68 -0
- package/styled-components/es/components/Checkbox/Checkbox.template-doc.mdx +2 -2
- package/styled-components/es/components/Chip/Chip.template-doc.mdx +1 -1
- package/styled-components/es/components/Combobox/Combobox.template-doc.mdx +14 -14
- package/styled-components/es/components/Counter/Counter.template-doc.mdx +5 -5
- package/styled-components/es/components/Divider/Divider.template-docs.mdx +57 -0
- package/styled-components/es/components/Drawer/Drawer.template-doc.mdx +3 -3
- package/styled-components/es/components/Dropdown/Dropdown.template-doc.mdx +262 -261
- package/styled-components/es/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
- package/styled-components/es/components/IconButton/IconButton.template-doc.mdx +156 -0
- package/styled-components/es/components/Image/Image.template-doc.mdx +1 -1
- package/styled-components/es/components/Link/Link.template-doc.mdx +4 -4
- package/styled-components/es/components/Modal/Modal.template-doc.mdx +85 -33
- package/styled-components/es/components/Notification/Notification.template-doc.mdx +1 -2
- package/styled-components/es/components/Pagination/Pagination.template-doc.mdx +130 -0
- package/styled-components/es/components/Popover/Popover.template-doc.mdx +3 -3
- package/styled-components/es/components/Popup/Popup.template-doc.mdx +70 -74
- package/styled-components/es/components/Progress/Progress.template-doc.mdx +33 -0
- package/styled-components/es/components/Radiobox/Radiobox.template-doc.mdx +2 -1
- package/styled-components/es/components/Segment/Segment.template-doc.mdx +2 -2
- package/styled-components/es/components/Skeleton/Skeleton.template-doc.mdx +4 -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/Tabs/Tabs.template-doc.mdx +1 -1
- package/styled-components/es/components/TextField/TextField.js +12 -3
- package/styled-components/es/components/TextField/TextField.template-doc.mdx +2 -2
- package/styled-components/es/components/Toolbar/Toolbar.template-doc.mdx +120 -0
- 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_nedem1.css +0 -8
- package/cjs/components/ButtonGroup/variations/_view/base_1n9gznw.css +0 -1
- package/es/components/Button/Button.styles_nedem1.css +0 -8
- package/es/components/ButtonGroup/variations/_view/base_1n9gznw.css +0 -1
@@ -1,45 +1,79 @@
|
|
1
1
|
---
|
2
|
-
id:
|
3
|
-
title:
|
2
|
+
id: popup
|
3
|
+
title: Popup
|
4
4
|
---
|
5
5
|
|
6
6
|
import { PropsTable, Description } from '@site/src/components';
|
7
7
|
|
8
|
-
#
|
9
|
-
<Description name="
|
10
|
-
<PropsTable name="
|
8
|
+
# Popup
|
9
|
+
<Description name="Popup" />
|
10
|
+
<PropsTable name="Popup" />
|
11
11
|
|
12
12
|
### Провайдер контекста
|
13
13
|
|
14
|
-
Поместите `
|
14
|
+
Поместите `PopupProvider` в [корень приложения](../../#корень-приложения) или там, где будете применять Popup:
|
15
15
|
|
16
16
|
```tsx title="index.ts"
|
17
17
|
import ReactDOM from 'react-dom';
|
18
|
-
import {
|
18
|
+
import { PopupProvider } from '@salutejs/sdds-serv';
|
19
19
|
|
20
20
|
import { App } from './App';
|
21
21
|
|
22
22
|
ReactDOM.render(
|
23
|
-
<
|
23
|
+
<PopupProvider>
|
24
24
|
<App />
|
25
|
-
</
|
25
|
+
</PopupProvider>,
|
26
26
|
document.getElementById('root')
|
27
27
|
);
|
28
28
|
```
|
29
29
|
|
30
30
|
### Использование
|
31
31
|
|
32
|
-
|
32
|
+
Popup можно использовать как и на всем окне, так и в отдельном фрейме - свойство `frame`.
|
33
|
+
|
33
34
|
Также это свойство поддерживает передачу id элемента, в котором будет использоваться компонент.
|
35
|
+
|
34
36
|
Само позиционирование можно указать с помощью свойства `placement`(center - по умолчанию; left, right, top, bottom и их комбинации),
|
35
|
-
|
37
|
+
а также определить отступы от точки с помощью `offset`.
|
36
38
|
|
37
39
|
```tsx live
|
38
40
|
import React, { useRef } from 'react';
|
39
|
-
import
|
40
|
-
import {
|
41
|
+
import styled from 'styled-components';
|
42
|
+
import { surfaceSolidTertiary, surfaceSolidSecondary } from '@salutejs/{{ vertical }}/tokens';
|
43
|
+
|
44
|
+
import { SSRProvider, Button, Popup, PopupProvider } from '@salutejs/{{ package }}';
|
41
45
|
|
42
46
|
export function App() {
|
47
|
+
const StyledButton = styled(Button)`
|
48
|
+
margin-top: 1rem;
|
49
|
+
width: 15rem;
|
50
|
+
`;
|
51
|
+
|
52
|
+
const StyledWrapper = styled.div`
|
53
|
+
height: 500px;
|
54
|
+
`;
|
55
|
+
|
56
|
+
const OtherContent = styled.div`
|
57
|
+
margin-top: 1rem;
|
58
|
+
width: 400px;
|
59
|
+
height: 500px;
|
60
|
+
background: ${surfaceSolidTertiary};
|
61
|
+
position: absolute;
|
62
|
+
|
63
|
+
display: flex;
|
64
|
+
align-items: flex-start;
|
65
|
+
justify-content: center;
|
66
|
+
padding: 1rem;
|
67
|
+
|
68
|
+
bottom: 0;
|
69
|
+
right: 0;
|
70
|
+
`;
|
71
|
+
|
72
|
+
const Content = styled.div`
|
73
|
+
background: ${surfaceSolidSecondary};
|
74
|
+
padding: 1rem;
|
75
|
+
`;
|
76
|
+
|
43
77
|
const [isOpenA, setIsOpenA] = React.useState(false);
|
44
78
|
const [isOpenB, setIsOpenB] = React.useState(false);
|
45
79
|
|
@@ -47,59 +81,28 @@ export function App() {
|
|
47
81
|
|
48
82
|
return (
|
49
83
|
<SSRProvider>
|
50
|
-
<
|
51
|
-
<
|
84
|
+
<PopupProvider>
|
85
|
+
<StyledWrapper>
|
52
86
|
<div style=\{{ display: 'flex', flexDirection: 'column' }}>
|
53
|
-
<
|
54
|
-
|
55
|
-
marginTop: "1rem",
|
56
|
-
width: "15rem"
|
57
|
-
}}
|
58
|
-
text="Открыть в document"
|
59
|
-
onClick={() => setIsOpenB(true)}
|
60
|
-
/>
|
61
|
-
<Button
|
62
|
-
style=\{{
|
63
|
-
marginTop: "1rem",
|
64
|
-
width: "15rem"
|
65
|
-
}}
|
66
|
-
text="Открыть во Frame"
|
67
|
-
onClick={() => setIsOpenA(true)}
|
68
|
-
/>
|
87
|
+
<StyledButton text="Открыть в document" onClick={() => setIsOpenB(true)} />
|
88
|
+
<StyledButton text="Открыть во Frame" onClick={() => setIsOpenA(true)} />
|
69
89
|
</div>
|
70
|
-
<
|
90
|
+
<Popup
|
71
91
|
id="popupA"
|
72
92
|
frame={ref}
|
73
93
|
isOpen={isOpenA}
|
74
94
|
placement="center"
|
75
95
|
offset={[0, 0]}
|
76
96
|
>
|
77
|
-
<
|
97
|
+
<Content>
|
78
98
|
<Button onClick={() => setIsOpenA(false)}>Close</Button>
|
79
99
|
<>Content</>
|
80
|
-
</
|
81
|
-
</
|
82
|
-
<
|
83
|
-
ref={ref}
|
84
|
-
style=\{{
|
85
|
-
marginTop: "1rem",
|
86
|
-
width: "400px",
|
87
|
-
height: "500px",
|
88
|
-
background: surfaceSolid03,
|
89
|
-
position: "absolute",
|
90
|
-
|
91
|
-
display: "flex",
|
92
|
-
alignItems: "flex-start",
|
93
|
-
justifyContent: "center",
|
94
|
-
padding: "1rem",
|
95
|
-
|
96
|
-
bottom: 0,
|
97
|
-
right: 0
|
98
|
-
}}
|
99
|
-
>
|
100
|
+
</Content>
|
101
|
+
</Popup>
|
102
|
+
<OtherContent ref={ref}>
|
100
103
|
<>Frame</>
|
101
|
-
</
|
102
|
-
<
|
104
|
+
</OtherContent>
|
105
|
+
<Popup
|
103
106
|
id="popupB"
|
104
107
|
frame="document"
|
105
108
|
isOpen={isOpenB}
|
@@ -110,9 +113,9 @@ export function App() {
|
|
110
113
|
<Button onClick={() => setIsOpenB(false)}>Close</Button>
|
111
114
|
<>Content</>
|
112
115
|
</Content>
|
113
|
-
</
|
114
|
-
</
|
115
|
-
</
|
116
|
+
</Popup>
|
117
|
+
</StyledWrapper>
|
118
|
+
</PopupProvider>
|
116
119
|
</SSRProvider>
|
117
120
|
);
|
118
121
|
}
|
@@ -121,19 +124,19 @@ export function App() {
|
|
121
124
|
## Подключение анимации
|
122
125
|
|
123
126
|
Для подключения анимации нужно добавить параметр `withAnimation`.
|
124
|
-
Само управление происходит с помощью классов через переменные `endAnimation`, `endTransition` из объекта `
|
125
|
-
Для добавления анимации необходимо использовать класс `.popup-
|
127
|
+
Само управление происходит с помощью классов через переменные `endAnimation`, `endTransition` из объекта `PopupClasses` для `Popup`.
|
128
|
+
Для добавления анимации необходимо использовать класс `.popup-root` через переменную `PopupClasses.root` из пакета.
|
126
129
|
|
127
130
|
Пример:
|
128
131
|
|
129
132
|
```tsx
|
130
|
-
const StyledPopupTransition = styled(
|
131
|
-
&& > .${
|
133
|
+
const StyledPopupTransition = styled(Popup)`
|
134
|
+
&& > .${PopupClasses.root} {
|
132
135
|
opacity: 1;
|
133
136
|
transition: opacity 0.5s 0.1s;
|
134
137
|
}
|
135
138
|
|
136
|
-
&&.${
|
139
|
+
&&.${PopupClasses.endTransition} > .${PopupClasses.root} {
|
137
140
|
opacity: 0;
|
138
141
|
transition: opacity 0.5s 0.1s;
|
139
142
|
}
|
@@ -143,12 +146,12 @@ const StyledPopupTransition = styled(PopupBase)`
|
|
143
146
|
или
|
144
147
|
|
145
148
|
```tsx
|
146
|
-
const StyledPopupAnimation = styled(
|
147
|
-
&& > .${
|
149
|
+
const StyledPopupAnimation = styled(Popup)`
|
150
|
+
&& > .${PopupClasses.root} {
|
148
151
|
animation: fadeIn 1s forwards;
|
149
152
|
}
|
150
153
|
|
151
|
-
&&.${
|
154
|
+
&&.${PopupClasses.endAnimation} > .${PopupClasses.root} {
|
152
155
|
animation: fadeOut 1s forwards;
|
153
156
|
}
|
154
157
|
|
@@ -182,14 +185,7 @@ const StyledPopupAnimation = styled(PopupBase)`
|
|
182
185
|
return (
|
183
186
|
<>
|
184
187
|
<div>
|
185
|
-
<
|
186
|
-
style=\{{
|
187
|
-
marginTop: "1rem",
|
188
|
-
width: "15rem"
|
189
|
-
}}
|
190
|
-
text="Открыть"
|
191
|
-
onClick={() => setIsOpen(true)}
|
192
|
-
/>
|
188
|
+
<StyledButton text="Открыть" onClick={() => setIsOpen(true)} />
|
193
189
|
</div>
|
194
190
|
<StyledPopupAnimation
|
195
191
|
id="popup-id"
|
@@ -0,0 +1,33 @@
|
|
1
|
+
---
|
2
|
+
id: progress
|
3
|
+
title: Progress
|
4
|
+
---
|
5
|
+
|
6
|
+
import { PropsTable, Description } from '@site/src/components';
|
7
|
+
|
8
|
+
# Progress
|
9
|
+
<Description name="Progress" />
|
10
|
+
<PropsTable name="Progress" exclude={['css']} />
|
11
|
+
|
12
|
+
##Примеры
|
13
|
+
|
14
|
+
### Вид прогресса
|
15
|
+
Вид прогресса задается с помощью свойства `view`. Возможные значения свойства `view`:
|
16
|
+
+ `"default"` – по умолчанию;
|
17
|
+
+ `"primary"` – основная;
|
18
|
+
+ `"secondary"` – вторичная;
|
19
|
+
+ `"accent"` – акцентная;
|
20
|
+
+ `"success"` – успешное завершение;
|
21
|
+
+ `"warning"` – предупреждение;
|
22
|
+
+ `"error"` – ошибка;
|
23
|
+
|
24
|
+
```tsx live
|
25
|
+
import React from 'react';
|
26
|
+
import { Progress } from '@salutejs/{{ package }}';
|
27
|
+
|
28
|
+
export function App() {
|
29
|
+
return (
|
30
|
+
<Progress value={25} view="success" displayValue />
|
31
|
+
);
|
32
|
+
}
|
33
|
+
```
|
@@ -27,8 +27,9 @@ export function App() {
|
|
27
27
|
}
|
28
28
|
```
|
29
29
|
|
30
|
-
##
|
30
|
+
## RadioGroup
|
31
31
|
Компоненты `Radiobox` следует объединять в `RadioGroup`
|
32
|
+
|
32
33
|
```tsx live
|
33
34
|
<RadioGroup aria-labelledby="radiogroup-title-id">
|
34
35
|
<H3 id="radiogroup-title-id">Заголовок</H3>
|
@@ -25,8 +25,8 @@ import { PropsTable, Description } from '@site/src/components';
|
|
25
25
|
Внутри данного провайдера есть доступ к хуку `useSegment`.
|
26
26
|
|
27
27
|
```tsx live
|
28
|
-
import React
|
29
|
-
import { SegmentGroup, SegmentItem, SegmentProvider } from '@salutejs/{{ package }}';
|
28
|
+
import React from 'react';
|
29
|
+
import { SegmentGroup, SegmentItem, SegmentProvider, useSegment } from '@salutejs/{{ package }}';
|
30
30
|
|
31
31
|
export function App() {
|
32
32
|
const items = Array(8).fill(0);
|
@@ -6,7 +6,7 @@ title: Skeleton
|
|
6
6
|
import { PropsTable, Description } from '@site/src/components';
|
7
7
|
|
8
8
|
# Skeleton
|
9
|
-
Набор компонентов для создания скелетов загрузки (
|
9
|
+
Набор компонентов для создания скелетов загрузки (placeholders).
|
10
10
|
|
11
11
|
## LineSkeleton
|
12
12
|
<Description name="LineSkeleton" />
|
@@ -77,13 +77,13 @@ export function App() {
|
|
77
77
|
```
|
78
78
|
|
79
79
|
## Доступность
|
80
|
-
При
|
80
|
+
При использовании hook `withSkeleton` необходимо воспользоваться атрибутами WAI ARIA. Пример с кнопкой:
|
81
81
|
|
82
82
|
```tsx
|
83
83
|
import React, { useState } from 'react';
|
84
84
|
import { Button } from '@salutejs/{{ package }}';
|
85
85
|
|
86
|
-
const ButtonSkeleton = withSkeleton<ButtonProps & WithSkeletonProps>(
|
86
|
+
const ButtonSkeleton = withSkeleton<ButtonProps & WithSkeletonProps>(Button);
|
87
87
|
|
88
88
|
export default function App () {
|
89
89
|
const [skeleton, setSkeleton] = useState(false);
|
@@ -100,4 +100,4 @@ export default function App () {
|
|
100
100
|
}
|
101
101
|
```
|
102
102
|
|
103
|
-
Таким образом, при `skeleton=true` и `aria-busy=true`
|
103
|
+
Таким образом, при `skeleton=true` и `aria-busy=true` screen-reader будет оповещать о соответствующем статусе компонента.
|
@@ -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
|
+
};
|