@salutejs/plasma-new-hope 0.148.0-canary.1442.10921128757.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.
Files changed (5) hide show
  1. package/emotion/cjs/components/Steps/Steps.template-doc.mdx +61 -0
  2. package/emotion/es/components/Steps/Steps.template-doc.mdx +61 -0
  3. package/package.json +4 -4
  4. package/styled-components/cjs/components/Steps/Steps.template-doc.mdx +61 -0
  5. package/styled-components/es/components/Steps/Steps.template-doc.mdx +61 -0
package/emotion/cjs/components/Steps/Steps.template-doc.mdx ADDED
@@ -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/emotion/es/components/Steps/Steps.template-doc.mdx ADDED
@@ -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.1442.10921128757.0",
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.178.0-canary.1442.10921128757.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.180.0-canary.1442.10921128757.0",
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": "30b4bae76c5c67a6559aca6380c66a6ae42f479f"
124
+ "gitHead": "44cf5bcea7512e001d54feeb9cc39e7e8742a2aa"
125
125
  }
package/styled-components/cjs/components/Steps/Steps.template-doc.mdx ADDED
@@ -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/styled-components/es/components/Steps/Steps.template-doc.mdx ADDED
@@ -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
+ ```