@salutejs/plasma-new-hope 0.82.0-canary.1203.9113315762.0 → 0.82.1-canary.1210.9126725322.0

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