@salutejs/plasma-new-hope 0.83.0-canary.1213.9175571113.0 → 0.83.0-dev.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (213) 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/Drawer/Drawer.css +6 -9
  22. package/cjs/components/Drawer/ui/DrawerContent/DrawerContent.css +6 -9
  23. package/cjs/components/Header/ui/HeaderArrow/HeaderArrow.css +6 -9
  24. package/cjs/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
  25. package/cjs/components/Header/ui/HeaderArrow/HeaderArrow.js.map +1 -1
  26. package/cjs/components/IconButton/IconButton.css +7 -10
  27. package/cjs/components/IconButton/IconButton.styles.js +1 -1
  28. package/cjs/components/IconButton/{IconButton.styles_7v8g0e.css → IconButton.styles_1hknr37.css} +1 -1
  29. package/cjs/components/Notification/Notification.css +6 -9
  30. package/cjs/components/Notification/NotificationsProvider.css +6 -9
  31. package/cjs/components/Pagination/Pagination.css +8 -11
  32. package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +6 -9
  33. package/cjs/components/Panel/ui/PanelHeader/PanelHeader.css +6 -9
  34. package/cjs/components/Select/Select.css +6 -9
  35. package/cjs/components/Select/ui/SelectTarget/SelectTarget.css +6 -9
  36. package/cjs/components/Toast/Toast.css +6 -9
  37. package/cjs/components/Toast/ToastController.css +6 -9
  38. package/cjs/index.css +9 -12
  39. package/es/components/Button/Button.css +6 -9
  40. package/es/components/Button/Button.js +3 -17
  41. package/es/components/Button/Button.js.map +1 -1
  42. package/es/components/Button/Button.styles.js +11 -29
  43. package/es/components/Button/Button.styles.js.map +1 -1
  44. package/es/components/Button/Button.styles_uqvh6u.css +5 -0
  45. package/es/components/Button/Button.tokens.js +0 -5
  46. package/es/components/Button/Button.tokens.js.map +1 -1
  47. package/es/components/Button/variations/_stretching/base.js +1 -1
  48. package/es/components/Button/variations/_stretching/base.js.map +1 -1
  49. package/{cjs/components/Button/variations/_stretching/base_hy8dc.css → es/components/Button/variations/_stretching/base_1lx0ute.css} +1 -1
  50. package/es/components/ButtonGroup/ButtonGroup.css +2 -2
  51. package/es/components/ButtonGroup/ButtonGroup.tokens.js +0 -1
  52. package/es/components/ButtonGroup/ButtonGroup.tokens.js.map +1 -1
  53. package/es/components/ButtonGroup/variations/_orientation/base.js +1 -1
  54. package/es/components/ButtonGroup/variations/_orientation/base.js.map +1 -1
  55. package/{cjs/components/ButtonGroup/variations/_orientation/base_y7z7cs.css → es/components/ButtonGroup/variations/_orientation/base_p85v51.css} +1 -1
  56. package/es/components/ButtonGroup/variations/_view/base.js +1 -1
  57. package/es/components/ButtonGroup/variations/_view/base.js.map +1 -1
  58. package/es/components/ButtonGroup/variations/_view/base_6k3uip.css +1 -0
  59. package/es/components/Drawer/Drawer.css +6 -9
  60. package/es/components/Drawer/ui/DrawerContent/DrawerContent.css +6 -9
  61. package/es/components/Header/ui/HeaderArrow/HeaderArrow.css +6 -9
  62. package/es/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
  63. package/es/components/Header/ui/HeaderArrow/HeaderArrow.js.map +1 -1
  64. package/es/components/IconButton/IconButton.css +7 -10
  65. package/es/components/IconButton/IconButton.styles.js +1 -1
  66. package/es/components/IconButton/{IconButton.styles_7v8g0e.css → IconButton.styles_1hknr37.css} +1 -1
  67. package/es/components/Notification/Notification.css +6 -9
  68. package/es/components/Notification/NotificationsProvider.css +6 -9
  69. package/es/components/Pagination/Pagination.css +8 -11
  70. package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +6 -9
  71. package/es/components/Panel/ui/PanelHeader/PanelHeader.css +6 -9
  72. package/es/components/Select/Select.css +6 -9
  73. package/es/components/Select/ui/SelectTarget/SelectTarget.css +6 -9
  74. package/es/components/Toast/Toast.css +6 -9
  75. package/es/components/Toast/ToastController.css +6 -9
  76. package/es/index.css +9 -12
  77. package/package.json +2 -2
  78. package/styled-components/cjs/components/Avatar/Avatar.template-doc.mdx +3 -1
  79. package/styled-components/cjs/components/Badge/Badge.template-doc.mdx +9 -9
  80. package/styled-components/cjs/components/Button/Button.js +2 -16
  81. package/styled-components/cjs/components/Button/Button.styles.js +12 -20
  82. package/styled-components/cjs/components/Button/Button.template-doc.mdx +8 -51
  83. package/styled-components/cjs/components/Button/Button.tokens.js +0 -5
  84. package/styled-components/cjs/components/Button/variations/_stretching/base.js +1 -1
  85. package/styled-components/cjs/components/ButtonGroup/ButtonGroup.tokens.js +0 -1
  86. package/styled-components/cjs/components/ButtonGroup/variations/_orientation/base.js +1 -2
  87. package/styled-components/cjs/components/ButtonGroup/variations/_view/base.js +1 -1
  88. package/styled-components/cjs/components/Cell/Cell.template-doc.mdx +68 -0
  89. package/styled-components/cjs/components/Checkbox/Checkbox.template-doc.mdx +2 -2
  90. package/styled-components/cjs/components/Chip/Chip.template-doc.mdx +1 -1
  91. package/styled-components/cjs/components/Combobox/Combobox.template-doc.mdx +14 -14
  92. package/styled-components/cjs/components/Counter/Counter.template-doc.mdx +5 -5
  93. package/styled-components/cjs/components/Divider/Divider.template-docs.mdx +57 -0
  94. package/styled-components/cjs/components/Drawer/Drawer.template-doc.mdx +3 -3
  95. package/styled-components/cjs/components/Dropdown/Dropdown.template-doc.mdx +262 -261
  96. package/styled-components/cjs/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
  97. package/styled-components/cjs/components/IconButton/IconButton.template-doc.mdx +156 -0
  98. package/styled-components/cjs/components/Image/Image.template-doc.mdx +1 -1
  99. package/styled-components/cjs/components/Link/Link.template-doc.mdx +4 -4
  100. package/styled-components/cjs/components/Modal/Modal.template-doc.mdx +85 -33
  101. package/styled-components/cjs/components/Notification/Notification.template-doc.mdx +1 -2
  102. package/styled-components/cjs/components/Pagination/Pagination.template-doc.mdx +130 -0
  103. package/styled-components/cjs/components/Popover/Popover.template-doc.mdx +3 -3
  104. package/styled-components/cjs/components/Popup/Popup.template-doc.mdx +70 -74
  105. package/styled-components/cjs/components/Progress/Progress.template-doc.mdx +33 -0
  106. package/styled-components/cjs/components/Radiobox/Radiobox.template-doc.mdx +2 -1
  107. package/styled-components/cjs/components/Segment/Segment.template-doc.mdx +2 -2
  108. package/styled-components/cjs/components/Skeleton/Skeleton.template-doc.mdx +4 -4
  109. package/styled-components/cjs/components/Tabs/Tabs.template-doc.mdx +1 -1
  110. package/styled-components/cjs/components/TextField/TextField.template-doc.mdx +2 -2
  111. package/styled-components/cjs/components/Toolbar/Toolbar.template-doc.mdx +120 -0
  112. package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.config.js +19 -19
  113. package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.stories.tsx +21 -67
  114. package/styled-components/cjs/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.js +10 -10
  115. package/styled-components/cjs/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  116. package/styled-components/cjs/examples/plasma_web/components/Button/Button.config.js +19 -19
  117. package/styled-components/cjs/examples/plasma_web/components/Button/Button.stories.tsx +28 -90
  118. package/styled-components/cjs/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.js +10 -10
  119. package/styled-components/cjs/examples/plasma_web/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  120. package/styled-components/cjs/examples/sds_engineer/components/Button/Button.config.js +19 -19
  121. package/styled-components/cjs/examples/sds_engineer/components/Button/Button.stories.tsx +28 -90
  122. package/styled-components/cjs/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.js +10 -10
  123. package/styled-components/cjs/examples/sds_engineer/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  124. package/styled-components/es/components/Avatar/Avatar.template-doc.mdx +3 -1
  125. package/styled-components/es/components/Badge/Badge.template-doc.mdx +9 -9
  126. package/styled-components/es/components/Button/Button.js +3 -17
  127. package/styled-components/es/components/Button/Button.styles.js +11 -19
  128. package/styled-components/es/components/Button/Button.template-doc.mdx +8 -51
  129. package/styled-components/es/components/Button/Button.tokens.js +0 -5
  130. package/styled-components/es/components/Button/variations/_stretching/base.js +1 -1
  131. package/styled-components/es/components/ButtonGroup/ButtonGroup.tokens.js +0 -1
  132. package/styled-components/es/components/ButtonGroup/variations/_orientation/base.js +2 -3
  133. package/styled-components/es/components/ButtonGroup/variations/_view/base.js +1 -1
  134. package/styled-components/es/components/Cell/Cell.template-doc.mdx +68 -0
  135. package/styled-components/es/components/Checkbox/Checkbox.template-doc.mdx +2 -2
  136. package/styled-components/es/components/Chip/Chip.template-doc.mdx +1 -1
  137. package/styled-components/es/components/Combobox/Combobox.template-doc.mdx +14 -14
  138. package/styled-components/es/components/Counter/Counter.template-doc.mdx +5 -5
  139. package/styled-components/es/components/Divider/Divider.template-docs.mdx +57 -0
  140. package/styled-components/es/components/Drawer/Drawer.template-doc.mdx +3 -3
  141. package/styled-components/es/components/Dropdown/Dropdown.template-doc.mdx +262 -261
  142. package/styled-components/es/components/Header/ui/HeaderArrow/HeaderArrow.js +2 -4
  143. package/styled-components/es/components/IconButton/IconButton.template-doc.mdx +156 -0
  144. package/styled-components/es/components/Image/Image.template-doc.mdx +1 -1
  145. package/styled-components/es/components/Link/Link.template-doc.mdx +4 -4
  146. package/styled-components/es/components/Modal/Modal.template-doc.mdx +85 -33
  147. package/styled-components/es/components/Notification/Notification.template-doc.mdx +1 -2
  148. package/styled-components/es/components/Pagination/Pagination.template-doc.mdx +130 -0
  149. package/styled-components/es/components/Popover/Popover.template-doc.mdx +3 -3
  150. package/styled-components/es/components/Popup/Popup.template-doc.mdx +70 -74
  151. package/styled-components/es/components/Progress/Progress.template-doc.mdx +33 -0
  152. package/styled-components/es/components/Radiobox/Radiobox.template-doc.mdx +2 -1
  153. package/styled-components/es/components/Segment/Segment.template-doc.mdx +2 -2
  154. package/styled-components/es/components/Skeleton/Skeleton.template-doc.mdx +4 -4
  155. package/styled-components/es/components/Tabs/Tabs.template-doc.mdx +1 -1
  156. package/styled-components/es/components/TextField/TextField.template-doc.mdx +2 -2
  157. package/styled-components/es/components/Toolbar/Toolbar.template-doc.mdx +120 -0
  158. package/styled-components/es/examples/plasma_b2c/components/Button/Button.config.js +19 -19
  159. package/styled-components/es/examples/plasma_b2c/components/Button/Button.stories.tsx +21 -67
  160. package/styled-components/es/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.js +10 -10
  161. package/styled-components/es/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  162. package/styled-components/es/examples/plasma_web/components/Button/Button.config.js +19 -19
  163. package/styled-components/es/examples/plasma_web/components/Button/Button.stories.tsx +28 -90
  164. package/styled-components/es/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.js +10 -10
  165. package/styled-components/es/examples/plasma_web/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  166. package/styled-components/es/examples/sds_engineer/components/Button/Button.config.js +19 -19
  167. package/styled-components/es/examples/sds_engineer/components/Button/Button.stories.tsx +28 -90
  168. package/styled-components/es/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.js +10 -10
  169. package/styled-components/es/examples/sds_engineer/components/ButtonGroup/ButtonGroup.stories.tsx +1 -1
  170. package/types/components/Button/Button.d.ts.map +1 -1
  171. package/types/components/Button/Button.styles.d.ts +1 -5
  172. package/types/components/Button/Button.styles.d.ts.map +1 -1
  173. package/types/components/Button/Button.tokens.d.ts +0 -5
  174. package/types/components/Button/Button.tokens.d.ts.map +1 -1
  175. package/types/components/Button/Button.types.d.ts +4 -16
  176. package/types/components/Button/Button.types.d.ts.map +1 -1
  177. package/types/components/ButtonGroup/ButtonGroup.tokens.d.ts +0 -1
  178. package/types/components/ButtonGroup/ButtonGroup.tokens.d.ts.map +1 -1
  179. package/types/components/ButtonGroup/variations/_orientation/base.d.ts.map +1 -1
  180. package/types/components/ButtonGroup/variations/_view/base.d.ts.map +1 -1
  181. package/types/components/Header/ui/HeaderArrow/HeaderArrow.d.ts.map +1 -1
  182. package/types/components/Notification/Notification.styles.d.ts +1 -43
  183. package/types/components/Notification/Notification.styles.d.ts.map +1 -1
  184. package/types/components/Pagination/Pagination.styles.d.ts +2 -86
  185. package/types/components/Pagination/Pagination.styles.d.ts.map +1 -1
  186. package/types/components/Panel/ui/PanelHeader/PanelHeader.styles.d.ts +1 -43
  187. package/types/components/Panel/ui/PanelHeader/PanelHeader.styles.d.ts.map +1 -1
  188. package/types/components/Select/ui/SelectTarget/SelectTarget.styles.d.ts +1 -43
  189. package/types/components/Select/ui/SelectTarget/SelectTarget.styles.d.ts.map +1 -1
  190. package/types/components/Toast/Toast.styles.d.ts +1 -43
  191. package/types/components/Toast/Toast.styles.d.ts.map +1 -1
  192. package/types/components/Toast/utils.d.ts +1 -43
  193. package/types/components/Toast/utils.d.ts.map +1 -1
  194. package/types/examples/plasma_b2c/components/Button/Button.config.d.ts.map +1 -1
  195. package/types/examples/plasma_b2c/components/Button/Button.d.ts +1 -43
  196. package/types/examples/plasma_b2c/components/Button/Button.d.ts.map +1 -1
  197. package/types/examples/plasma_b2c/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
  198. package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts +1 -43
  199. package/types/examples/plasma_b2c/components/IconButton/IconButton.d.ts.map +1 -1
  200. package/types/examples/plasma_web/components/Button/Button.config.d.ts.map +1 -1
  201. package/types/examples/plasma_web/components/Button/Button.d.ts +1 -43
  202. package/types/examples/plasma_web/components/Button/Button.d.ts.map +1 -1
  203. package/types/examples/plasma_web/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
  204. package/types/examples/plasma_web/components/IconButton/IconButton.d.ts +1 -43
  205. package/types/examples/plasma_web/components/IconButton/IconButton.d.ts.map +1 -1
  206. package/types/examples/sds_engineer/components/Button/Button.config.d.ts.map +1 -1
  207. package/types/examples/sds_engineer/components/Button/Button.d.ts +1 -43
  208. package/types/examples/sds_engineer/components/Button/Button.d.ts.map +1 -1
  209. package/types/examples/sds_engineer/components/ButtonGroup/ButtonGroup.config.d.ts.map +1 -1
  210. package/cjs/components/Button/Button.styles_nedem1.css +0 -8
  211. package/cjs/components/ButtonGroup/variations/_view/base_1n9gznw.css +0 -1
  212. package/es/components/Button/Button.styles_nedem1.css +0 -8
  213. package/es/components/ButtonGroup/variations/_view/base_1n9gznw.css +0 -1
@@ -0,0 +1,156 @@
1
+ ---
2
+ id: IconButton
3
+ title: IconButton
4
+ ---
5
+
6
+ import { PropsTable, Description } from '@site/src/components';
7
+
8
+ # IconButton
9
+ Кнопки могут отображаться в нескольких размерах и цветах, могут содержать иконку.
10
+
11
+ ## IconButton
12
+ <Description name="IconButton" />
13
+ <PropsTable name="IconButton" exclude={['css']} />
14
+
15
+ ## Использование
16
+ Компонент `IconButton` может содержать иконку, которая указывается напрямую через `children`.
17
+
18
+ ```tsx live
19
+ import React from 'react';
20
+ import { IconButton } from '@salutejs/{{ package }}';
21
+ import { IconClose } from '@salutejs/plasma-icons';
22
+
23
+ export function App() {
24
+ return (
25
+ <div>
26
+ <IconButton>
27
+ <IconClose color="inherit" />
28
+ </IconButton>
29
+ </div>
30
+ );
31
+ }
32
+ ```
33
+
34
+ ## Примеры
35
+
36
+ ### Размер кнопки
37
+ Размер кнопки задается с помощью свойства `size`.
38
+
39
+ ```tsx live
40
+ import React from 'react';
41
+ import { IconButton } from '@salutejs/{{ package }}';
42
+ import { IconClose } from '@salutejs/plasma-icons';
43
+
44
+ export function App() {
45
+ return (
46
+ <div>
47
+ <IconButton size="l">
48
+ <IconClose color="inherit" />
49
+ </IconButton>
50
+ <IconButton size="m">
51
+ <IconClose color="inherit" />
52
+ </IconButton>
53
+ <IconButton size="s">
54
+ <IconClose color="inherit" />
55
+ </IconButton>
56
+ <IconButton size="xs">
57
+ <IconClose color="inherit" size="xs" />
58
+ </IconButton>
59
+ </div>
60
+ );
61
+ }
62
+ ```
63
+
64
+ ### Вид кнопки
65
+ Вид кнопки задается с помощью свойства `view`.
66
+
67
+ Возможные значения свойства `view`:
68
+ + `"default"` – по умолчанию;
69
+ + `"secondary"` – вторичная;
70
+ + `"success"` – успешное завершение;
71
+ + `"warning"` – предупреждение;
72
+ + `"critical"` – ошибка;
73
+ + `"clear"` – без цветового сопровождения;
74
+ + `"dark"` – темная;
75
+ + `"black"` – черная;
76
+ + `"white"` – белая.
77
+
78
+ ```tsx live
79
+ import React from 'react';
80
+ import { IconButton } from '@salutejs/{{ package }}';
81
+ import { IconClose } from '@salutejs/plasma-icons';
82
+
83
+ export function App() {
84
+ return (
85
+ <div>
86
+ <IconButton size="s" view="default">
87
+ <IconClose color="inherit" />
88
+ </IconButton>
89
+ <IconButton size="s" view="secondary">
90
+ <IconClose color="inherit" />
91
+ </IconButton>
92
+ <IconButton size="s" view="success">
93
+ <IconClose color="inherit" />
94
+ </IconButton>
95
+ <IconButton size="s" view="warning">
96
+ <IconClose color="inherit" />
97
+ </IconButton>
98
+ <IconButton size="s" view="critical">
99
+ <IconClose color="inherit" />
100
+ </IconButton>
101
+ <IconButton size="s" view="clear">
102
+ <IconClose color="inherit" />
103
+ </IconButton>
104
+ <IconButton size="s" view="dark">
105
+ <IconClose color="inherit" />
106
+ </IconButton>
107
+ <IconButton size="s" view="black">
108
+ <IconClose color="inherit" />
109
+ </IconButton>
110
+ <IconButton size="s" view="white">
111
+ <IconClose color="inherit" />
112
+ </IconButton>
113
+ </div>
114
+ );
115
+ }
116
+ ```
117
+
118
+ ### Границы кнопки
119
+ Границы кнопки задаются с помощью свойства `pin`. Возможные значения свойства `pin`:
120
+ + `square` – обычное скругление;
121
+ + `circle` – сильное скругление;
122
+ + `clear` – нет скругления.
123
+
124
+ ```tsx live
125
+ import React from 'react';
126
+ import { IconButton } from '@salutejs/{{ package }}';
127
+ import { IconClose } from '@salutejs/plasma-icons';
128
+
129
+ export function App() {
130
+ return (
131
+ <div>
132
+ <IconButton pin="square-square">
133
+ <IconClose color="inherit" />
134
+ </IconButton>
135
+ <IconButton pin="square-clear">
136
+ <IconClose color="inherit" />
137
+ </IconButton>
138
+ <IconButton pin="clear-square">
139
+ <IconClose color="inherit" />
140
+ </IconButton>
141
+ <IconButton pin="clear-clear">
142
+ <IconClose color="inherit" />
143
+ </IconButton>
144
+ <IconButton pin="clear-circle">
145
+ <IconClose color="inherit" />
146
+ </IconButton>
147
+ <IconButton pin="circle-clear">
148
+ <IconClose color="inherit" />
149
+ </IconButton>
150
+ <IconButton pin="circle-circle">
151
+ <IconClose color="inherit" />
152
+ </IconButton>
153
+ </div>
154
+ );
155
+ }
156
+ ```
@@ -16,7 +16,7 @@ import { Image } from '@salutejs/{{ package }}';
16
16
  export function App() {
17
17
  return (
18
18
  <Image
19
- src="/web/images/320_320_9.jpg"
19
+ src="/{{ package }}/images/320_320_9.jpg"
20
20
  width="320px"
21
21
  height="320px"
22
22
  alt="Картинка для примера фоном"
@@ -11,13 +11,13 @@ import { PropsTable, Description } from '@site/src/components';
11
11
 
12
12
  ```tsx live
13
13
  import React from 'react';
14
- import { P1, Link } from '@salutejs/{{ package }}';
14
+ import { TextS, Link } from '@salutejs/{{ package }}';
15
15
 
16
16
  export function App() {
17
17
  return (
18
- <P1>
19
- Скачайте <Link href="/" target="_blank">приложение</Link>.
20
- </P1>
18
+ <TextS>
19
+ Скачайте <Link href="/" target="_blank">приложение.</Link>
20
+ </TextS>
21
21
  );
22
22
  }
23
23
  ```
@@ -11,46 +11,98 @@ import { PropsTable, Description } from '@site/src/components';
11
11
 
12
12
  ## Использование
13
13
 
14
- ### Провайдер контекста
15
- Поместите `ModalsProvider` в [корень приложения](../../#корень-приложения) или там, где будете применять модальные окна:
14
+ Перед использованием убедитесь, что `PopupProvider` подключен.
15
+ Компонент Modal во многом схож с Popup, добавляет при этом подложку(`overlay`), а также блокирует scroll и focus.
16
16
 
17
- ```tsx title="index.ts"
18
- import ReactDOM from 'react-dom';
19
- import { ModalsProvider } from '@salutejs/{{ package }}';
17
+ ```tsx live
18
+ import React, { useState } from 'react';
19
+ import { surfaceSolidSecondary } from '@salutejs/{{ vertical }}/tokens';
20
+ import { SSRProvider, Button, Modal, PopupProvider } from '@salutejs/{{ package }}';
20
21
 
21
- import { App } from './App';
22
+ export function App() {
23
+ const [isOpenA, setIsOpenA] = useState(false);
24
+ const [isOpenB, setIsOpenB] = useState(false);
22
25
 
23
- ReactDOM.render(
24
- <ModalsProvider>
25
- <App />
26
- </ModalsProvider>,
27
- document.getElementById('root')
28
- );
26
+ return (
27
+ <SSRProvider>
28
+ <PopupProvider>
29
+ <div style=\{{ height: "300px" }}>
30
+ <div style=\{{ display: 'flex', flexDirection: 'column' }}>
31
+ <Button text="Открыть A" onClick={() => setIsOpenA(true)} />
32
+ </div>
33
+ <Modal
34
+ id="modalA"
35
+ onClose={() => setIsOpenA(false)}
36
+ isOpen={isOpenA}
37
+ placement="center"
38
+ offset={[0, 0]}
39
+ >
40
+ <div style=\{{ background: `${surfaceSolidSecondary}`, padding: "1rem" }}>
41
+ <Button onClick={() => setIsOpenA(false)}>Close</Button>
42
+ <Button text="Открыть B" onClick={() => setIsOpenB(true)} />
43
+ Content
44
+ </div>
45
+ <Modal
46
+ id="modalB"
47
+ onClose={() => setIsOpenB(false)}
48
+ isOpen={isOpenB}
49
+ placement="right"
50
+ offset={[0, 0]}
51
+ >
52
+ <div style=\{{ background: `${surfaceSolidSecondary}`, padding: "1rem" }}>
53
+ <Button onClick={() => setIsOpenB(false)}>Close</Button>
54
+ Content
55
+ </div>
56
+ </Modal>
57
+ </Modal>
58
+ </div>
59
+ </PopupProvider>
60
+ </SSRProvider>
61
+ );
62
+ }
29
63
  ```
30
64
 
31
- ### Вызов модального окна
32
- После подключения `ModalsProvider` поместите компонент `Modal` туда, где необходимо применить модальное окно:
65
+ ## Подключение анимации
66
+ Подключение анимации аналогично тому, как это происходит в `Popup` - через свойство `withAnimation`(управление через `popupClasses`, `modalClasses`).
67
+ Для добавления анимации в оверлей необходимо использовать класс `.modal-overlay` через переменную `modalClasses.overlay` из пакета.
33
68
 
34
- ```tsx live
35
- import React from 'react';
36
- import { Modal, Headline3, P1, Button } from '@salutejs/{{ package }}';
69
+ Пример:
37
70
 
38
- export function App() {
39
- const [isOpen, setIsOpen] = React.useState(false);
71
+ ```tsx
72
+ import styled from 'styled-components';
73
+ import { Modal } from '@salutejs/{{ package }}';
40
74
 
41
- const close = React.useCallback(() => {
42
- setIsOpen(false);
43
- }, []);
75
+ const StyledModal = styled(Modal)`
76
+ && > .${popupClasses.root}, .${modalClasses.overlay} {
77
+ animation: fadeIn 1s forwards;
78
+ }
44
79
 
45
- return (
46
- <div>
47
- <Button text="Открыть модальное окно" onClick={() => setIsOpen(!isOpen)} />
48
- <Modal isOpen={isOpen} onClose={close}>
49
- <Headline3 mb={10}>Модальное окно</Headline3>
50
- <P1>Содержимое модального окна.</P1>
51
- <Button text="Закрыть" onClick={close} />
52
- </Modal>
53
- </div>
54
- );
55
- }
80
+ &&.${popupClasses.endAnimation} .${popupClasses.root} {
81
+ animation: fadeOut 1s forwards;
82
+ }
83
+
84
+ &&.${popupClasses.endAnimation} .${modalClasses.overlay} {
85
+ animation: fadeOut 1s forwards;
86
+ }
87
+
88
+ @keyframes fadeIn {
89
+ from {
90
+ opacity: 0;
91
+ }
92
+
93
+ to {
94
+ opacity: 1;
95
+ }
96
+ }
97
+
98
+ @keyframes fadeOut {
99
+ from {
100
+ opacity: 1;
101
+ }
102
+
103
+ to {
104
+ opacity: 0;
105
+ }
106
+ }
107
+ `;
56
108
  ```
@@ -34,8 +34,7 @@ ReactDOM.render(
34
34
  ```
35
35
 
36
36
  ### Вызов уведомления
37
- После подключения `NotificationsProvider` станет возможен вызов функции `addNotification`,
38
- который приведет к отображению оповещения.
37
+ После подключения `NotificationsProvider` станет возможен вызов функции `addNotification`,который приведет к отображению оповещения.
39
38
  Функция принимает значения свойств компонента `Notification`:
40
39
 
41
40
  ```tsx live
@@ -0,0 +1,130 @@
1
+ ---
2
+ id: pagination
3
+ title: Pagination
4
+ ---
5
+
6
+ import { PropsTable, Description } from '@site/src/components';
7
+
8
+ # Pagination
9
+
10
+ Pagination может отображаться в разных размерах и может содержать select с выбором количества элементов на странице
11
+ и быстрый выбор страницы.
12
+
13
+ ## Pagination
14
+ <Description name="Pagination" />
15
+ <PropsTable name="Pagination" exclude={['css', 'focused']} />
16
+
17
+ ## Использование
18
+ Компонент `Pagination` должен содержать параметр slots. Он обозначает количество кнопок в Pagination.
19
+
20
+ Также компонент имеет параметр hasPerPage, логика работы такова:
21
+
22
+ - если указан только параметр count, то он равен кол-ву страниц
23
+ - если указан параметр hasPerPage или perPage, то count делится на perPage
24
+
25
+ ```tsx live
26
+ import React from 'react';
27
+ import { Pagination } from '@salutejs/{{ package }}';
28
+
29
+ export function App() {
30
+ return (
31
+ <div style=\{{display: "flex", "flex-direction": "column"}}>
32
+ <div>
33
+ <Pagination slots={7} count={200} />
34
+ </div>
35
+ <div>
36
+ <Pagination slots={9} count={200} hasPerPage={true} perPage={20} />
37
+ </div>
38
+ <div>
39
+ <Pagination slots={9} count={200} hasPerPage={true} />
40
+ </div>
41
+ <div>
42
+ <Pagination slots={9} count={200} hasPerPage={false} />
43
+ </div>
44
+ </div>
45
+ );
46
+ }
47
+ ```
48
+
49
+ ## Примеры
50
+
51
+ ### Размер Pagination
52
+ Размер Pagination задается с помощью свойства `size`.
53
+ Возможные значения свойства: `"l"`, `"m"`, `"s"` или `"xs"`:
54
+
55
+ ```tsx live
56
+ import React from 'react';
57
+ import { Pagination } from '@salutejs/{{ package }}';
58
+
59
+ export function App() {
60
+ return (
61
+ <div style=\{{display: "flex", "flex-direction": "column"}}>
62
+ <Pagination size="l" slots={9} count={200} hasPerPage={true} />
63
+ <Pagination size="m" slots={9} count={200} hasPerPage={true} />
64
+ <Pagination size="s" slots={9} count={200} hasPerPage={true} />
65
+ <Pagination size="xs" slots={9} count={200} hasPerPage={true} />
66
+ </div>
67
+ );
68
+ }
69
+ ```
70
+
71
+ ### Вид Pagination
72
+ Вид Pagination задается с помощью свойства `view`. Возможные значения свойства `view`:
73
+ + `"default"` – основная;
74
+ + `"secondary"` – вторичная;
75
+ + `"clear"` – чистая;
76
+
77
+ ```tsx live
78
+ import React from 'react';
79
+ import { Pagination } from '@salutejs/{{ package }}';
80
+
81
+ export function App() {
82
+ return (
83
+ <div style=\{{display: "flex", "flex-direction": "column"}}>
84
+ <Pagination size="xs" view="default" slots={9} count={200} hasPerPage={true} />
85
+ <Pagination size="xs" view="secondary" slots={9} count={200} hasPerPage={true} />
86
+ <Pagination size="xs" view="clear" slots={9} count={200} hasPerPage={true} />
87
+ </div>
88
+ );
89
+ }
90
+ ```
91
+
92
+ ### Вид активной кнопки Pagination
93
+ Вид Pagination задается с помощью свойства `viewCurrentPage`. Возможные значения свойства `viewCurrentPage`:
94
+ + `"default"` – основная;
95
+ + `"secondary"` – вторичная;
96
+ + `"clear"` – чистая;
97
+
98
+ ```tsx live
99
+ import React from 'react';
100
+ import { Pagination } from '@salutejs/{{ package }}';
101
+
102
+ export function App() {
103
+ return (
104
+ <div style=\{{display: "flex", "flex-direction": "column"}}>
105
+ <Pagination size="xs" viewCurrentPage="default" slots={9} count={200} hasPerPage={true} />
106
+ <Pagination size="xs" viewCurrentPage="secondary" slots={9} count={200} hasPerPage={true} />
107
+ <Pagination size="xs" viewCurrentPage="clear" slots={9} count={200} hasPerPage={true} />
108
+ </div>
109
+ );
110
+ }
111
+ ```
112
+
113
+ ### Типы Pagination
114
+ Тип Pagination задается с помощью свойства `type`. Возможные значения свойства `type`:
115
+ + `"default"` – обычная;
116
+ + `"compact"` – компактная;
117
+
118
+ ```tsx live
119
+ import React from 'react';
120
+ import { Pagination } from '@salutejs/{{ package }}';
121
+
122
+ export function App() {
123
+ return (
124
+ <div style=\{{display: "flex", "flex-direction": "column"}}>
125
+ <Pagination size="xs" type="default" slots={9} count={200} hasPerPage={true} />
126
+ <Pagination size="xs" type="compact" slots={9} count={200} hasPerPage={true} />
127
+ </div>
128
+ );
129
+ }
130
+ ```
@@ -12,7 +12,7 @@ import { PropsTable, Description } from '@site/src/components';
12
12
  ```tsx live
13
13
  import React from 'react';
14
14
  import styled from "styled-components";
15
- import { surfaceSolid03 } from "@salutejs/plasma-tokens/brands/{{ theme }}";
15
+ import { surfaceSolidTertiary } from "@salutejs/{{ vertical }}/tokens";
16
16
  import { Popover, Button } from '@salutejs/{{ package }}';
17
17
 
18
18
  export function App() {
@@ -26,7 +26,7 @@ export function App() {
26
26
  position: absolute;
27
27
  width: 0.5rem;
28
28
  height: 0.5rem;
29
- background: ${surfaceSolid03};
29
+ background: ${surfaceSolidTertiary};
30
30
  }
31
31
 
32
32
  &::before {
@@ -37,7 +37,7 @@ export function App() {
37
37
  `;
38
38
 
39
39
  const StyledContent = styled.div`
40
- background: ${surfaceSolid03};
40
+ background: ${surfaceSolidTertiary};
41
41
  padding: 1rem;
42
42
 
43
43
  display: flex;