@salutejs/plasma-new-hope 0.82.1-canary.1210.9126725322.0 → 0.83.0-canary.1213.9159050781.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (139) hide show
  1. package/cjs/components/Button/Button.css +9 -6
  2. package/cjs/components/Button/Button.js +16 -2
  3. package/cjs/components/Button/Button.js.map +1 -1
  4. package/cjs/components/Button/Button.styles.js +31 -10
  5. package/cjs/components/Button/Button.styles.js.map +1 -1
  6. package/cjs/components/Button/Button.styles_nedem1.css +8 -0
  7. package/cjs/components/Button/Button.tokens.js +5 -0
  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_1lx0ute.css → cjs/components/Button/variations/_stretching/base_hy8dc.css} +1 -1
  12. package/cjs/components/Drawer/Drawer.css +9 -6
  13. package/cjs/components/Drawer/ui/DrawerContent/DrawerContent.css +9 -6
  14. package/cjs/components/Header/ui/HeaderArrow/HeaderArrow.css +9 -6
  15. package/cjs/components/IconButton/IconButton.css +10 -7
  16. package/cjs/components/IconButton/IconButton.styles.js +1 -1
  17. package/{es/components/IconButton/IconButton.styles_1hknr37.css → cjs/components/IconButton/IconButton.styles_7v8g0e.css} +1 -1
  18. package/cjs/components/Notification/Notification.css +9 -6
  19. package/cjs/components/Notification/NotificationsProvider.css +9 -6
  20. package/cjs/components/Pagination/Pagination.css +9 -6
  21. package/cjs/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +9 -6
  22. package/cjs/components/Panel/ui/PanelHeader/PanelHeader.css +9 -6
  23. package/cjs/components/Select/Select.css +9 -6
  24. package/cjs/components/Select/ui/SelectTarget/SelectTarget.css +9 -6
  25. package/cjs/components/Toast/Toast.css +9 -6
  26. package/cjs/components/Toast/ToastController.css +9 -6
  27. package/cjs/index.css +12 -9
  28. package/es/components/Button/Button.css +9 -6
  29. package/es/components/Button/Button.js +17 -3
  30. package/es/components/Button/Button.js.map +1 -1
  31. package/es/components/Button/Button.styles.js +29 -11
  32. package/es/components/Button/Button.styles.js.map +1 -1
  33. package/es/components/Button/Button.styles_nedem1.css +8 -0
  34. package/es/components/Button/Button.tokens.js +5 -0
  35. package/es/components/Button/Button.tokens.js.map +1 -1
  36. package/es/components/Button/variations/_stretching/base.js +1 -1
  37. package/es/components/Button/variations/_stretching/base.js.map +1 -1
  38. package/{cjs/components/Button/variations/_stretching/base_1lx0ute.css → es/components/Button/variations/_stretching/base_hy8dc.css} +1 -1
  39. package/es/components/Drawer/Drawer.css +9 -6
  40. package/es/components/Drawer/ui/DrawerContent/DrawerContent.css +9 -6
  41. package/es/components/Header/ui/HeaderArrow/HeaderArrow.css +9 -6
  42. package/es/components/IconButton/IconButton.css +10 -7
  43. package/es/components/IconButton/IconButton.styles.js +1 -1
  44. package/{cjs/components/IconButton/IconButton.styles_1hknr37.css → es/components/IconButton/IconButton.styles_7v8g0e.css} +1 -1
  45. package/es/components/Notification/Notification.css +9 -6
  46. package/es/components/Notification/NotificationsProvider.css +9 -6
  47. package/es/components/Pagination/Pagination.css +9 -6
  48. package/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.css +9 -6
  49. package/es/components/Panel/ui/PanelHeader/PanelHeader.css +9 -6
  50. package/es/components/Select/Select.css +9 -6
  51. package/es/components/Select/ui/SelectTarget/SelectTarget.css +9 -6
  52. package/es/components/Toast/Toast.css +9 -6
  53. package/es/components/Toast/ToastController.css +9 -6
  54. package/es/index.css +12 -9
  55. package/package.json +2 -2
  56. package/styled-components/cjs/components/Avatar/Avatar.template-doc.mdx +1 -3
  57. package/styled-components/cjs/components/Badge/Badge.template-doc.mdx +9 -9
  58. package/styled-components/cjs/components/Button/Button.js +16 -2
  59. package/styled-components/cjs/components/Button/Button.styles.js +20 -12
  60. package/styled-components/cjs/components/Button/Button.template-doc.mdx +51 -8
  61. package/styled-components/cjs/components/Button/Button.tokens.js +5 -0
  62. package/styled-components/cjs/components/Button/variations/_stretching/base.js +1 -1
  63. package/styled-components/cjs/components/Checkbox/Checkbox.template-doc.mdx +2 -2
  64. package/styled-components/cjs/components/Chip/Chip.template-doc.mdx +1 -1
  65. package/styled-components/cjs/components/Combobox/Combobox.template-doc.mdx +14 -14
  66. package/styled-components/cjs/components/Counter/Counter.template-doc.mdx +5 -5
  67. package/styled-components/cjs/components/Drawer/Drawer.template-doc.mdx +3 -3
  68. package/styled-components/cjs/components/Dropdown/Dropdown.template-doc.mdx +261 -262
  69. package/styled-components/cjs/components/Image/Image.template-doc.mdx +1 -1
  70. package/styled-components/cjs/components/Link/Link.template-doc.mdx +4 -4
  71. package/styled-components/cjs/components/Modal/Modal.template-doc.mdx +33 -85
  72. package/styled-components/cjs/components/Notification/Notification.template-doc.mdx +2 -1
  73. package/styled-components/cjs/components/Popover/Popover.template-doc.mdx +3 -3
  74. package/styled-components/cjs/components/Popup/Popup.template-doc.mdx +74 -70
  75. package/styled-components/cjs/components/Radiobox/Radiobox.template-doc.mdx +1 -2
  76. package/styled-components/cjs/components/Segment/Segment.template-doc.mdx +2 -2
  77. package/styled-components/cjs/components/Skeleton/Skeleton.template-doc.mdx +4 -4
  78. package/styled-components/cjs/components/Tabs/Tabs.template-doc.mdx +1 -1
  79. package/styled-components/cjs/components/TextField/TextField.template-doc.mdx +2 -2
  80. package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.config.js +19 -19
  81. package/styled-components/cjs/examples/plasma_b2c/components/Button/Button.stories.tsx +67 -21
  82. package/styled-components/cjs/examples/plasma_web/components/Button/Button.config.js +19 -19
  83. package/styled-components/cjs/examples/plasma_web/components/Button/Button.stories.tsx +90 -28
  84. package/styled-components/cjs/examples/sds_engineer/components/Button/Button.config.js +19 -19
  85. package/styled-components/cjs/examples/sds_engineer/components/Button/Button.stories.tsx +90 -28
  86. package/styled-components/es/components/Avatar/Avatar.template-doc.mdx +1 -3
  87. package/styled-components/es/components/Badge/Badge.template-doc.mdx +9 -9
  88. package/styled-components/es/components/Button/Button.js +17 -3
  89. package/styled-components/es/components/Button/Button.styles.js +19 -11
  90. package/styled-components/es/components/Button/Button.template-doc.mdx +51 -8
  91. package/styled-components/es/components/Button/Button.tokens.js +5 -0
  92. package/styled-components/es/components/Button/variations/_stretching/base.js +1 -1
  93. package/styled-components/es/components/Checkbox/Checkbox.template-doc.mdx +2 -2
  94. package/styled-components/es/components/Chip/Chip.template-doc.mdx +1 -1
  95. package/styled-components/es/components/Combobox/Combobox.template-doc.mdx +14 -14
  96. package/styled-components/es/components/Counter/Counter.template-doc.mdx +5 -5
  97. package/styled-components/es/components/Drawer/Drawer.template-doc.mdx +3 -3
  98. package/styled-components/es/components/Dropdown/Dropdown.template-doc.mdx +261 -262
  99. package/styled-components/es/components/Image/Image.template-doc.mdx +1 -1
  100. package/styled-components/es/components/Link/Link.template-doc.mdx +4 -4
  101. package/styled-components/es/components/Modal/Modal.template-doc.mdx +33 -85
  102. package/styled-components/es/components/Notification/Notification.template-doc.mdx +2 -1
  103. package/styled-components/es/components/Popover/Popover.template-doc.mdx +3 -3
  104. package/styled-components/es/components/Popup/Popup.template-doc.mdx +74 -70
  105. package/styled-components/es/components/Radiobox/Radiobox.template-doc.mdx +1 -2
  106. package/styled-components/es/components/Segment/Segment.template-doc.mdx +2 -2
  107. package/styled-components/es/components/Skeleton/Skeleton.template-doc.mdx +4 -4
  108. package/styled-components/es/components/Tabs/Tabs.template-doc.mdx +1 -1
  109. package/styled-components/es/components/TextField/TextField.template-doc.mdx +2 -2
  110. package/styled-components/es/examples/plasma_b2c/components/Button/Button.config.js +19 -19
  111. package/styled-components/es/examples/plasma_b2c/components/Button/Button.stories.tsx +67 -21
  112. package/styled-components/es/examples/plasma_web/components/Button/Button.config.js +19 -19
  113. package/styled-components/es/examples/plasma_web/components/Button/Button.stories.tsx +90 -28
  114. package/styled-components/es/examples/sds_engineer/components/Button/Button.config.js +19 -19
  115. package/styled-components/es/examples/sds_engineer/components/Button/Button.stories.tsx +90 -28
  116. package/types/components/Button/Button.d.ts.map +1 -1
  117. package/types/components/Button/Button.styles.d.ts +5 -1
  118. package/types/components/Button/Button.styles.d.ts.map +1 -1
  119. package/types/components/Button/Button.tokens.d.ts +5 -0
  120. package/types/components/Button/Button.tokens.d.ts.map +1 -1
  121. package/types/components/Button/Button.types.d.ts +10 -0
  122. package/types/components/Button/Button.types.d.ts.map +1 -1
  123. package/types/examples/plasma_b2c/components/Button/Button.config.d.ts.map +1 -1
  124. package/types/examples/plasma_web/components/Button/Button.config.d.ts.map +1 -1
  125. package/types/examples/sds_engineer/components/Button/Button.config.d.ts.map +1 -1
  126. package/cjs/components/Button/Button.styles_uqvh6u.css +0 -5
  127. package/es/components/Button/Button.styles_uqvh6u.css +0 -5
  128. package/styled-components/cjs/components/Cell/Cell.template-doc.mdx +0 -68
  129. package/styled-components/cjs/components/Divider/Divider.template-docs.mdx +0 -57
  130. package/styled-components/cjs/components/IconButton/IconButton.template-doc.mdx +0 -156
  131. package/styled-components/cjs/components/Pagination/Pagination.template-doc.mdx +0 -130
  132. package/styled-components/cjs/components/Progress/Progress.template-doc.mdx +0 -33
  133. package/styled-components/cjs/components/Toolbar/Toolbar.template-doc.mdx +0 -120
  134. package/styled-components/es/components/Cell/Cell.template-doc.mdx +0 -68
  135. package/styled-components/es/components/Divider/Divider.template-docs.mdx +0 -57
  136. package/styled-components/es/components/IconButton/IconButton.template-doc.mdx +0 -156
  137. package/styled-components/es/components/Pagination/Pagination.template-doc.mdx +0 -130
  138. package/styled-components/es/components/Progress/Progress.template-doc.mdx +0 -33
  139. package/styled-components/es/components/Toolbar/Toolbar.template-doc.mdx +0 -120
@@ -1,120 +0,0 @@
1
- ---
2
- id: toolbar
3
- title: Toolbar
4
- ---
5
-
6
- import { PropsTable, Description } from '@site/src/components';
7
-
8
- # Toolbar
9
- Toolbar может отображаться в горизонтальном и вертикальном положении с разными размерами.
10
-
11
- ## Toolbar
12
- <Description name="Toolbar" />
13
- <PropsTable name="Toolbar" exclude={['css', 'focused']} />
14
-
15
- ## Использование
16
- Компонент `Toolbar` должен содержать контент передаваемый в `children`.
17
- Для разделения элементов можно использовать ToolbarDivider.
18
-
19
- ```tsx live
20
- import React from 'react';
21
- import { Toolbar, Button, ToolbarDivider } from '@salutejs/{{ package }}';
22
- import { IconEdit } from '@salutejs/plasma-icons';
23
-
24
- export function App() {
25
- return (
26
- <Toolbar>
27
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
28
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
29
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
30
- <ToolbarDivider />
31
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
32
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
33
- </Toolbar>
34
- );
35
- }
36
- ```
37
-
38
- ## Примеры
39
-
40
- ### Размер Toolbar
41
- Размер Toolbar задается с помощью свойства `size`.
42
-
43
- Возможные значения свойства: `"l"`, `"m"`, `"s"` или `"xs"`:
44
-
45
- ```tsx live
46
- import React from 'react';
47
- import { Toolbar, Button, ToolbarDivider } from '@salutejs/{{ package }}';
48
- import { IconEdit } from '@salutejs/plasma-icons';
49
-
50
- export function App() {
51
- return (
52
- <div>
53
- <Toolbar size="l">
54
- <Button square size="l" view="clear" contentLeft={<IconEdit />} />
55
- <Button square size="l" view="clear" contentLeft={<IconEdit />} />
56
- <ToolbarDivider />
57
- <Button square size="l" view="clear" contentLeft={<IconEdit />} />
58
- <Button square size="l" view="clear" contentLeft={<IconEdit />} />
59
- </Toolbar>
60
-
61
- <Toolbar size="m">
62
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
63
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
64
- <ToolbarDivider />
65
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
66
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
67
- </Toolbar>
68
-
69
- <Toolbar size="m">
70
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
71
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
72
- <ToolbarDivider />
73
- <Button square size="s" view="clear" contentLeft={<IconEdit />} />
74
- <Button square size="s" view="clear" contentLeft={<IconEdit />} />
75
- </Toolbar>
76
-
77
- <Toolbar size="xs">
78
- <Button square size="xs" view="clear" contentLeft={<IconEdit />} />
79
- <Button square size="xs" view="clear" contentLeft={<IconEdit />} />
80
- <ToolbarDivider />
81
- <Button square size="xs" view="clear" contentLeft={<IconEdit />} />
82
- <Button square size="xs" view="clear" contentLeft={<IconEdit />} />
83
- </Toolbar>
84
- </div>
85
- );
86
- }
87
- ```
88
-
89
- ### Положение Toolbar
90
- Положение Toolbar задается с помощью свойства `orientation`. Возможные значения свойства `orientation`:
91
- + `"vertical"` – вертикальное положение;
92
- + `"horizontal"` – горизонтальное положение;
93
-
94
- ```tsx live
95
- import React from 'react';
96
- import { Toolbar, Button, ToolbarDivider } from '@salutejs/{{ package }}';
97
- import { IconEdit } from '@salutejs/plasma-icons';
98
-
99
- export function App() {
100
- return (
101
- <div>
102
- <Toolbar orientation="vertical">
103
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
104
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
105
- <ToolbarDivider />
106
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
107
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
108
- </Toolbar>
109
-
110
- <Toolbar orientation="horizontal">
111
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
112
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
113
- <ToolbarDivider />
114
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
115
- <Button square size="m" view="clear" contentLeft={<IconEdit />} />
116
- </Toolbar>
117
- </div>
118
- );
119
- }
120
- ```
@@ -1,68 +0,0 @@
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
- ```
@@ -1,57 +0,0 @@
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
- ```
@@ -1,156 +0,0 @@
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
- ```
@@ -1,130 +0,0 @@
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
- ```
@@ -1,33 +0,0 @@
1
- ---
2
- id: progress
3
- title: Progress
4
- ---
5
-
6
- import { PropsTable, Description } from '@site/src/components';
7
-
8
- # Progress
9
- <Description name="Progress" />
10
- <PropsTable name="Progress" exclude={['css']} />
11
-
12
- ##Примеры
13
-
14
- ### Вид прогресса
15
- Вид прогресса задается с помощью свойства `view`. Возможные значения свойства `view`:
16
- + `"default"` – по умолчанию;
17
- + `"primary"` – основная;
18
- + `"secondary"` – вторичная;
19
- + `"accent"` – акцентная;
20
- + `"success"` – успешное завершение;
21
- + `"warning"` – предупреждение;
22
- + `"error"` – ошибка;
23
-
24
- ```tsx live
25
- import React from 'react';
26
- import { Progress } from '@salutejs/{{ package }}';
27
-
28
- export function App() {
29
- return (
30
- <Progress value={25} view="success" displayValue />
31
- );
32
- }
33
- ```