@salutejs/plasma-new-hope 0.149.0-dev.0 → 0.150.0-canary.1443.10955942474.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 +82 -0
- package/emotion/es/components/Steps/Steps.template-doc.mdx +82 -0
- package/package.json +2 -2
- package/styled-components/cjs/components/Steps/Steps.template-doc.mdx +82 -0
- package/styled-components/es/components/Steps/Steps.template-doc.mdx +82 -0
@@ -0,0 +1,82 @@
|
|
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
|
+
export const fullItems = [
|
50
|
+
{
|
51
|
+
title: 'Просто заголовок',
|
52
|
+
indicator: 1,
|
53
|
+
content: text,
|
54
|
+
progress: 'completed',
|
55
|
+
},
|
56
|
+
{
|
57
|
+
title: 'Очень длинный и неприятный заголовок',
|
58
|
+
indicator: 2,
|
59
|
+
content: text,
|
60
|
+
progress: 'inProgress',
|
61
|
+
},
|
62
|
+
{
|
63
|
+
title: 'СамыйДлинныйИзНеприятныхЗаголовковЕщеИБезПробелов',
|
64
|
+
indicator: 3,
|
65
|
+
content: text,
|
66
|
+
progress: 'notStarted',
|
67
|
+
},
|
68
|
+
];
|
69
|
+
|
70
|
+
// пример использования
|
71
|
+
const [exampleItems, setExampleItems] = useState<StepItem>(() =>
|
72
|
+
fullItems.map((item) => ({ ...item, progress: "notStarted" })),
|
73
|
+
);
|
74
|
+
|
75
|
+
<Steps
|
76
|
+
onClick={(item, index) => {
|
77
|
+
exampleItems[index].progress = "completed";
|
78
|
+
setExampleItems([...exampleItems]);
|
79
|
+
}}
|
80
|
+
items={exampleItems}
|
81
|
+
/>;
|
82
|
+
```
|
@@ -0,0 +1,82 @@
|
|
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
|
+
export const fullItems = [
|
50
|
+
{
|
51
|
+
title: 'Просто заголовок',
|
52
|
+
indicator: 1,
|
53
|
+
content: text,
|
54
|
+
progress: 'completed',
|
55
|
+
},
|
56
|
+
{
|
57
|
+
title: 'Очень длинный и неприятный заголовок',
|
58
|
+
indicator: 2,
|
59
|
+
content: text,
|
60
|
+
progress: 'inProgress',
|
61
|
+
},
|
62
|
+
{
|
63
|
+
title: 'СамыйДлинныйИзНеприятныхЗаголовковЕщеИБезПробелов',
|
64
|
+
indicator: 3,
|
65
|
+
content: text,
|
66
|
+
progress: 'notStarted',
|
67
|
+
},
|
68
|
+
];
|
69
|
+
|
70
|
+
// пример использования
|
71
|
+
const [exampleItems, setExampleItems] = useState<StepItem>(() =>
|
72
|
+
fullItems.map((item) => ({ ...item, progress: "notStarted" })),
|
73
|
+
);
|
74
|
+
|
75
|
+
<Steps
|
76
|
+
onClick={(item, index) => {
|
77
|
+
exampleItems[index].progress = "completed";
|
78
|
+
setExampleItems([...exampleItems]);
|
79
|
+
}}
|
80
|
+
items={exampleItems}
|
81
|
+
/>;
|
82
|
+
```
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@salutejs/plasma-new-hope",
|
3
|
-
"version": "0.
|
3
|
+
"version": "0.150.0-canary.1443.10955942474.0",
|
4
4
|
"description": "Salute Design System blueprint",
|
5
5
|
"main": "cjs/index.js",
|
6
6
|
"module": "es/index.js",
|
@@ -123,5 +123,5 @@
|
|
123
123
|
"react-popper": "2.3.0",
|
124
124
|
"storeon": "3.1.5"
|
125
125
|
},
|
126
|
-
"gitHead": "
|
126
|
+
"gitHead": "7ef4b72a01412464354b9b86cda2e8a1de5c39ba"
|
127
127
|
}
|
@@ -0,0 +1,82 @@
|
|
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
|
+
export const fullItems = [
|
50
|
+
{
|
51
|
+
title: 'Просто заголовок',
|
52
|
+
indicator: 1,
|
53
|
+
content: text,
|
54
|
+
progress: 'completed',
|
55
|
+
},
|
56
|
+
{
|
57
|
+
title: 'Очень длинный и неприятный заголовок',
|
58
|
+
indicator: 2,
|
59
|
+
content: text,
|
60
|
+
progress: 'inProgress',
|
61
|
+
},
|
62
|
+
{
|
63
|
+
title: 'СамыйДлинныйИзНеприятныхЗаголовковЕщеИБезПробелов',
|
64
|
+
indicator: 3,
|
65
|
+
content: text,
|
66
|
+
progress: 'notStarted',
|
67
|
+
},
|
68
|
+
];
|
69
|
+
|
70
|
+
// пример использования
|
71
|
+
const [exampleItems, setExampleItems] = useState<StepItem>(() =>
|
72
|
+
fullItems.map((item) => ({ ...item, progress: "notStarted" })),
|
73
|
+
);
|
74
|
+
|
75
|
+
<Steps
|
76
|
+
onClick={(item, index) => {
|
77
|
+
exampleItems[index].progress = "completed";
|
78
|
+
setExampleItems([...exampleItems]);
|
79
|
+
}}
|
80
|
+
items={exampleItems}
|
81
|
+
/>;
|
82
|
+
```
|
@@ -0,0 +1,82 @@
|
|
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
|
+
export const fullItems = [
|
50
|
+
{
|
51
|
+
title: 'Просто заголовок',
|
52
|
+
indicator: 1,
|
53
|
+
content: text,
|
54
|
+
progress: 'completed',
|
55
|
+
},
|
56
|
+
{
|
57
|
+
title: 'Очень длинный и неприятный заголовок',
|
58
|
+
indicator: 2,
|
59
|
+
content: text,
|
60
|
+
progress: 'inProgress',
|
61
|
+
},
|
62
|
+
{
|
63
|
+
title: 'СамыйДлинныйИзНеприятныхЗаголовковЕщеИБезПробелов',
|
64
|
+
indicator: 3,
|
65
|
+
content: text,
|
66
|
+
progress: 'notStarted',
|
67
|
+
},
|
68
|
+
];
|
69
|
+
|
70
|
+
// пример использования
|
71
|
+
const [exampleItems, setExampleItems] = useState<StepItem>(() =>
|
72
|
+
fullItems.map((item) => ({ ...item, progress: "notStarted" })),
|
73
|
+
);
|
74
|
+
|
75
|
+
<Steps
|
76
|
+
onClick={(item, index) => {
|
77
|
+
exampleItems[index].progress = "completed";
|
78
|
+
setExampleItems([...exampleItems]);
|
79
|
+
}}
|
80
|
+
items={exampleItems}
|
81
|
+
/>;
|
82
|
+
```
|