@salutejs/plasma-new-hope 0.148.0-canary.1443.10923396048.0 → 0.148.0
Sign up to get free protection for your applications and to get access to all the features.
- package/package.json +4 -4
- package/emotion/cjs/components/Steps/Steps.template-doc.mdx +0 -61
- package/emotion/es/components/Steps/Steps.template-doc.mdx +0 -61
- package/styled-components/cjs/components/Steps/Steps.template-doc.mdx +0 -61
- package/styled-components/es/components/Steps/Steps.template-doc.mdx +0 -61
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@salutejs/plasma-new-hope",
|
3
|
-
"version": "0.148.0
|
3
|
+
"version": "0.148.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.178.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.180.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": "485f56611eb11cf0eddca48da82efe94cb83ed7c"
|
125
125
|
}
|
@@ -1,61 +0,0 @@
|
|
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
|
-
```
|
@@ -1,61 +0,0 @@
|
|
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
|
-
```
|
@@ -1,61 +0,0 @@
|
|
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
|
-
```
|
@@ -1,61 +0,0 @@
|
|
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
|
-
```
|