@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.
Files changed (490) hide show
  1. package/cjs/components/Button/Button.css +6 -9
  2. package/cjs/components/Button/Button.js +2 -16
  3. package/cjs/components/Button/Button.js.map +1 -1
  4. package/cjs/components/Button/Button.styles.js +10 -31
  5. package/cjs/components/Button/Button.styles.js.map +1 -1
  6. package/cjs/components/Button/Button.styles_uqvh6u.css +5 -0
  7. package/cjs/components/Button/Button.tokens.js +0 -5
  8. package/cjs/components/Button/Button.tokens.js.map +1 -1
  9. package/cjs/components/Button/variations/_stretching/base.js +1 -1
  10. package/cjs/components/Button/variations/_stretching/base.js.map +1 -1
  11. package/{es/components/Button/variations/_stretching/base_hy8dc.css → cjs/components/Button/variations/_stretching/base_1lx0ute.css} +1 -1
  12. package/cjs/components/ButtonGroup/ButtonGroup.css +2 -2
  13. package/cjs/components/ButtonGroup/ButtonGroup.tokens.js +0 -1
  14. package/cjs/components/ButtonGroup/ButtonGroup.tokens.js.map +1 -1
  15. package/cjs/components/ButtonGroup/variations/_orientation/base.js +1 -1
  16. package/cjs/components/ButtonGroup/variations/_orientation/base.js.map +1 -1
  17. package/{es/components/ButtonGroup/variations/_orientation/base_y7z7cs.css → cjs/components/ButtonGroup/variations/_orientation/base_p85v51.css} +1 -1
  18. package/cjs/components/ButtonGroup/variations/_view/base.js +1 -1
  19. package/cjs/components/ButtonGroup/variations/_view/base.js.map +1 -1
  20. package/cjs/components/ButtonGroup/variations/_view/base_6k3uip.css +1 -0
  21. package/cjs/components/Combobox/hooks/useFocusController.js +1 -0
  22. package/cjs/components/Combobox/hooks/useFocusController.js.map +1 -1
  23. package/cjs/components/Drawer/Drawer.css +6 -9
  24. package/cjs/components/Drawer/ui/DrawerContent/DrawerContent.css +6 -9
  25. package/cjs/components/Header/ui/HeaderArrow/HeaderArrow.css +6 -9
  26. package/cjs/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
  27. package/cjs/components/Header/ui/HeaderArrow/HeaderArrow.js.map +1 -1
  28. package/cjs/components/IconButton/IconButton.css +7 -10
  29. package/cjs/components/IconButton/IconButton.styles.js +1 -1
  30. package/cjs/components/IconButton/{IconButton.styles_7v8g0e.css → IconButton.styles_1hknr37.css} +1 -1
  31. package/cjs/components/Notification/Notification.css +6 -9
  32. package/cjs/components/Notification/NotificationsProvider.css +6 -9
  33. package/cjs/components/Pagination/Pagination.css +8 -11
  34. package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +6 -9
  35. package/cjs/components/Panel/ui/PanelHeader/PanelHeader.css +6 -9
  36. package/cjs/components/Select/Select.css +6 -9
  37. package/cjs/components/Select/ui/SelectTarget/SelectTarget.css +6 -9
  38. package/cjs/components/Slider/Slider.css +69 -0
  39. package/cjs/components/Slider/Slider.js +48 -0
  40. package/cjs/components/Slider/Slider.js.map +1 -0
  41. package/cjs/components/Slider/Slider.tokens.js +79 -0
  42. package/cjs/components/Slider/Slider.tokens.js.map +1 -0
  43. package/cjs/components/Slider/components/Double/Double.css +62 -0
  44. package/cjs/components/Slider/components/Double/Double.js +306 -0
  45. package/cjs/components/Slider/components/Double/Double.js.map +1 -0
  46. package/cjs/components/Slider/components/Double/Double.styles.js +61 -0
  47. package/cjs/components/Slider/components/Double/Double.styles.js.map +1 -0
  48. package/cjs/components/Slider/components/Double/Double.styles_1jhda4u.css +7 -0
  49. package/cjs/components/Slider/components/Single/Single.css +16 -0
  50. package/cjs/components/Slider/components/Single/Single.js +164 -0
  51. package/cjs/components/Slider/components/Single/Single.js.map +1 -0
  52. package/cjs/components/Slider/components/Single/Single.styles.js +45 -0
  53. package/cjs/components/Slider/components/Single/Single.styles.js.map +1 -0
  54. package/cjs/components/Slider/components/Single/Single.styles_1r9f1e0.css +6 -0
  55. package/cjs/components/Slider/components/SliderBase/SliderBase.css +4 -0
  56. package/cjs/components/Slider/components/SliderBase/SliderBase.js +82 -0
  57. package/cjs/components/Slider/components/SliderBase/SliderBase.js.map +1 -0
  58. package/cjs/components/Slider/components/SliderBase/SliderBase.styles.js +33 -0
  59. package/cjs/components/Slider/components/SliderBase/SliderBase.styles.js.map +1 -0
  60. package/cjs/components/Slider/components/SliderBase/SliderBase.styles_7is2ll.css +4 -0
  61. package/cjs/components/Slider/ui/Handler/Handler.css +4 -0
  62. package/cjs/components/Slider/ui/Handler/Handler.js +168 -0
  63. package/cjs/components/Slider/ui/Handler/Handler.js.map +1 -0
  64. package/cjs/components/Slider/ui/Handler/Handler.styles.js +21 -0
  65. package/cjs/components/Slider/ui/Handler/Handler.styles.js.map +1 -0
  66. package/cjs/components/Slider/ui/Handler/Handler.styles_8crx5z.css +2 -0
  67. package/cjs/components/Slider/ui/Thumb/Thumb.css +1 -0
  68. package/cjs/components/Slider/ui/Thumb/Thumb.js +31 -0
  69. package/cjs/components/Slider/ui/Thumb/Thumb.js.map +1 -0
  70. package/cjs/components/Slider/ui/Thumb/Thumb.styles.js +15 -0
  71. package/cjs/components/Slider/ui/Thumb/Thumb.styles.js.map +1 -0
  72. package/cjs/components/Slider/ui/Thumb/Thumb.styles_4w4gzn.css +1 -0
  73. package/cjs/components/Slider/utils/index.js +56 -0
  74. package/cjs/components/Slider/utils/index.js.map +1 -0
  75. package/cjs/components/Slider/variations/_disabled/base.js +9 -0
  76. package/cjs/components/Slider/variations/_disabled/base.js.map +1 -0
  77. package/cjs/components/Slider/variations/_disabled/base_x642ct.css +1 -0
  78. package/cjs/components/Slider/variations/_size/base.js +9 -0
  79. package/cjs/components/Slider/variations/_size/base.js.map +1 -0
  80. package/cjs/components/Slider/variations/_size/base_x642ct.css +1 -0
  81. package/cjs/components/Slider/variations/_view/base.js +9 -0
  82. package/cjs/components/Slider/variations/_view/base.js.map +1 -0
  83. package/cjs/components/Slider/variations/_view/base_x642ct.css +1 -0
  84. package/cjs/components/TextField/TextField.js +12 -3
  85. package/cjs/components/TextField/TextField.js.map +1 -1
  86. package/cjs/components/Toast/Toast.css +6 -9
  87. package/cjs/components/Toast/ToastController.css +6 -9
  88. package/cjs/engines/common.js +4 -0
  89. package/cjs/engines/common.js.map +1 -1
  90. package/cjs/engines/index.js.map +1 -1
  91. package/cjs/hooks/useIsomorphicLayoutEffect.js +15 -0
  92. package/cjs/hooks/useIsomorphicLayoutEffect.js.map +1 -0
  93. package/cjs/index.css +34 -12
  94. package/cjs/index.js +14 -0
  95. package/cjs/index.js.map +1 -1
  96. package/cjs/utils/canUseDOM.js +12 -0
  97. package/cjs/utils/canUseDOM.js.map +1 -0
  98. package/cjs/utils/index.js.map +1 -1
  99. package/es/components/Button/Button.css +6 -9
  100. package/es/components/Button/Button.js +3 -17
  101. package/es/components/Button/Button.js.map +1 -1
  102. package/es/components/Button/Button.styles.js +11 -29
  103. package/es/components/Button/Button.styles.js.map +1 -1
  104. package/es/components/Button/Button.styles_uqvh6u.css +5 -0
  105. package/es/components/Button/Button.tokens.js +0 -5
  106. package/es/components/Button/Button.tokens.js.map +1 -1
  107. package/es/components/Button/variations/_stretching/base.js +1 -1
  108. package/es/components/Button/variations/_stretching/base.js.map +1 -1
  109. package/{cjs/components/Button/variations/_stretching/base_hy8dc.css → es/components/Button/variations/_stretching/base_1lx0ute.css} +1 -1
  110. package/es/components/ButtonGroup/ButtonGroup.css +2 -2
  111. package/es/components/ButtonGroup/ButtonGroup.tokens.js +0 -1
  112. package/es/components/ButtonGroup/ButtonGroup.tokens.js.map +1 -1
  113. package/es/components/ButtonGroup/variations/_orientation/base.js +1 -1
  114. package/es/components/ButtonGroup/variations/_orientation/base.js.map +1 -1
  115. package/{cjs/components/ButtonGroup/variations/_orientation/base_y7z7cs.css → es/components/ButtonGroup/variations/_orientation/base_p85v51.css} +1 -1
  116. package/es/components/ButtonGroup/variations/_view/base.js +1 -1
  117. package/es/components/ButtonGroup/variations/_view/base.js.map +1 -1
  118. package/es/components/ButtonGroup/variations/_view/base_6k3uip.css +1 -0
  119. package/es/components/Combobox/hooks/useFocusController.js +1 -0
  120. package/es/components/Combobox/hooks/useFocusController.js.map +1 -1
  121. package/es/components/Drawer/Drawer.css +6 -9
  122. package/es/components/Drawer/ui/DrawerContent/DrawerContent.css +6 -9
  123. package/es/components/Header/ui/HeaderArrow/HeaderArrow.css +6 -9
  124. package/es/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
  125. package/es/components/Header/ui/HeaderArrow/HeaderArrow.js.map +1 -1
  126. package/es/components/IconButton/IconButton.css +7 -10
  127. package/es/components/IconButton/IconButton.styles.js +1 -1
  128. package/es/components/IconButton/{IconButton.styles_7v8g0e.css → IconButton.styles_1hknr37.css} +1 -1
  129. package/es/components/Notification/Notification.css +6 -9
  130. package/es/components/Notification/NotificationsProvider.css +6 -9
  131. package/es/components/Pagination/Pagination.css +8 -11
  132. package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +6 -9
  133. package/es/components/Panel/ui/PanelHeader/PanelHeader.css +6 -9
  134. package/es/components/Select/Select.css +6 -9
  135. package/es/components/Select/ui/SelectTarget/SelectTarget.css +6 -9
  136. package/es/components/Slider/Slider.css +69 -0
  137. package/es/components/Slider/Slider.js +43 -0
  138. package/es/components/Slider/Slider.js.map +1 -0
  139. package/es/components/Slider/Slider.tokens.js +74 -0
  140. package/es/components/Slider/Slider.tokens.js.map +1 -0
  141. package/es/components/Slider/components/Double/Double.css +62 -0
  142. package/es/components/Slider/components/Double/Double.js +302 -0
  143. package/es/components/Slider/components/Double/Double.js.map +1 -0
  144. package/es/components/Slider/components/Double/Double.styles.js +51 -0
  145. package/es/components/Slider/components/Double/Double.styles.js.map +1 -0
  146. package/es/components/Slider/components/Double/Double.styles_1jhda4u.css +7 -0
  147. package/es/components/Slider/components/Single/Single.css +16 -0
  148. package/es/components/Slider/components/Single/Single.js +160 -0
  149. package/es/components/Slider/components/Single/Single.js.map +1 -0
  150. package/es/components/Slider/components/Single/Single.styles.js +36 -0
  151. package/es/components/Slider/components/Single/Single.styles.js.map +1 -0
  152. package/es/components/Slider/components/Single/Single.styles_1r9f1e0.css +6 -0
  153. package/es/components/Slider/components/SliderBase/SliderBase.css +4 -0
  154. package/es/components/Slider/components/SliderBase/SliderBase.js +78 -0
  155. package/es/components/Slider/components/SliderBase/SliderBase.js.map +1 -0
  156. package/es/components/Slider/components/SliderBase/SliderBase.styles.js +26 -0
  157. package/es/components/Slider/components/SliderBase/SliderBase.styles.js.map +1 -0
  158. package/es/components/Slider/components/SliderBase/SliderBase.styles_7is2ll.css +4 -0
  159. package/es/components/Slider/ui/Handler/Handler.css +4 -0
  160. package/es/components/Slider/ui/Handler/Handler.js +164 -0
  161. package/es/components/Slider/ui/Handler/Handler.js.map +1 -0
  162. package/es/components/Slider/ui/Handler/Handler.styles.js +16 -0
  163. package/es/components/Slider/ui/Handler/Handler.styles.js.map +1 -0
  164. package/es/components/Slider/ui/Handler/Handler.styles_8crx5z.css +2 -0
  165. package/es/components/Slider/ui/Thumb/Thumb.css +1 -0
  166. package/es/components/Slider/ui/Thumb/Thumb.js +27 -0
  167. package/es/components/Slider/ui/Thumb/Thumb.js.map +1 -0
  168. package/es/components/Slider/ui/Thumb/Thumb.styles.js +11 -0
  169. package/es/components/Slider/ui/Thumb/Thumb.styles.js.map +1 -0
  170. package/es/components/Slider/ui/Thumb/Thumb.styles_4w4gzn.css +1 -0
  171. package/es/components/Slider/utils/index.js +50 -0
  172. package/es/components/Slider/utils/index.js.map +1 -0
  173. package/es/components/Slider/variations/_disabled/base.js +5 -0
  174. package/es/components/Slider/variations/_disabled/base.js.map +1 -0
  175. package/es/components/Slider/variations/_disabled/base_x642ct.css +1 -0
  176. package/es/components/Slider/variations/_size/base.js +5 -0
  177. package/es/components/Slider/variations/_size/base.js.map +1 -0
  178. package/es/components/Slider/variations/_size/base_x642ct.css +1 -0
  179. package/es/components/Slider/variations/_view/base.js +5 -0
  180. package/es/components/Slider/variations/_view/base.js.map +1 -0
  181. package/es/components/Slider/variations/_view/base_x642ct.css +1 -0
  182. package/es/components/TextField/TextField.js +12 -3
  183. package/es/components/TextField/TextField.js.map +1 -1
  184. package/es/components/Toast/Toast.css +6 -9
  185. package/es/components/Toast/ToastController.css +6 -9
  186. package/es/engines/common.js +4 -0
  187. package/es/engines/common.js.map +1 -1
  188. package/es/engines/index.js.map +1 -1
  189. package/es/hooks/useIsomorphicLayoutEffect.js +11 -0
  190. package/es/hooks/useIsomorphicLayoutEffect.js.map +1 -0
  191. package/es/index.css +34 -12
  192. package/es/index.js +8 -0
  193. package/es/index.js.map +1 -1
  194. package/es/utils/canUseDOM.js +8 -0
  195. package/es/utils/canUseDOM.js.map +1 -0
  196. package/es/utils/index.js.map +1 -1
  197. package/package.json +3 -2
  198. package/styled-components/cjs/components/Avatar/Avatar.template-doc.mdx +3 -1
  199. package/styled-components/cjs/components/Badge/Badge.template-doc.mdx +9 -9
  200. package/styled-components/cjs/components/Button/Button.js +2 -16
  201. package/styled-components/cjs/components/Button/Button.styles.js +12 -20
  202. package/styled-components/cjs/components/Button/Button.template-doc.mdx +8 -51
  203. package/styled-components/cjs/components/Button/Button.tokens.js +0 -5
  204. package/styled-components/cjs/components/Button/variations/_stretching/base.js +1 -1
  205. package/styled-components/cjs/components/ButtonGroup/ButtonGroup.tokens.js +0 -1
  206. package/styled-components/cjs/components/ButtonGroup/variations/_orientation/base.js +1 -2
  207. package/styled-components/cjs/components/ButtonGroup/variations/_view/base.js +1 -1
  208. package/styled-components/cjs/components/Cell/Cell.template-doc.mdx +68 -0
  209. package/styled-components/cjs/components/Checkbox/Checkbox.template-doc.mdx +2 -2
  210. package/styled-components/cjs/components/Chip/Chip.template-doc.mdx +1 -1
  211. package/styled-components/cjs/components/Combobox/Combobox.template-doc.mdx +14 -14
  212. package/styled-components/cjs/components/Counter/Counter.template-doc.mdx +5 -5
  213. package/styled-components/cjs/components/Divider/Divider.template-docs.mdx +57 -0
  214. package/styled-components/cjs/components/Drawer/Drawer.template-doc.mdx +3 -3
  215. package/styled-components/cjs/components/Dropdown/Dropdown.template-doc.mdx +262 -261
  216. package/styled-components/cjs/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
  217. package/styled-components/cjs/components/IconButton/IconButton.template-doc.mdx +156 -0
  218. package/styled-components/cjs/components/Image/Image.template-doc.mdx +1 -1
  219. package/styled-components/cjs/components/Link/Link.template-doc.mdx +4 -4
  220. package/styled-components/cjs/components/Modal/Modal.template-doc.mdx +85 -33
  221. package/styled-components/cjs/components/Notification/Notification.template-doc.mdx +1 -2
  222. package/styled-components/cjs/components/Pagination/Pagination.template-doc.mdx +130 -0
  223. package/styled-components/cjs/components/Popover/Popover.template-doc.mdx +3 -3
  224. package/styled-components/cjs/components/Popup/Popup.template-doc.mdx +70 -74
  225. package/styled-components/cjs/components/Progress/Progress.template-doc.mdx +33 -0
  226. package/styled-components/cjs/components/Radiobox/Radiobox.template-doc.mdx +2 -1
  227. package/styled-components/cjs/components/Segment/Segment.template-doc.mdx +2 -2
  228. package/styled-components/cjs/components/Skeleton/Skeleton.template-doc.mdx +4 -4
  229. package/styled-components/cjs/components/Slider/Slider.js +47 -0
  230. package/styled-components/cjs/components/Slider/Slider.tokens.js +77 -0
  231. package/styled-components/cjs/components/Slider/Slider.types.js +5 -0
  232. package/styled-components/cjs/components/Slider/components/Double/Double.js +318 -0
  233. package/styled-components/cjs/components/Slider/components/Double/Double.styles.js +36 -0
  234. package/styled-components/cjs/components/Slider/components/Double/Double.types.js +5 -0
  235. package/styled-components/cjs/components/Slider/components/Single/Single.js +176 -0
  236. package/styled-components/cjs/components/Slider/components/Single/Single.styles.js +27 -0
  237. package/styled-components/cjs/components/Slider/components/Single/Single.types.js +5 -0
  238. package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.js +83 -0
  239. package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.styles.js +21 -0
  240. package/styled-components/cjs/components/Slider/components/SliderBase/SliderBase.types.js +5 -0
  241. package/styled-components/cjs/components/Slider/components/index.js +27 -0
  242. package/styled-components/cjs/components/Slider/index.js +32 -0
  243. package/styled-components/cjs/components/Slider/ui/Handler/Handler.js +177 -0
  244. package/styled-components/cjs/components/Slider/ui/Handler/Handler.styles.js +15 -0
  245. package/styled-components/cjs/components/Slider/ui/Handler/Handler.types.js +5 -0
  246. package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.js +32 -0
  247. package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.styles.js +18 -0
  248. package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.types.js +5 -0
  249. package/styled-components/cjs/components/Slider/ui/index.js +63 -0
  250. package/styled-components/cjs/components/Slider/utils/index.js +55 -0
  251. package/styled-components/cjs/components/Slider/variations/_disabled/base.js +8 -0
  252. package/styled-components/cjs/components/Slider/variations/_disabled/tokens.json +4 -0
  253. package/styled-components/cjs/components/Slider/variations/_size/base.js +8 -0
  254. package/styled-components/cjs/components/Slider/variations/_size/tokens.json +0 -0
  255. package/styled-components/cjs/components/Slider/variations/_view/base.js +8 -0
  256. package/styled-components/cjs/components/Slider/variations/_view/tokens.json +0 -0
  257. package/styled-components/cjs/components/Tabs/Tabs.template-doc.mdx +1 -1
  258. package/styled-components/cjs/components/TextField/TextField.js +12 -3
  259. package/styled-components/cjs/components/TextField/TextField.template-doc.mdx +2 -2
  260. package/styled-components/cjs/components/Toolbar/Toolbar.template-doc.mdx +120 -0
  261. package/styled-components/cjs/engines/common.js +4 -0
  262. package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.config.js +19 -19
  263. package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.stories.tsx +21 -67
  264. package/styled-components/cjs/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.js +10 -10
  265. package/styled-components/cjs/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  266. package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.config.js +29 -0
  267. package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.js +16 -0
  268. package/styled-components/cjs/examples/plasma_b2c/components/Slider/Slider.stories.tsx +169 -0
  269. package/styled-components/cjs/examples/plasma_web/components/Button/Button.config.js +19 -19
  270. package/styled-components/cjs/examples/plasma_web/components/Button/Button.stories.tsx +28 -90
  271. package/styled-components/cjs/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.js +10 -10
  272. package/styled-components/cjs/examples/plasma_web/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  273. package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.config.js +29 -0
  274. package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.js +16 -0
  275. package/styled-components/cjs/examples/plasma_web/components/Slider/Slider.stories.tsx +168 -0
  276. package/styled-components/cjs/examples/sds_engineer/components/Button/Button.config.js +19 -19
  277. package/styled-components/cjs/examples/sds_engineer/components/Button/Button.stories.tsx +28 -90
  278. package/styled-components/cjs/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.js +10 -10
  279. package/styled-components/cjs/examples/sds_engineer/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  280. package/styled-components/cjs/hooks/index.js +8 -1
  281. package/styled-components/cjs/hooks/useIsomorphicLayoutEffect.js +12 -0
  282. package/styled-components/cjs/index.js +11 -0
  283. package/styled-components/cjs/utils/canUseDOM.js +11 -0
  284. package/styled-components/cjs/utils/index.js +7 -0
  285. package/styled-components/es/components/Avatar/Avatar.template-doc.mdx +3 -1
  286. package/styled-components/es/components/Badge/Badge.template-doc.mdx +9 -9
  287. package/styled-components/es/components/Button/Button.js +3 -17
  288. package/styled-components/es/components/Button/Button.styles.js +11 -19
  289. package/styled-components/es/components/Button/Button.template-doc.mdx +8 -51
  290. package/styled-components/es/components/Button/Button.tokens.js +0 -5
  291. package/styled-components/es/components/Button/variations/_stretching/base.js +1 -1
  292. package/styled-components/es/components/ButtonGroup/ButtonGroup.tokens.js +0 -1
  293. package/styled-components/es/components/ButtonGroup/variations/_orientation/base.js +2 -3
  294. package/styled-components/es/components/ButtonGroup/variations/_view/base.js +1 -1
  295. package/styled-components/es/components/Cell/Cell.template-doc.mdx +68 -0
  296. package/styled-components/es/components/Checkbox/Checkbox.template-doc.mdx +2 -2
  297. package/styled-components/es/components/Chip/Chip.template-doc.mdx +1 -1
  298. package/styled-components/es/components/Combobox/Combobox.template-doc.mdx +14 -14
  299. package/styled-components/es/components/Counter/Counter.template-doc.mdx +5 -5
  300. package/styled-components/es/components/Divider/Divider.template-docs.mdx +57 -0
  301. package/styled-components/es/components/Drawer/Drawer.template-doc.mdx +3 -3
  302. package/styled-components/es/components/Dropdown/Dropdown.template-doc.mdx +262 -261
  303. package/styled-components/es/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
  304. package/styled-components/es/components/IconButton/IconButton.template-doc.mdx +156 -0
  305. package/styled-components/es/components/Image/Image.template-doc.mdx +1 -1
  306. package/styled-components/es/components/Link/Link.template-doc.mdx +4 -4
  307. package/styled-components/es/components/Modal/Modal.template-doc.mdx +85 -33
  308. package/styled-components/es/components/Notification/Notification.template-doc.mdx +1 -2
  309. package/styled-components/es/components/Pagination/Pagination.template-doc.mdx +130 -0
  310. package/styled-components/es/components/Popover/Popover.template-doc.mdx +3 -3
  311. package/styled-components/es/components/Popup/Popup.template-doc.mdx +70 -74
  312. package/styled-components/es/components/Progress/Progress.template-doc.mdx +33 -0
  313. package/styled-components/es/components/Radiobox/Radiobox.template-doc.mdx +2 -1
  314. package/styled-components/es/components/Segment/Segment.template-doc.mdx +2 -2
  315. package/styled-components/es/components/Skeleton/Skeleton.template-doc.mdx +4 -4
  316. package/styled-components/es/components/Slider/Slider.js +38 -0
  317. package/styled-components/es/components/Slider/Slider.tokens.js +71 -0
  318. package/styled-components/es/components/Slider/Slider.types.js +1 -0
  319. package/styled-components/es/components/Slider/components/Double/Double.js +310 -0
  320. package/styled-components/es/components/Slider/components/Double/Double.styles.js +29 -0
  321. package/styled-components/es/components/Slider/components/Double/Double.types.js +1 -0
  322. package/styled-components/es/components/Slider/components/Single/Single.js +168 -0
  323. package/styled-components/es/components/Slider/components/Single/Single.styles.js +20 -0
  324. package/styled-components/es/components/Slider/components/Single/Single.types.js +1 -0
  325. package/styled-components/es/components/Slider/components/SliderBase/SliderBase.js +74 -0
  326. package/styled-components/es/components/Slider/components/SliderBase/SliderBase.styles.js +14 -0
  327. package/styled-components/es/components/Slider/components/SliderBase/SliderBase.types.js +1 -0
  328. package/styled-components/es/components/Slider/components/index.js +3 -0
  329. package/styled-components/es/components/Slider/index.js +3 -0
  330. package/styled-components/es/components/Slider/ui/Handler/Handler.js +168 -0
  331. package/styled-components/es/components/Slider/ui/Handler/Handler.styles.js +8 -0
  332. package/styled-components/es/components/Slider/ui/Handler/Handler.types.js +1 -0
  333. package/styled-components/es/components/Slider/ui/Thumb/Thumb.js +25 -0
  334. package/styled-components/es/components/Slider/ui/Thumb/Thumb.styles.js +11 -0
  335. package/styled-components/es/components/Slider/ui/Thumb/Thumb.types.js +1 -0
  336. package/styled-components/es/components/Slider/ui/index.js +5 -0
  337. package/styled-components/es/components/Slider/utils/index.js +47 -0
  338. package/styled-components/es/components/Slider/variations/_disabled/base.js +2 -0
  339. package/styled-components/es/components/Slider/variations/_disabled/tokens.json +4 -0
  340. package/styled-components/es/components/Slider/variations/_size/base.js +2 -0
  341. package/styled-components/es/components/Slider/variations/_size/tokens.json +0 -0
  342. package/styled-components/es/components/Slider/variations/_view/base.js +2 -0
  343. package/styled-components/es/components/Slider/variations/_view/tokens.json +0 -0
  344. package/styled-components/es/components/Tabs/Tabs.template-doc.mdx +1 -1
  345. package/styled-components/es/components/TextField/TextField.js +12 -3
  346. package/styled-components/es/components/TextField/TextField.template-doc.mdx +2 -2
  347. package/styled-components/es/components/Toolbar/Toolbar.template-doc.mdx +120 -0
  348. package/styled-components/es/engines/common.js +4 -0
  349. package/styled-components/es/examples/plasma_b2c/components/Button/Button.config.js +19 -19
  350. package/styled-components/es/examples/plasma_b2c/components/Button/Button.stories.tsx +21 -67
  351. package/styled-components/es/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.js +10 -10
  352. package/styled-components/es/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  353. package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.config.js +23 -0
  354. package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.js +10 -0
  355. package/styled-components/es/examples/plasma_b2c/components/Slider/Slider.stories.tsx +169 -0
  356. package/styled-components/es/examples/plasma_web/components/Button/Button.config.js +19 -19
  357. package/styled-components/es/examples/plasma_web/components/Button/Button.stories.tsx +28 -90
  358. package/styled-components/es/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.js +10 -10
  359. package/styled-components/es/examples/plasma_web/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  360. package/styled-components/es/examples/plasma_web/components/Slider/Slider.config.js +23 -0
  361. package/styled-components/es/examples/plasma_web/components/Slider/Slider.js +10 -0
  362. package/styled-components/es/examples/plasma_web/components/Slider/Slider.stories.tsx +168 -0
  363. package/styled-components/es/examples/sds_engineer/components/Button/Button.config.js +19 -19
  364. package/styled-components/es/examples/sds_engineer/components/Button/Button.stories.tsx +28 -90
  365. package/styled-components/es/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.js +10 -10
  366. package/styled-components/es/examples/sds_engineer/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  367. package/styled-components/es/hooks/index.js +2 -1
  368. package/styled-components/es/hooks/useIsomorphicLayoutEffect.js +7 -0
  369. package/styled-components/es/index.js +2 -1
  370. package/styled-components/es/utils/canUseDOM.js +5 -0
  371. package/styled-components/es/utils/index.js +1 -0
  372. package/types/components/Button/Button.d.ts.map +1 -1
  373. package/types/components/Button/Button.styles.d.ts +1 -5
  374. package/types/components/Button/Button.styles.d.ts.map +1 -1
  375. package/types/components/Button/Button.tokens.d.ts +0 -5
  376. package/types/components/Button/Button.tokens.d.ts.map +1 -1
  377. package/types/components/Button/Button.types.d.ts +4 -16
  378. package/types/components/Button/Button.types.d.ts.map +1 -1
  379. package/types/components/ButtonGroup/ButtonGroup.tokens.d.ts +0 -1
  380. package/types/components/ButtonGroup/ButtonGroup.tokens.d.ts.map +1 -1
  381. package/types/components/ButtonGroup/variations/_orientation/base.d.ts.map +1 -1
  382. package/types/components/ButtonGroup/variations/_view/base.d.ts.map +1 -1
  383. package/types/components/Header/ui/HeaderArrow/HeaderArrow.d.ts.map +1 -1
  384. package/types/components/Notification/Notification.styles.d.ts +1 -43
  385. package/types/components/Notification/Notification.styles.d.ts.map +1 -1
  386. package/types/components/Pagination/Pagination.styles.d.ts +2 -86
  387. package/types/components/Pagination/Pagination.styles.d.ts.map +1 -1
  388. package/types/components/Panel/ui/PanelHeader/PanelHeader.styles.d.ts +1 -43
  389. package/types/components/Panel/ui/PanelHeader/PanelHeader.styles.d.ts.map +1 -1
  390. package/types/components/Select/ui/SelectTarget/SelectTarget.styles.d.ts +1 -43
  391. package/types/components/Select/ui/SelectTarget/SelectTarget.styles.d.ts.map +1 -1
  392. package/types/components/Slider/Slider.d.ts +27 -0
  393. package/types/components/Slider/Slider.d.ts.map +1 -0
  394. package/types/components/Slider/Slider.tokens.d.ts +72 -0
  395. package/types/components/Slider/Slider.tokens.d.ts.map +1 -0
  396. package/types/components/Slider/Slider.types.d.ts +3 -0
  397. package/types/components/Slider/Slider.types.d.ts.map +1 -0
  398. package/types/components/Slider/components/Double/Double.d.ts +4 -0
  399. package/types/components/Slider/components/Double/Double.d.ts.map +1 -0
  400. package/types/components/Slider/components/Double/Double.styles.d.ts +43 -0
  401. package/types/components/Slider/components/Double/Double.styles.d.ts.map +1 -0
  402. package/types/components/Slider/components/Double/Double.types.d.ts +65 -0
  403. package/types/components/Slider/components/Double/Double.types.d.ts.map +1 -0
  404. package/types/components/Slider/components/Single/Single.d.ts +4 -0
  405. package/types/components/Slider/components/Single/Single.d.ts.map +1 -0
  406. package/types/components/Slider/components/Single/Single.styles.d.ts +8 -0
  407. package/types/components/Slider/components/Single/Single.styles.d.ts.map +1 -0
  408. package/types/components/Slider/components/Single/Single.types.d.ts +55 -0
  409. package/types/components/Slider/components/Single/Single.types.d.ts.map +1 -0
  410. package/types/components/Slider/components/SliderBase/SliderBase.d.ts +4 -0
  411. package/types/components/Slider/components/SliderBase/SliderBase.d.ts.map +1 -0
  412. package/types/components/Slider/components/SliderBase/SliderBase.styles.d.ts +6 -0
  413. package/types/components/Slider/components/SliderBase/SliderBase.styles.d.ts.map +1 -0
  414. package/types/components/Slider/components/SliderBase/SliderBase.types.d.ts +45 -0
  415. package/types/components/Slider/components/SliderBase/SliderBase.types.d.ts.map +1 -0
  416. package/types/components/Slider/components/index.d.ts +6 -0
  417. package/types/components/Slider/components/index.d.ts.map +1 -0
  418. package/types/components/Slider/index.d.ts +6 -0
  419. package/types/components/Slider/index.d.ts.map +1 -0
  420. package/types/components/Slider/ui/Handler/Handler.d.ts +9 -0
  421. package/types/components/Slider/ui/Handler/Handler.d.ts.map +1 -0
  422. package/types/components/Slider/ui/Handler/Handler.styles.d.ts +4 -0
  423. package/types/components/Slider/ui/Handler/Handler.styles.d.ts.map +1 -0
  424. package/types/components/Slider/ui/Handler/Handler.types.d.ts +24 -0
  425. package/types/components/Slider/ui/Handler/Handler.types.d.ts.map +1 -0
  426. package/types/components/Slider/ui/Thumb/Thumb.d.ts +4 -0
  427. package/types/components/Slider/ui/Thumb/Thumb.d.ts.map +1 -0
  428. package/types/components/Slider/ui/Thumb/Thumb.styles.d.ts +5 -0
  429. package/types/components/Slider/ui/Thumb/Thumb.styles.d.ts.map +1 -0
  430. package/types/components/Slider/ui/Thumb/Thumb.types.d.ts +12 -0
  431. package/types/components/Slider/ui/Thumb/Thumb.types.d.ts.map +1 -0
  432. package/types/components/Slider/ui/index.d.ts +6 -0
  433. package/types/components/Slider/ui/index.d.ts.map +1 -0
  434. package/types/components/Slider/utils/index.d.ts +33 -0
  435. package/types/components/Slider/utils/index.d.ts.map +1 -0
  436. package/types/components/Slider/variations/_disabled/base.d.ts +2 -0
  437. package/types/components/Slider/variations/_disabled/base.d.ts.map +1 -0
  438. package/types/components/Slider/variations/_size/base.d.ts +2 -0
  439. package/types/components/Slider/variations/_size/base.d.ts.map +1 -0
  440. package/types/components/Slider/variations/_view/base.d.ts +2 -0
  441. package/types/components/Slider/variations/_view/base.d.ts.map +1 -0
  442. package/types/components/TextField/TextField.d.ts.map +1 -1
  443. package/types/components/Toast/Toast.styles.d.ts +1 -43
  444. package/types/components/Toast/Toast.styles.d.ts.map +1 -1
  445. package/types/components/Toast/utils.d.ts +1 -43
  446. package/types/components/Toast/utils.d.ts.map +1 -1
  447. package/types/engines/common.d.ts +3 -3
  448. package/types/engines/common.d.ts.map +1 -1
  449. package/types/engines/index.d.ts +1 -1
  450. package/types/engines/index.d.ts.map +1 -1
  451. package/types/engines/types.d.ts +4 -0
  452. package/types/engines/types.d.ts.map +1 -1
  453. package/types/examples/plasma_b2c/components/Button/Button.config.d.ts.map +1 -1
  454. package/types/examples/plasma_b2c/components/Button/Button.d.ts +1 -43
  455. package/types/examples/plasma_b2c/components/Button/Button.d.ts.map +1 -1
  456. package/types/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
  457. package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts +1 -43
  458. package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts.map +1 -1
  459. package/types/examples/plasma_b2c/components/Slider/Slider.config.d.ts +22 -0
  460. package/types/examples/plasma_b2c/components/Slider/Slider.config.d.ts.map +1 -0
  461. package/types/examples/plasma_b2c/components/Slider/Slider.d.ts +21 -0
  462. package/types/examples/plasma_b2c/components/Slider/Slider.d.ts.map +1 -0
  463. package/types/examples/plasma_web/components/Button/Button.config.d.ts.map +1 -1
  464. package/types/examples/plasma_web/components/Button/Button.d.ts +1 -43
  465. package/types/examples/plasma_web/components/Button/Button.d.ts.map +1 -1
  466. package/types/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
  467. package/types/examples/plasma_web/components/IconButton/IconButton.d.ts +1 -43
  468. package/types/examples/plasma_web/components/IconButton/IconButton.d.ts.map +1 -1
  469. package/types/examples/plasma_web/components/Slider/Slider.config.d.ts +22 -0
  470. package/types/examples/plasma_web/components/Slider/Slider.config.d.ts.map +1 -0
  471. package/types/examples/plasma_web/components/Slider/Slider.d.ts +21 -0
  472. package/types/examples/plasma_web/components/Slider/Slider.d.ts.map +1 -0
  473. package/types/examples/sds_engineer/components/Button/Button.config.d.ts.map +1 -1
  474. package/types/examples/sds_engineer/components/Button/Button.d.ts +1 -43
  475. package/types/examples/sds_engineer/components/Button/Button.d.ts.map +1 -1
  476. package/types/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
  477. package/types/hooks/index.d.ts +1 -0
  478. package/types/hooks/index.d.ts.map +1 -1
  479. package/types/hooks/useIsomorphicLayoutEffect.d.ts +6 -0
  480. package/types/hooks/useIsomorphicLayoutEffect.d.ts.map +1 -0
  481. package/types/index.d.ts +1 -0
  482. package/types/index.d.ts.map +1 -1
  483. package/types/utils/canUseDOM.d.ts +6 -0
  484. package/types/utils/canUseDOM.d.ts.map +1 -0
  485. package/types/utils/index.d.ts +1 -0
  486. package/types/utils/index.d.ts.map +1 -1
  487. package/cjs/components/Button/Button.styles_nedem1.css +0 -8
  488. package/cjs/components/ButtonGroup/variations/_view/base_1n9gznw.css +0 -1
  489. package/es/components/Button/Button.styles_nedem1.css +0 -8
  490. package/es/components/ButtonGroup/variations/_view/base_1n9gznw.css +0 -1
@@ -11,7 +11,7 @@ import { PropsTable, Description } from '@site/src/components';
11
11
 
12
12
  ## Примеры
13
13
 
14
- ### Размер бейджа
14
+ ### Размер badge
15
15
  Размер задается с помощью свойства `size`.
16
16
 
17
17
  Возможные значения свойства: `"l"`, `"m"`, `"s"`.
@@ -31,7 +31,7 @@ export function App() {
31
31
  }
32
32
  ```
33
33
 
34
- ### Скругленность бейджа
34
+ ### Скругленность badge
35
35
  Скругленность задается с помощью свойства `pilled`:
36
36
 
37
37
  ```tsx live
@@ -49,16 +49,16 @@ export function App() {
49
49
  }
50
50
  ```
51
51
 
52
- ### Вид бейджа
53
- Вид бейджа задается с помощью свойства `view`. Возможные значения свойства `view`:
52
+ ### Вид badge
53
+ Вид `badge` задается с помощью свойства `view`. Возможные значения свойства `view`:
54
54
 
55
- + `"primary"` – основной бейдж;
55
+ + `"primary"` – основной badge;
56
56
  + `"accent"` – бейдж акцентного цвета;
57
57
  + `"positive"` – успешное завершение;
58
58
  + `"warning"` – предупреждение;
59
59
  + `"negative"` – ошибка;
60
- + `"dark"` – темный бэйдж;
61
- + `"light"` – светлый бэйдж.
60
+ + `"dark"` – темный badge;
61
+ + `"light"` – светлый badge.
62
62
 
63
63
  ```tsx live
64
64
  import React from 'react';
@@ -79,7 +79,7 @@ export function App() {
79
79
  }
80
80
  ```
81
81
 
82
- так же на вид бейджа влияет свойство `transparent`:
82
+ Так же на вид badge влияет свойство `transparent`:
83
83
 
84
84
  ```tsx live
85
85
  import React from 'react';
@@ -101,7 +101,7 @@ export function App() {
101
101
  ```
102
102
 
103
103
  ### Иконка слева / справа
104
- В левой и/или правой части бейджа можно отобразить иконку:
104
+ В левой и/или правой части badge можно отобразить иконку:
105
105
 
106
106
  ```tsx live
107
107
  import React from 'react';
@@ -17,7 +17,7 @@ var _base6 = /*#__PURE__*/require("./variations/_blurred/base");
17
17
  var _Button = /*#__PURE__*/require("./Button.styles");
18
18
  var _Button2 = /*#__PURE__*/require("./Button.tokens");
19
19
  var _StyledSpinner;
20
- var _excluded = ["children", "view", "size", "text", "value", "contentLeft", "contentRight", "contentPlacing", "isLoading", "loader", "stretch", "square", "pin", "disabled", "focused", "outlined", "className", "blur", "style", "stretching"];
20
+ var _excluded = ["children", "view", "size", "text", "contentLeft", "contentRight", "isLoading", "loader", "stretch", "square", "pin", "disabled", "focused", "outlined", "className", "blur", "style", "stretching"];
21
21
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
22
22
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
23
23
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -34,11 +34,8 @@ var buttonRoot = exports.buttonRoot = function buttonRoot(Root) {
34
34
  view = props.view,
35
35
  size = props.size,
36
36
  text = props.text,
37
- value = props.value,
38
37
  contentLeft = props.contentLeft,
39
38
  contentRight = props.contentRight,
40
- _props$contentPlacing = props.contentPlacing,
41
- contentPlacing = _props$contentPlacing === void 0 ? 'default' : _props$contentPlacing,
42
39
  isLoading = props.isLoading,
43
40
  loader = props.loader,
44
41
  stretch = props.stretch,
@@ -55,34 +52,23 @@ var buttonRoot = exports.buttonRoot = function buttonRoot(Root) {
55
52
  rest = _objectWithoutProperties(props, _excluded);
56
53
  var txt = typeof children === 'string' ? children : text;
57
54
  var stretchingClass = stretch ? _Button2.classes.filledStretching : _Button2.classes["".concat(stretching, "Stretching")];
58
- var contentRelaxedClass = contentPlacing === 'relaxed' ? _Button2.classes.contentRelaxed : undefined;
59
55
  var squareClass = square ? _Button2.classes.buttonSquare : undefined;
60
56
  var buttonBorderRadius = pin ? (0, _roundness.convertRoundnessMatrix)(pin, "var(".concat(_Button2.tokens.buttonRadius, ")"), "var(".concat(_Button2.tokens.buttonHeight, ")")) : "var(".concat(_Button2.tokens.buttonRadius, ", calc(var(").concat(_Button2.tokens.buttonHeight, ") / 4))");
61
- var contentPlacingMapper = {
62
- "default": 'center',
63
- relaxed: 'space-between'
64
- };
65
- var contentPlacementValue = contentPlacing ? contentPlacingMapper[contentPlacing] : 'center';
66
57
  return /*#__PURE__*/_react["default"].createElement(Root, _extends({
67
58
  type: "button",
68
59
  ref: ref,
69
60
  view: view,
70
61
  size: size,
71
- value: value,
72
62
  disabled: disabled,
73
63
  focused: focused || outlined,
74
- contentPlacing: contentPlacing,
75
64
  className: (0, _utils.cx)(squareClass, stretchingClass, _Button2.classes.buttonItem, className),
76
65
  style: _objectSpread(_objectSpread({}, style), {}, {
77
66
  '--plasma_computed-btn-br': buttonBorderRadius,
78
67
  '--plasma_private-blur': blur
79
68
  })
80
69
  }, rest), /*#__PURE__*/_react["default"].createElement(_Button.LoadWrap, {
81
- contentPlacing: contentPlacementValue,
82
70
  isLoading: isLoading
83
- }, contentLeft && /*#__PURE__*/_react["default"].createElement(_Button.StyledContentLeft, null, contentLeft), txt ? /*#__PURE__*/_react["default"].createElement(_Button.ButtonText, {
84
- className: contentRelaxedClass
85
- }, txt) : children, value && /*#__PURE__*/_react["default"].createElement(_Button.ButtonValue, null, value), contentRight && /*#__PURE__*/_react["default"].createElement(_Button.StyledContentRight, null, contentRight)), isLoading && /*#__PURE__*/_react["default"].createElement(_Button.Loader, null, loader || _StyledSpinner || (_StyledSpinner = /*#__PURE__*/_react["default"].createElement(_Button.StyledSpinner, null))));
71
+ }, contentLeft, txt ? /*#__PURE__*/_react["default"].createElement(_Button.ButtonText, null, txt) : children, contentRight), isLoading && /*#__PURE__*/_react["default"].createElement(_Button.Loader, null, loader || _StyledSpinner || (_StyledSpinner = /*#__PURE__*/_react["default"].createElement(_Button.StyledSpinner, null))));
86
72
  });
87
73
  };
88
74
  var buttonConfig = exports.buttonConfig = {
@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.baseContent = exports.base = exports.StyledSpinner = exports.StyledContentRight = exports.StyledContentLeft = exports.Loader = exports.LoadWrap = exports.ButtonValue = exports.ButtonText = void 0;
7
+ exports.baseContent = exports.base = exports.StyledSpinner = exports.Loader = exports.LoadWrap = exports.ButtonText = void 0;
8
8
  var _styledComponents = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("styled-components"));
9
9
  var _mixins = /*#__PURE__*/require("../../mixins");
10
10
  var _engines = /*#__PURE__*/require("../../engines");
@@ -17,36 +17,28 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
17
17
  // issue #823
18
18
  var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Spinner.spinnerConfig);
19
19
  var Spinner = /*#__PURE__*/(0, _engines.component)(mergedConfig);
20
+ var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n position: relative;\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n justify-content: center;\n\n appearance: none;\n border: none;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n a& {\n text-decoration: none;\n }\n\n /* NOTE: \n --plasma_computed-btn-br-radius is defined in Button.tsx\n */\n --plasma_private-btn-br: var(--plasma_computed-btn-br);\n border-radius: var(--plasma_private-btn-br);\n\n &&.", " {\n width: var(", ");\n padding: 0;\n }\n"])), /*#__PURE__*/String(_Button.classes.buttonSquare), _Button.tokens.buttonHeight);
21
+
22
+ // TODO: PLASMA-2164
23
+ // WHY do we need applyEllipsis ??
24
+ // Если внутри кнопки тескт и на нее решили повесить square пропс
20
25
  var ButtonText = exports.ButtonText = /*#__PURE__*/_styledComponents["default"].span.withConfig({
21
26
  componentId: "plasma-new-hope__sc-9d9bqj-0"
22
- })(["min-width:4ch;flex-shrink:2;", " &.", "{text-align:start;flex-grow:2;}"], /*#__PURE__*/(0, _mixins.applyEllipsis)(), /*#__PURE__*/String(_Button.classes.contentRelaxed));
23
- var ButtonValue = exports.ButtonValue = /*#__PURE__*/_styledComponents["default"].span.withConfig({
24
- componentId: "plasma-new-hope__sc-9d9bqj-1"
25
- })(["color:var(", ");margin:var(", ");min-width:4ch;", ""], _Button.tokens.buttonValueColor, _Button.tokens.buttonValueMargin, /*#__PURE__*/(0, _mixins.applyEllipsis)());
27
+ })([":not(:last-child){margin-right:0.375rem;}:not(:first-child){margin-left:0.375rem;}", ""], /*#__PURE__*/(0, _mixins.applyEllipsis)());
26
28
 
27
29
  // TODO: #720
28
30
  var LoadWrap = exports.LoadWrap = /*#__PURE__*/_styledComponents["default"].div.withConfig({
29
- componentId: "plasma-new-hope__sc-9d9bqj-2"
30
- })(["opacity:", ";display:flex;align-items:inherit;justify-content:", ";height:100%;width:100%;"], function (_ref) {
31
+ componentId: "plasma-new-hope__sc-9d9bqj-1"
32
+ })(["opacity:", ";display:flex;width:100%;align-items:inherit;justify-content:inherit;height:100%;"], function (_ref) {
31
33
  var isLoading = _ref.isLoading;
32
34
  return isLoading ? '0' : '1';
33
- }, function (_ref2) {
34
- var contentPlacing = _ref2.contentPlacing;
35
- return contentPlacing;
36
35
  });
37
36
  var Loader = exports.Loader = /*#__PURE__*/_styledComponents["default"].div.withConfig({
38
- componentId: "plasma-new-hope__sc-9d9bqj-3"
37
+ componentId: "plasma-new-hope__sc-9d9bqj-2"
39
38
  })(["position:absolute;"]);
40
39
  var StyledSpinner = exports.StyledSpinner = /*#__PURE__*/(0, _styledComponents["default"])(Spinner).withConfig({
41
- componentId: "plasma-new-hope__sc-9d9bqj-4"
40
+ componentId: "plasma-new-hope__sc-9d9bqj-3"
42
41
  })(["", ":var(", ");", ":var(", ");"], _Spinner.spinnerTokens.size, _Button.tokens.buttonSpinnerSize, _Spinner.spinnerTokens.color, _Button.tokens.buttonSpinnerColor);
43
- var StyledContentLeft = exports.StyledContentLeft = /*#__PURE__*/_styledComponents["default"].div.withConfig({
44
- componentId: "plasma-new-hope__sc-9d9bqj-5"
45
- })(["margin:var(", ");"], _Button.tokens.buttonLeftContentMargin);
46
- var StyledContentRight = exports.StyledContentRight = /*#__PURE__*/_styledComponents["default"].div.withConfig({
47
- componentId: "plasma-new-hope__sc-9d9bqj-6"
48
- })(["margin:var(", ");"], _Button.tokens.buttonRightContentMargin);
49
- var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n position: relative;\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n justify-content: center;\n\n appearance: none;\n border: none;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n a& {\n text-decoration: none;\n }\n\n /* NOTE: \n --plasma_computed-btn-br-radius is defined in Button.tsx\n */\n --plasma_private-btn-br: var(--plasma_computed-btn-br);\n border-radius: var(--plasma_private-btn-br);\n\n &&.", " {\n width: var(", ");\n padding: 0;\n }\n"])), /*#__PURE__*/String(_Button.classes.buttonSquare), _Button.tokens.buttonHeight);
50
42
 
51
43
  // INFO: Для возможности переиспользования стилей в других компонентах
52
44
  var baseContent = exports.baseContent = /*#__PURE__*/"\n position: relative;\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n justify-content: center;\n\n appearance: none;\n border: none;\n cursor: pointer;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n\n a& {\n text-decoration: none;\n }\n\n /* NOTE: \n --plasma_computed-btn-br-radius is defined in Button.tsx\n */\n --plasma_private-btn-br: var(--plasma_computed-btn-br);\n border-radius: var(--plasma_private-btn-br);\n\n &&.".concat(String(_Button.classes.buttonSquare), " {\n width: var(").concat(_Button.tokens.buttonHeight, ");\n padding: 0;\n }\n\n color: var(").concat(_Button.tokens.buttonColor, ");\n background-color: var(").concat(_Button.tokens.buttonBackgroundColor, ");\n\n :hover {\n color: var(").concat(_Button.tokens.buttonColorHover, ", var(").concat(_Button.tokens.buttonColor, "));\n background-color: var(").concat(_Button.tokens.buttonBackgroundColorHover, ", var(").concat(_Button.tokens.buttonBackgroundColor, "));\n\n scale: var(").concat(_Button.tokens.buttonScaleHover, ");\n }\n\n :active {\n color: var(").concat(_Button.tokens.buttonColorActive, ", var(").concat(_Button.tokens.buttonColor, "));\n background-color: var(").concat(_Button.tokens.buttonBackgroundColorActive, ", var(").concat(_Button.tokens.buttonBackgroundColor, "));\n\n scale: var(").concat(_Button.tokens.buttonScaleActive, ");\n }\n\n height: var(").concat(_Button.tokens.buttonHeight, ");\n width: var(").concat(_Button.tokens.buttonWidth, ");\n\n /* TODO: #714 move these calc's to plasma-mapping | ds-generator and add Math.round() */\n padding: 0 var(").concat(_Button.tokens.buttonPadding, ", calc(var(").concat(_Button.tokens.buttonHeight, ") * 1.618 / 4));\n\n font-family: var(").concat(_Button.tokens.buttonFontFamily, ");\n font-size: var(").concat(_Button.tokens.buttonFontSize, ");\n font-style: var(").concat(_Button.tokens.buttonFontStyle, ");\n font-weight: var(").concat(_Button.tokens.buttonFontWeight, ");\n letter-spacing: var(").concat(_Button.tokens.buttonLetterSpacing, ");\n line-height: var(").concat(_Button.tokens.buttonLineHeight, ");\n\n /* TODO: #710 make it token API ? */\n --plasma_private-btn-outline-size: var(--plasma-button-outline-size, 0.0625rem);\n\n :focus {\n outline: none;\n }\n\n ").concat((0, _mixins.addFocus)({
@@ -54,4 +46,4 @@ var baseContent = exports.baseContent = /*#__PURE__*/"\n position: relative;\
54
46
  outlineSize: 'var(--plasma_private-btn-outline-size)',
55
47
  outlineRadius: 'calc(0.125rem + var(--plasma_private-btn-br))',
56
48
  outlineColor: "var(".concat(_Button.tokens.buttonFocusColor, ")")
57
- }), "\n\n &[disabled] {\n opacity: var(").concat(_Button.tokens.buttonDisabledOpacity, ");\n cursor: not-allowed;\n\n :hover,\n :active {\n scale: none;\n\n color: var(").concat(_Button.tokens.buttonColor, ");\n background-color: var(").concat(_Button.tokens.buttonBackgroundColor, ");\n }\n }\n\n &.").concat(_Button.classes.fixedStretching, " {\n width: var(").concat(_Button.tokens.buttonWidth, ");\n }\n &.").concat(_Button.classes.filledStretching, " {\n width: 100%;\n }\n &.").concat(_Button.classes.autoStretching, " {\n width: fit-content;\n }\n");
49
+ }), "\n\n &[disabled] {\n opacity: var(").concat(_Button.tokens.buttonDisabledOpacity, ");\n cursor: not-allowed;\n\n :hover,\n :active {\n scale: none;\n\n color: var(").concat(_Button.tokens.buttonColor, ");\n background-color: var(").concat(_Button.tokens.buttonBackgroundColor, ");\n }\n }\n\n &.").concat(_Button.classes.fixedStretching, " {\n width: var(").concat(_Button.tokens.buttonWidth, ");\n }\n &.").concat(_Button.classes.filledStretching, " {\n width: 100%;\n }\n &.").concat(_Button.classes.autoStretching, " {\n width: auto;\n }\n");
@@ -21,7 +21,7 @@ import { PropsTable, Description } from '@site/src/components';
21
21
 
22
22
  ```tsx live
23
23
  import React from 'react';
24
- import { Button } from '@salutejs/{{package}}';
24
+ import { Button } from '@salutejs/{{ package }}';
25
25
  import { IconDownload } from '@salutejs/plasma-icons';
26
26
 
27
27
  export function App() {
@@ -55,7 +55,7 @@ export function App() {
55
55
 
56
56
  ```tsx live
57
57
  import React from 'react';
58
- import { Button } from '@salutejs/{{package}}';
58
+ import { Button } from '@salutejs/{{ package }}';
59
59
 
60
60
  export function App() {
61
61
  return (
@@ -68,48 +68,6 @@ export function App() {
68
68
  }
69
69
  ```
70
70
 
71
- ### Ширина кнопки
72
- Ширина кнопки регулируется с помощью свойства `stretching`.
73
- Возможные значения свойства `contentPlacing`:
74
- + `auto` – ширина подстраивается под контент;
75
- + `filled` – кнопка растягивается на всю доступную ширину;
76
- + `fixed` – кнопка фиксированной ширины.
77
-
78
- ```tsx live
79
- import React from 'react';
80
- import { Button } from '@salutejs/{{package}}';
81
-
82
- export function App() {
83
- return (
84
- <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
85
- <Button text="Button" stretching="fixed" />
86
- <Button text="Button" stretching="auto" />
87
- <Button text="Button" stretching="filled" />
88
- </div>
89
- );
90
- }
91
- ```
92
-
93
- ### Позиционирование контента внутри
94
- Позиционирование контента внутри кнопки регулируется с помощью свойства `contentPlacing`.
95
- Возможные значения свойства `contentPlacing`:
96
- + `default` – контент центрируется;
97
- + `relaxed` – контент распологается по краям.
98
-
99
- ```tsx live
100
- import React from 'react';
101
- import { Button } from '@salutejs/{{package}}';
102
-
103
- export function App() {
104
- return (
105
- <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
106
- <Button text="Hello" value="Plasma" stretching="filled" contentPlacing="default" />
107
- <Button text="Hello" value="Plasma" stretching="filled" contentPlacing="relaxed" />
108
- </div>
109
- );
110
- }
111
- ```
112
-
113
71
  ### Вид кнопки
114
72
  Вид кнопки задается с помощью свойства `view`. Возможные значения свойства `view`:
115
73
  + `"primary"` – основная;
@@ -122,7 +80,7 @@ export function App() {
122
80
 
123
81
  ```tsx live
124
82
  import React from 'react';
125
- import { Button } from '@salutejs/{{package}}';
83
+ import { Button } from '@salutejs/{{ package }}';
126
84
 
127
85
  export function App() {
128
86
  return (
@@ -148,7 +106,7 @@ export function App() {
148
106
 
149
107
  ```tsx live
150
108
  import React from 'react';
151
- import { Button } from '@salutejs/{{package}}';
109
+ import { Button } from '@salutejs/{{ package }}';
152
110
 
153
111
  export function App() {
154
112
  return (
@@ -174,15 +132,15 @@ export function App() {
174
132
 
175
133
  ```tsx live
176
134
  import React from 'react';
177
- import { Button } from '@salutejs/{{package}}';
135
+ import { Button } from '@salutejs/{{ package }}';
178
136
  import { IconDownload } from '@salutejs/plasma-icons';
179
137
 
180
138
  export function App() {
181
139
  return (
182
140
  <div>
183
- <Button contentLeft={<IconDownload />} />
141
+ <Button contentLeft={<IconDownload color="inherit" />} />
184
142
 
185
- <Button contentLeft={<IconDownload />} pin="circle-circle" />
143
+ <Button contentLeft={<IconDownload color="inherit" />} pin="circle-circle" />
186
144
  </div>
187
145
  );
188
146
  }
@@ -193,8 +151,7 @@ export function App() {
193
151
 
194
152
  ```tsx live
195
153
  import React from 'react';
196
- import { Button } from '@salutejs/{{package}}';
197
- import { IconDownload } from '@salutejs/plasma-icons';
154
+ import { Button } from '@salutejs/{{ package }}';
198
155
 
199
156
  export function App() {
200
157
  return (
@@ -9,13 +9,11 @@ var classes = exports.classes = {
9
9
  autoStretching: 'button-stretching-auto',
10
10
  filledStretching: 'button-stretching-filled',
11
11
  fixedStretching: 'button-stretching-fixed',
12
- contentRelaxed: 'button-content-relaxed',
13
12
  buttonSquare: 'button-square',
14
13
  buttonItem: 'button-item'
15
14
  };
16
15
  var tokens = exports.tokens = {
17
16
  buttonColor: '--plasma-button-color',
18
- buttonValueColor: '--plasma-button-value-color',
19
17
  buttonBackgroundColor: '--plasma-button-background-color',
20
18
  buttonColorHover: '--plasma-button-color-hover',
21
19
  buttonBackgroundColorHover: '--plasma-button-background-color-hover',
@@ -34,9 +32,6 @@ var tokens = exports.tokens = {
34
32
  buttonFontWeight: '--plasma-button-font-weight',
35
33
  buttonLetterSpacing: '--plasma-button-letter-spacing',
36
34
  buttonLineHeight: '--plasma-button-line-height',
37
- buttonLeftContentMargin: '--plasma-button-left-content-margin',
38
- buttonRightContentMargin: '--plasma-button-right-content-margin',
39
- buttonValueMargin: '--plasma-button-value-margin',
40
35
  buttonDisabledOpacity: '--plasma-button-disabled-opacity',
41
36
  buttonFocusColor: '--plasma-button-focus-color',
42
37
  buttonSpinnerColor: '--plasma-button-spinner-color',
@@ -6,4 +6,4 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.base = void 0;
7
7
  var _styledComponents = /*#__PURE__*/require("styled-components");
8
8
  var _Button = /*#__PURE__*/require("../../Button.tokens");
9
- var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", "{width:var(", ");}&.", "{width:100%;}&.", "{width:fit-content;}"], _Button.classes.fixedStretching, _Button.tokens.buttonWidth, _Button.classes.filledStretching, _Button.classes.autoStretching);
9
+ var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", "{width:var(", ");}&.", "{width:100%;}&.", "{width:auto;}"], _Button.classes.fixedStretching, _Button.tokens.buttonWidth, _Button.classes.filledStretching, _Button.classes.autoStretching);
@@ -20,7 +20,6 @@ var classes = exports.classes = {
20
20
  var tokens = exports.tokens = {
21
21
  buttonGroupOrientation: '--plasma-button-group-orientation',
22
22
  buttonColor: '--plasma-button-group-item-color',
23
- buttonValueColor: '--plasma-button-group-item-value-color',
24
23
  buttonBackgroundColor: '--plasma-button-group-item-background-color',
25
24
  buttonColorHover: '--plasma-button-group-item-color-hover',
26
25
  buttonBackgroundColorHover: '--plasma-button-group-item-background-color-hover',
@@ -6,5 +6,4 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.base = void 0;
7
7
  var _styledComponents = /*#__PURE__*/require("styled-components");
8
8
  var _ButtonGroup = /*#__PURE__*/require("../../ButtonGroup.tokens");
9
- var _Button = /*#__PURE__*/require("../../../Button");
10
- var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["flex-direction:var(", ");&.", " .", "{width:auto;}"], _ButtonGroup.tokens.buttonGroupOrientation, _ButtonGroup.classes.vertical, _Button.buttonClasses.buttonItem);
9
+ var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["flex-direction:var(", ");"], _ButtonGroup.tokens.buttonGroupOrientation);
@@ -7,4 +7,4 @@ exports.base = void 0;
7
7
  var _styledComponents = /*#__PURE__*/require("styled-components");
8
8
  var _ButtonGroup = /*#__PURE__*/require("../../ButtonGroup.tokens");
9
9
  var _Button = /*#__PURE__*/require("../../../Button");
10
- var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", " .", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}"], _ButtonGroup.classes.buttonGroupOverrideStyles, _Button.buttonClasses.buttonItem, _Button.buttonTokens.buttonColor, _ButtonGroup.tokens.buttonColor, _Button.buttonTokens.buttonValueColor, _ButtonGroup.tokens.buttonValueColor, _Button.buttonTokens.buttonBackgroundColor, _ButtonGroup.tokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _ButtonGroup.tokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _ButtonGroup.tokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _ButtonGroup.tokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive, _ButtonGroup.tokens.buttonBackgroundColorActive);
10
+ var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", " .", "{", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");}"], _ButtonGroup.classes.buttonGroupOverrideStyles, _Button.buttonClasses.buttonItem, _Button.buttonTokens.buttonColor, _ButtonGroup.tokens.buttonColor, _Button.buttonTokens.buttonBackgroundColor, _ButtonGroup.tokens.buttonBackgroundColor, _Button.buttonTokens.buttonColorHover, _ButtonGroup.tokens.buttonColorHover, _Button.buttonTokens.buttonBackgroundColorHover, _ButtonGroup.tokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonColorActive, _ButtonGroup.tokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColorActive, _ButtonGroup.tokens.buttonBackgroundColorActive);
@@ -0,0 +1,68 @@
1
+ ---
2
+ id: cell
3
+ title: Cell
4
+ ---
5
+
6
+ import { PropsTable, Description } from '@site/src/components';
7
+
8
+ # Cell
9
+ <PropsTable name="Cell" />
10
+ <Description name="Cell" />
11
+
12
+ Компонент ячейки представляет собой стилизованные слоты для контента.
13
+
14
+ Также имеются вспомогательные компоненты (Textbox, TextTitle, TextSubtitle, TextLabel).
15
+
16
+ Они представляют собой стилизованный текст и слот для них.
17
+
18
+ ## Примеры
19
+
20
+ ### Базовое использование
21
+
22
+ ```tsx live
23
+ import React from 'react';
24
+ import { Avatar, Cell } from '@salutejs/{{ package }}';
25
+ import { IconChevronRight } from '@salutejs/plasma-icons';
26
+
27
+ export function App() {
28
+ return (
29
+ <>
30
+ <Cell
31
+ contentLeft={ <Avatar size="m" url="https://avatars.githubusercontent.com/u/1813468?v=4" /> }
32
+ size="m"
33
+ contentRight={<IconChevronRight color="inheart" size="xs" />}
34
+ title="Title"
35
+ subtitle="Subtitle"
36
+ label="Label"
37
+ />
38
+ </>
39
+ );
40
+ }
41
+ ```
42
+
43
+ ### С использованием своих стилей или встроенных компонентов
44
+
45
+ ```tsx live
46
+ import React from 'react';
47
+ import { Avatar, Cell , CellTextboxLabel , CellTextboxTitle , CellTextboxSubtitle, CellTextbox } from '@salutejs/{{ package }}';
48
+ import { IconChevronRight } from '@salutejs/plasma-icons';
49
+
50
+ export function App() {
51
+ return (
52
+ <>
53
+ <Cell
54
+ contentLeft={ <Avatar size="m" url="https://avatars.githubusercontent.com/u/1813468?v=4" /> }
55
+ size="m"
56
+ contentRight={<IconChevronRight color="inheart" size="xs" />}
57
+ >
58
+ <CellTextbox>
59
+ <CellTextboxLabel>Label</CellTextboxLabel>
60
+ <CellTextboxTitle>Title</CellTextboxTitle>
61
+ <CellTextboxSubtitle>Subtitle</CellTextboxSubtitle>
62
+ <div style=\{{'font-size': '12px', opacity: 0.4}}>Caption</div>
63
+ </CellTextbox>
64
+ </Cell>
65
+ </>
66
+ );
67
+ }
68
+ ```
@@ -14,7 +14,7 @@ import { PropsTable, Description } from '@site/src/components';
14
14
 
15
15
  ```tsx live
16
16
  import React from 'react';
17
- import { Checkbox } from '@salutejs/s{{package}}';
17
+ import { Checkbox } from '@salutejs/{{ package }}';
18
18
 
19
19
  export function App() {
20
20
  return (
@@ -31,7 +31,7 @@ export function App() {
31
31
 
32
32
  ```tsx live
33
33
  import React from 'react';
34
- import { Checkbox } from '@salutejs/s{{package}}';
34
+ import { Checkbox } from '@salutejs/{{ package }}';
35
35
 
36
36
  export function App() {
37
37
  return (
@@ -72,7 +72,7 @@ export function App() {
72
72
  Вид Chip задается с помощью свойства `view`. Возможные значения свойства `view`:
73
73
  + `"default"` – основная;
74
74
  + `"secondary"` – вторичная;
75
- + `"accent"` – акцентый.
75
+ + `"accent"` – акцентный;
76
76
 
77
77
  ```tsx live
78
78
  import React from 'react';
@@ -22,24 +22,24 @@ import { PropsTable, Description } from '@site/src/components';
22
22
  ## Клавиатурная навигация
23
23
 
24
24
  Данный компонент может полностью управляться с помощью клавиатуры, используя следующие клавиши:
25
- - `Tab` - переход на таргет (инпут)
25
+ - `Tab` - переход на target (input)
26
26
  - `Shift` + `tab` - выход с него (теряем фокус)
27
27
  - `Стрелка вверх` / `стрелка вниз` - открыть выпадающий список и переместиться на первый элемент
28
28
  - `Стрелка вверх` / `стрелка вниз` ходим по элементам с зацикливанием
29
- - `Enter` - выбираем элемент, закрываем выпадающий список и переходим фокусом снова на таргет (инпут)
30
- - Если мы ходим по селекту и нажимаем `Tab` - выпадающий список закрывается и теряем фокус
31
- - Если мы ходим по селекту и нажимаем `Escape` - выпадающий список закрывается и фокусом остаёмся на таргете
32
- - В мультиселекте то же самое кроме закрытия выпадающего списка при выборе элемента
29
+ - `Enter` - выбираем элемент, закрываем выпадающий список и переходим фокусом снова на target (input)
30
+ - Если мы ходим по select и нажимаем `Tab` - выпадающий список закрывается и теряем фокус
31
+ - Если мы ходим по select и нажимаем `Escape` - выпадающий список закрывается и фокусом остаёмся на target
32
+ - В multi-select то же самое кроме закрытия выпадающего списка при выборе элемента
33
33
  - Когда находимся на первом чипе, нажимаем `стрелку влево` / `стрелку вправо` - переходим по чипам
34
- - Когда оказываемся на последнем чипе и нажимаем `стрелку вправо` - переходим на таргет (инпут)
35
- - Когда находимся на таргете (инпуте) и нажимаем `Backspace` - удаляется последний чип
36
- - Когда находимся на таргете (инпуте) и нажимаем `стрелку влево` - переходим на последний чип
34
+ - Когда оказываемся на последнем чипе и нажимаем `стрелку вправо` - переходим на target (input)
35
+ - Когда находимся на target (input) и нажимаем `Backspace` - удаляется последний чип
36
+ - Когда находимся на target (input) и нажимаем `стрелку влево` - переходим на последний чип
37
37
  - Нажимаем `Backspace` - удаляем выбранный чип и переходим на предыдущий
38
- - Если удалили последний чип, то фокусируемся на таргете
38
+ - Если удалили последний чип, то фокусируемся на target
39
39
  - Если находимся в выборе элемента из выпадающего списка и нажимаем `стрелку влево` / `стрелку вправо` - попадаем на самый последний чип
40
40
  - Если находимся в режиме выбора элемента и нажимаем `стрелку вниз` / `стрелку вверх` находясь на последнем / первом элементе, то перескакиваем в начало / в конец
41
- - Если находимся в режиме выбора элемента и нажимаем любую клавишу **кроме** `стрелки вниз` / `вверх` / `влево` / `вправо` / `Escape` / `Tab` / `Enter`, то переходим на таргет (инпут) и вводим значения
42
- - Ввод значение в таргет (инпут) приводит к фильтрации элементов в выпадающем списке. Если значение не соответствует ни одному элементу, то отобразится сообщение "Элементы не найдены"
41
+ - Если находимся в режиме выбора элемента и нажимаем любую клавишу **кроме** `стрелки вниз` / `вверх` / `влево` / `вправо` / `Escape` / `Tab` / `Enter`, то переходим на target (input) и вводим значения
42
+ - Ввод значение в target (input) приводит к фильтрации элементов в выпадающем списке. Если значение не соответствует ни одному элементу, то отобразится сообщение "Элементы не найдены"
43
43
 
44
44
  ### Single
45
45
 
@@ -178,12 +178,12 @@ export function App() {
178
178
  ```
179
179
 
180
180
  ### Применение пользовательского фильтра
181
- `Combobox` поддерживает возможность создавать собственные правила для фильтрации списка элементов с помощью функции колбэка `filterFunction`,
182
- которая срабатывает на каждый элемент и если возвращает `true`, то элемент рендерится, иначе нет.
181
+ `Combobox` поддерживает возможность создавать собственные правила для фильтрации списка элементов с помощью функции callback `filterFunction`,
182
+ которая срабатывает на каждый элемент и если возвращает `true`, то элемент rendering, иначе нет.
183
183
 
184
184
  ```tsx live
185
185
  import React from 'react';
186
- import { Combobox } from '@salutejs/{{ package }}';
186
+ import { Combobox, ComboboxItem } from '@salutejs/{{ package }}';
187
187
 
188
188
  export function App() {
189
189
  const [value, setValue] = React.useState(['item_0']);
@@ -11,7 +11,7 @@ import { PropsTable, Description } from '@site/src/components';
11
11
 
12
12
  ## Примеры
13
13
 
14
- ### Максимальное значение числового бейджа
14
+ ### Максимальное значение числового badge
15
15
  Задается с помощью свойства `maxCount`.
16
16
 
17
17
  ```tsx live
@@ -28,7 +28,7 @@ export function App() {
28
28
  }
29
29
  ```
30
30
 
31
- ### Размер числового бейджа
31
+ ### Размер числового badge
32
32
  Размер задается с помощью свойства `size`. Возможные значения свойства: `"xs"` или `"xxs"`.
33
33
 
34
34
  ```tsx live
@@ -45,7 +45,7 @@ export function App() {
45
45
  }
46
46
  ```
47
47
 
48
- ### Вид числового бейджа
48
+ ### Вид числового badge
49
49
  Вид задается с помощью свойства `view`. Возможные значения свойства `view`:
50
50
 
51
51
  + `"primary"` – основной бейдж;
@@ -53,8 +53,8 @@ export function App() {
53
53
  + `"positive"` – успешное завершение;
54
54
  + `"warning"` – предупреждение;
55
55
  + `"negative"` – ошибка;
56
- + `"dark"` – темный бэйдж;
57
- + `"light"` – светлый бэйдж.
56
+ + `"dark"` – темный badge;
57
+ + `"light"` – светлый badge.
58
58
 
59
59
  ```tsx live
60
60
  import React from 'react';
@@ -0,0 +1,57 @@
1
+ ---
2
+ id: divider
3
+ title: Divider
4
+ ---
5
+
6
+ import { PropsTable, Description } from '@site/src/components';
7
+
8
+ ## Divider
9
+ <Description name="Divider" />
10
+ <PropsTable name="Divider" exclude={['css']} />
11
+
12
+ ## Использование
13
+ Компонент `Divider` используется для визуального разделения компонент.
14
+
15
+ ### Ориентация разделителя
16
+ Ориентация разделителя задается с помощью свойства orientation.
17
+
18
+ Возможные значения свойства orientation:
19
+ + "horizontal" – горизонтальная (по умолчанию);
20
+ + "vertical" – вертикальная;
21
+
22
+ ```tsx live
23
+ import React from 'react';
24
+ import { BodyS, Divider } from '@salutejs/{{ package }}';
25
+
26
+ export function App() {
27
+ const Demo = ({
28
+ orientation = 'horizontal',
29
+ length = '100%',
30
+ beforeText = 'Before',
31
+ afterText = 'After',
32
+ }) => {
33
+ const wrapperStyle = {
34
+ display: "inline-flex",
35
+ gap: "0.5rem",
36
+ alignItems: "center",
37
+ justifyContent: "center",
38
+ flexDirection: orientation === "horizontal" ? "column" : "row"
39
+ }
40
+
41
+ return (
42
+ <div style={wrapperStyle}>
43
+ <BodyS>{beforeText}</BodyS>
44
+ <Divider orientation={orientation} length={length} />
45
+ <BodyS>{afterText}</BodyS>
46
+ </div>
47
+ );
48
+ };
49
+
50
+ return (
51
+ <div style=\{{ display: "flex", gap: "2rem" }}>
52
+ <Demo />
53
+ <Demo orientation="vertical" />
54
+ </div>
55
+ );
56
+ }
57
+ ```
@@ -35,13 +35,13 @@ Drawer можно использовать как и на всем окне, т
35
35
  а также определить отступы от точки с помощью `offset`.
36
36
 
37
37
  У компонента Drawer есть 2 режима отображения:
38
- модальный - добавляет при этом подложку(`overlay`), а также блокирует скролл и фокус;
39
- немодальный - нет подложки, скролл и фокус не заблокированы.
38
+ - модальный - добавляет при этом подложку(`overlay`), а также блокирует scroll и фокус;
39
+ - немодальный - нет подложки, scroll и фокус не заблокированы.
40
40
 
41
41
  ```tsx live
42
42
  import React, { useRef } from 'react';
43
43
  import { IconDone } from '@salutejs/plasma-icons';
44
- import { surfaceSolidSecondary } from '@salutejs/{{ theme }}';
44
+ import { surfaceSolidSecondary } from '@salutejs/{{ vertical }}/tokens';
45
45
 
46
46
  import { SSRProvider, H3, Button, Drawer, DrawerHeader, DrawerContent, DrawerFooter, PopupProvider } from '@salutejs/{{ package }}';
47
47