@salutejs/plasma-new-hope 0.148.0-canary.1442.10920050701.0 → 0.148.0-canary.1443.10923396048.0
Sign up to get free protection for your applications and to get access to all the features.
- package/emotion/cjs/components/Steps/Steps.template-doc.mdx +61 -0
- package/emotion/es/components/Steps/Steps.template-doc.mdx +61 -0
- package/package.json +4 -4
- package/styled-components/cjs/components/Steps/Steps.template-doc.mdx +61 -0
- package/styled-components/es/components/Steps/Steps.template-doc.mdx +61 -0
@@ -0,0 +1,61 @@
|
|
1
|
+
---
|
2
|
+
id: steps
|
3
|
+
title: Steps
|
4
|
+
---
|
5
|
+
|
6
|
+
# Steps
|
7
|
+
Шаги могут отображаться в нескольких размерах, в упрощенном виде и в горизонтальной/вертикальной ориентации
|
8
|
+
|
9
|
+
```tsx live
|
10
|
+
import React, { ReactNode, useState } from "react";
|
11
|
+
|
12
|
+
interface StepItemSimple {
|
13
|
+
indicator?: number | string | ReactNode;
|
14
|
+
progress?: "notStarted" | "completed" | "inProgress";
|
15
|
+
disabled?: boolean;
|
16
|
+
}
|
17
|
+
|
18
|
+
interface StepItem {
|
19
|
+
title?: string;
|
20
|
+
content?: string | ReactNode;
|
21
|
+
indicator?: number | string | ReactNode;
|
22
|
+
progress?: "notStarted" | "completed" | "inProgress";
|
23
|
+
disabled?: boolean;
|
24
|
+
}
|
25
|
+
|
26
|
+
type StepItemType = StepItemSimple | StepItem;
|
27
|
+
|
28
|
+
interface Steps {
|
29
|
+
orientation?: "horizontal" | "vertical";
|
30
|
+
/* выравнивание заголовков и контента
|
31
|
+
* @default 'left' */
|
32
|
+
contentAlign?: "left" | "center"; //
|
33
|
+
size?: "xs" | "s" | "m" | "l";
|
34
|
+
indicatorSize?: 8 | 16 | 24 | 36;
|
35
|
+
/* наличие разделительной линии
|
36
|
+
* @default 'left' */
|
37
|
+
hasLine?: boolean;
|
38
|
+
/* включает упрощенное отображение, то есть без title и content
|
39
|
+
* даже если они есть в items */
|
40
|
+
simple?: boolean;
|
41
|
+
/* обработчик кликов по StepItem
|
42
|
+
при наличии onClick у полей появляется :hover
|
43
|
+
без onClick можно разместить в content кнопки и обрабатывать переходы через них
|
44
|
+
*/
|
45
|
+
onClick?: (item: StepItemType, index: number) => void;
|
46
|
+
items: StepItemType[];
|
47
|
+
}
|
48
|
+
|
49
|
+
// пример использования
|
50
|
+
const [exampleItems, setExampleItems] = useState(() =>
|
51
|
+
fullItems.map((item) => ({ ...item, progress: "notStarted" })),
|
52
|
+
);
|
53
|
+
|
54
|
+
<Steps
|
55
|
+
onClick={(item, index) => {
|
56
|
+
exampleItems[index].progress = "completed";
|
57
|
+
setExampleItems([...exampleItems]);
|
58
|
+
}}
|
59
|
+
items={exampleItems}
|
60
|
+
/>;
|
61
|
+
```
|
@@ -0,0 +1,61 @@
|
|
1
|
+
---
|
2
|
+
id: steps
|
3
|
+
title: Steps
|
4
|
+
---
|
5
|
+
|
6
|
+
# Steps
|
7
|
+
Шаги могут отображаться в нескольких размерах, в упрощенном виде и в горизонтальной/вертикальной ориентации
|
8
|
+
|
9
|
+
```tsx live
|
10
|
+
import React, { ReactNode, useState } from "react";
|
11
|
+
|
12
|
+
interface StepItemSimple {
|
13
|
+
indicator?: number | string | ReactNode;
|
14
|
+
progress?: "notStarted" | "completed" | "inProgress";
|
15
|
+
disabled?: boolean;
|
16
|
+
}
|
17
|
+
|
18
|
+
interface StepItem {
|
19
|
+
title?: string;
|
20
|
+
content?: string | ReactNode;
|
21
|
+
indicator?: number | string | ReactNode;
|
22
|
+
progress?: "notStarted" | "completed" | "inProgress";
|
23
|
+
disabled?: boolean;
|
24
|
+
}
|
25
|
+
|
26
|
+
type StepItemType = StepItemSimple | StepItem;
|
27
|
+
|
28
|
+
interface Steps {
|
29
|
+
orientation?: "horizontal" | "vertical";
|
30
|
+
/* выравнивание заголовков и контента
|
31
|
+
* @default 'left' */
|
32
|
+
contentAlign?: "left" | "center"; //
|
33
|
+
size?: "xs" | "s" | "m" | "l";
|
34
|
+
indicatorSize?: 8 | 16 | 24 | 36;
|
35
|
+
/* наличие разделительной линии
|
36
|
+
* @default 'left' */
|
37
|
+
hasLine?: boolean;
|
38
|
+
/* включает упрощенное отображение, то есть без title и content
|
39
|
+
* даже если они есть в items */
|
40
|
+
simple?: boolean;
|
41
|
+
/* обработчик кликов по StepItem
|
42
|
+
при наличии onClick у полей появляется :hover
|
43
|
+
без onClick можно разместить в content кнопки и обрабатывать переходы через них
|
44
|
+
*/
|
45
|
+
onClick?: (item: StepItemType, index: number) => void;
|
46
|
+
items: StepItemType[];
|
47
|
+
}
|
48
|
+
|
49
|
+
// пример использования
|
50
|
+
const [exampleItems, setExampleItems] = useState(() =>
|
51
|
+
fullItems.map((item) => ({ ...item, progress: "notStarted" })),
|
52
|
+
);
|
53
|
+
|
54
|
+
<Steps
|
55
|
+
onClick={(item, index) => {
|
56
|
+
exampleItems[index].progress = "completed";
|
57
|
+
setExampleItems([...exampleItems]);
|
58
|
+
}}
|
59
|
+
items={exampleItems}
|
60
|
+
/>;
|
61
|
+
```
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@salutejs/plasma-new-hope",
|
3
|
-
"version": "0.148.0-canary.
|
3
|
+
"version": "0.148.0-canary.1443.10923396048.0",
|
4
4
|
"description": "Salute Design System blueprint",
|
5
5
|
"main": "cjs/index.js",
|
6
6
|
"module": "es/index.js",
|
@@ -80,7 +80,7 @@
|
|
80
80
|
"@rollup/plugin-babel": "^6.0.4",
|
81
81
|
"@rollup/plugin-commonjs": "^25.0.4",
|
82
82
|
"@rollup/plugin-node-resolve": "^15.1.0",
|
83
|
-
"@salutejs/plasma-sb-utils": "0.
|
83
|
+
"@salutejs/plasma-sb-utils": "0.177.1-dev.0",
|
84
84
|
"@storybook/addon-docs": "^7.6.17",
|
85
85
|
"@storybook/addon-essentials": "^7.6.17",
|
86
86
|
"@storybook/addons": "^7.6.17",
|
@@ -113,7 +113,7 @@
|
|
113
113
|
"@linaria/core": "5.0.2",
|
114
114
|
"@linaria/react": "5.0.3",
|
115
115
|
"@popperjs/core": "2.11.8",
|
116
|
-
"@salutejs/plasma-core": "1.
|
116
|
+
"@salutejs/plasma-core": "1.179.1-dev.0",
|
117
117
|
"dayjs": "1.11.11",
|
118
118
|
"focus-visible": "5.2.0",
|
119
119
|
"lodash.throttle": "4.1.1",
|
@@ -121,5 +121,5 @@
|
|
121
121
|
"react-popper": "2.3.0",
|
122
122
|
"storeon": "3.1.5"
|
123
123
|
},
|
124
|
-
"gitHead": "
|
124
|
+
"gitHead": "44cf5bcea7512e001d54feeb9cc39e7e8742a2aa"
|
125
125
|
}
|
@@ -0,0 +1,61 @@
|
|
1
|
+
---
|
2
|
+
id: steps
|
3
|
+
title: Steps
|
4
|
+
---
|
5
|
+
|
6
|
+
# Steps
|
7
|
+
Шаги могут отображаться в нескольких размерах, в упрощенном виде и в горизонтальной/вертикальной ориентации
|
8
|
+
|
9
|
+
```tsx live
|
10
|
+
import React, { ReactNode, useState } from "react";
|
11
|
+
|
12
|
+
interface StepItemSimple {
|
13
|
+
indicator?: number | string | ReactNode;
|
14
|
+
progress?: "notStarted" | "completed" | "inProgress";
|
15
|
+
disabled?: boolean;
|
16
|
+
}
|
17
|
+
|
18
|
+
interface StepItem {
|
19
|
+
title?: string;
|
20
|
+
content?: string | ReactNode;
|
21
|
+
indicator?: number | string | ReactNode;
|
22
|
+
progress?: "notStarted" | "completed" | "inProgress";
|
23
|
+
disabled?: boolean;
|
24
|
+
}
|
25
|
+
|
26
|
+
type StepItemType = StepItemSimple | StepItem;
|
27
|
+
|
28
|
+
interface Steps {
|
29
|
+
orientation?: "horizontal" | "vertical";
|
30
|
+
/* выравнивание заголовков и контента
|
31
|
+
* @default 'left' */
|
32
|
+
contentAlign?: "left" | "center"; //
|
33
|
+
size?: "xs" | "s" | "m" | "l";
|
34
|
+
indicatorSize?: 8 | 16 | 24 | 36;
|
35
|
+
/* наличие разделительной линии
|
36
|
+
* @default 'left' */
|
37
|
+
hasLine?: boolean;
|
38
|
+
/* включает упрощенное отображение, то есть без title и content
|
39
|
+
* даже если они есть в items */
|
40
|
+
simple?: boolean;
|
41
|
+
/* обработчик кликов по StepItem
|
42
|
+
при наличии onClick у полей появляется :hover
|
43
|
+
без onClick можно разместить в content кнопки и обрабатывать переходы через них
|
44
|
+
*/
|
45
|
+
onClick?: (item: StepItemType, index: number) => void;
|
46
|
+
items: StepItemType[];
|
47
|
+
}
|
48
|
+
|
49
|
+
// пример использования
|
50
|
+
const [exampleItems, setExampleItems] = useState(() =>
|
51
|
+
fullItems.map((item) => ({ ...item, progress: "notStarted" })),
|
52
|
+
);
|
53
|
+
|
54
|
+
<Steps
|
55
|
+
onClick={(item, index) => {
|
56
|
+
exampleItems[index].progress = "completed";
|
57
|
+
setExampleItems([...exampleItems]);
|
58
|
+
}}
|
59
|
+
items={exampleItems}
|
60
|
+
/>;
|
61
|
+
```
|
@@ -0,0 +1,61 @@
|
|
1
|
+
---
|
2
|
+
id: steps
|
3
|
+
title: Steps
|
4
|
+
---
|
5
|
+
|
6
|
+
# Steps
|
7
|
+
Шаги могут отображаться в нескольких размерах, в упрощенном виде и в горизонтальной/вертикальной ориентации
|
8
|
+
|
9
|
+
```tsx live
|
10
|
+
import React, { ReactNode, useState } from "react";
|
11
|
+
|
12
|
+
interface StepItemSimple {
|
13
|
+
indicator?: number | string | ReactNode;
|
14
|
+
progress?: "notStarted" | "completed" | "inProgress";
|
15
|
+
disabled?: boolean;
|
16
|
+
}
|
17
|
+
|
18
|
+
interface StepItem {
|
19
|
+
title?: string;
|
20
|
+
content?: string | ReactNode;
|
21
|
+
indicator?: number | string | ReactNode;
|
22
|
+
progress?: "notStarted" | "completed" | "inProgress";
|
23
|
+
disabled?: boolean;
|
24
|
+
}
|
25
|
+
|
26
|
+
type StepItemType = StepItemSimple | StepItem;
|
27
|
+
|
28
|
+
interface Steps {
|
29
|
+
orientation?: "horizontal" | "vertical";
|
30
|
+
/* выравнивание заголовков и контента
|
31
|
+
* @default 'left' */
|
32
|
+
contentAlign?: "left" | "center"; //
|
33
|
+
size?: "xs" | "s" | "m" | "l";
|
34
|
+
indicatorSize?: 8 | 16 | 24 | 36;
|
35
|
+
/* наличие разделительной линии
|
36
|
+
* @default 'left' */
|
37
|
+
hasLine?: boolean;
|
38
|
+
/* включает упрощенное отображение, то есть без title и content
|
39
|
+
* даже если они есть в items */
|
40
|
+
simple?: boolean;
|
41
|
+
/* обработчик кликов по StepItem
|
42
|
+
при наличии onClick у полей появляется :hover
|
43
|
+
без onClick можно разместить в content кнопки и обрабатывать переходы через них
|
44
|
+
*/
|
45
|
+
onClick?: (item: StepItemType, index: number) => void;
|
46
|
+
items: StepItemType[];
|
47
|
+
}
|
48
|
+
|
49
|
+
// пример использования
|
50
|
+
const [exampleItems, setExampleItems] = useState(() =>
|
51
|
+
fullItems.map((item) => ({ ...item, progress: "notStarted" })),
|
52
|
+
);
|
53
|
+
|
54
|
+
<Steps
|
55
|
+
onClick={(item, index) => {
|
56
|
+
exampleItems[index].progress = "completed";
|
57
|
+
setExampleItems([...exampleItems]);
|
58
|
+
}}
|
59
|
+
items={exampleItems}
|
60
|
+
/>;
|
61
|
+
```
|