@alfalab/core-components-steps 1.2.0 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/Component.js +1 -1
  2. package/components/step/Component.js +1 -1
  3. package/components/step/index.css +26 -26
  4. package/components/step-indicator/Component.js +1 -1
  5. package/components/step-indicator/index.css +2 -2
  6. package/esm/Component.js +1 -1
  7. package/esm/components/step/Component.js +1 -1
  8. package/esm/components/step/index.css +26 -26
  9. package/esm/components/step-indicator/Component.js +1 -1
  10. package/esm/components/step-indicator/index.css +2 -2
  11. package/esm/index.css +3 -3
  12. package/index.css +3 -3
  13. package/modern/Component.js +1 -1
  14. package/modern/components/step/Component.js +1 -1
  15. package/modern/components/step/index.css +26 -26
  16. package/modern/components/step-indicator/Component.js +1 -1
  17. package/modern/components/step-indicator/index.css +2 -2
  18. package/modern/index.css +3 -3
  19. package/package.json +2 -5
  20. package/src/Component.tsx +190 -0
  21. package/src/components/step/Component.tsx +222 -0
  22. package/src/components/step/index.module.css +154 -0
  23. package/src/components/step/index.ts +1 -0
  24. package/src/components/step-indicator/Component.tsx +18 -0
  25. package/src/components/step-indicator/index.module.css +3 -0
  26. package/src/components/step-indicator/index.ts +1 -0
  27. package/src/index.module.css +12 -0
  28. package/src/index.ts +1 -0
  29. package/send-stats.js +0 -82
package/Component.js CHANGED
@@ -18,7 +18,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
18
18
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
19
19
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
20
20
 
21
- var styles = {"component":"steps__component_1hggi","vertical":"steps__vertical_1hggi"};
21
+ var styles = {"component":"steps__component_6608t","vertical":"steps__vertical_6608t"};
22
22
  require('./index.css')
23
23
 
24
24
  var Steps = function (_a) {
package/components/step/Component.js CHANGED
@@ -17,7 +17,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
17
17
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
18
18
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
19
19
 
20
- var styles = {"step":"steps__step_5fjrx","vertical":"steps__vertical_5fjrx","interactive":"steps__interactive_5fjrx","disabled":"steps__disabled_5fjrx","text":"steps__text_5fjrx","indicator":"steps__indicator_5fjrx","option":"steps__option_5fjrx","dash":"steps__dash_5fjrx","completed":"steps__completed_5fjrx","focused":"steps__focused_5fjrx","selected":"steps__selected_5fjrx","checkbox":"steps__checkbox_5fjrx","dot":"steps__dot_5fjrx","error":"steps__error_5fjrx","unordered":"steps__unordered_5fjrx","completedIndicator":"steps__completedIndicator_5fjrx"};
20
+ var styles = {"step":"steps__step_yj7ed","vertical":"steps__vertical_yj7ed","interactive":"steps__interactive_yj7ed","disabled":"steps__disabled_yj7ed","text":"steps__text_yj7ed","indicator":"steps__indicator_yj7ed","option":"steps__option_yj7ed","dash":"steps__dash_yj7ed","completed":"steps__completed_yj7ed","focused":"steps__focused_yj7ed","selected":"steps__selected_yj7ed","checkbox":"steps__checkbox_yj7ed","dot":"steps__dot_yj7ed","error":"steps__error_yj7ed","unordered":"steps__unordered_yj7ed","completedIndicator":"steps__completedIndicator_yj7ed"};
21
21
  require('./index.css')
22
22
 
23
23
  var Step = function (_a) {
package/components/step/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1k7af */
1
+ /* hash: j7y5q */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-link: #0072ef;
@@ -31,26 +31,26 @@
31
31
  } :root {
32
32
  --steps-option-svg-color: var(--color-light-graphic-positive);
33
33
  --steps-dash-border: 2px solid var(--color-light-graphic-positive);
34
- } .steps__step_5fjrx {
34
+ } .steps__step_yj7ed {
35
35
  display: flex;
36
36
  outline: none
37
- } .steps__step_5fjrx:not(.steps__vertical_5fjrx) {
37
+ } .steps__step_yj7ed:not(.steps__vertical_yj7ed) {
38
38
  align-items: center;
39
- } .steps__step_5fjrx.steps__interactive_5fjrx:not(.steps__disabled_5fjrx):hover {
39
+ } .steps__step_yj7ed.steps__interactive_yj7ed:not(.steps__disabled_yj7ed):hover {
40
40
  cursor: pointer;
41
- } .steps__step_5fjrx.steps__disabled_5fjrx:hover .steps__text_5fjrx {
41
+ } .steps__step_yj7ed.steps__disabled_yj7ed:hover .steps__text_yj7ed {
42
42
  background: unset;
43
- } .steps__step_5fjrx.steps__disabled_5fjrx .steps__indicator_5fjrx {
43
+ } .steps__step_yj7ed.steps__disabled_yj7ed .steps__indicator_yj7ed {
44
44
  cursor: unset;
45
- } .steps__indicator_5fjrx {
45
+ } .steps__indicator_yj7ed {
46
46
  cursor: pointer;
47
47
  display: flex;
48
48
  align-items: center;
49
49
  margin-right: var(--gap-2xs)
50
- } .steps__indicator_5fjrx.steps__vertical_5fjrx {
50
+ } .steps__indicator_yj7ed.steps__vertical_yj7ed {
51
51
  flex-direction: column;
52
52
  margin-right: var(--gap-xs);
53
- } .steps__option_5fjrx {
53
+ } .steps__option_yj7ed {
54
54
  font-size: 14px;
55
55
  line-height: 20px;
56
56
  font-weight: 700;
@@ -63,25 +63,25 @@
63
63
  min-width: 24px;
64
64
  height: 24px;
65
65
  border-radius: var(--border-radius-circle)
66
- } .steps__option_5fjrx.steps__vertical_5fjrx {
66
+ } .steps__option_yj7ed.steps__vertical_yj7ed {
67
67
  margin-top: var(--gap-xs);
68
- } .steps__dash_5fjrx {
68
+ } .steps__dash_yj7ed {
69
69
  flex: 1 1 auto;
70
70
  min-width: 24px;
71
71
  border-top: 2px solid var(--color-light-border-primary);
72
72
  margin-right: var(--gap-xs)
73
- } .steps__dash_5fjrx.steps__completed_5fjrx {
73
+ } .steps__dash_yj7ed.steps__completed_yj7ed {
74
74
  border-top: var(--steps-dash-border);
75
- } .steps__dash_5fjrx.steps__vertical_5fjrx {
75
+ } .steps__dash_yj7ed.steps__vertical_yj7ed {
76
76
  min-width: unset;
77
77
  min-height: 24px;
78
78
  margin-right: 0;
79
79
  margin-top: var(--gap-xs);
80
80
  border-left: 2px solid var(--color-light-border-primary);
81
81
  border-top: none;
82
- } .steps__dash_5fjrx.steps__completed_5fjrx.steps__vertical_5fjrx {
82
+ } .steps__dash_yj7ed.steps__completed_yj7ed.steps__vertical_yj7ed {
83
83
  border-left: var(--steps-dash-border);
84
- } .steps__text_5fjrx {
84
+ } .steps__text_yj7ed {
85
85
  font-size: 16px;
86
86
  line-height: 24px;
87
87
  font-weight: 400;
@@ -91,19 +91,19 @@
91
91
  color: var(--color-light-text-primary);
92
92
  border-radius: var(--gap-xs);
93
93
  height: min-content
94
- } .steps__text_5fjrx.steps__interactive_5fjrx:not(.steps__disabled_5fjrx):hover {
94
+ } .steps__text_yj7ed.steps__interactive_yj7ed:not(.steps__disabled_yj7ed):hover {
95
95
  background: var(--color-light-bg-primary-inverted-alpha-7);
96
- } .steps__text_5fjrx.steps__interactive_5fjrx:not(.steps__disabled_5fjrx):active {
96
+ } .steps__text_yj7ed.steps__interactive_yj7ed:not(.steps__disabled_yj7ed):active {
97
97
  background: var(--color-light-bg-primary-inverted-alpha-15);
98
- } .steps__focused_5fjrx {
98
+ } .steps__focused_yj7ed {
99
99
  outline: var(--gap-3xs) solid var(--focus-color);
100
100
  outline-offset: var(--gap-3xs);
101
- } .steps__selected_5fjrx .steps__text_5fjrx {
101
+ } .steps__selected_yj7ed .steps__text_yj7ed {
102
102
  color: var(--color-light-graphic-primary);
103
- } .steps__selected_5fjrx .steps__option_5fjrx {
103
+ } .steps__selected_yj7ed .steps__option_yj7ed {
104
104
  color: var(--color-light-graphic-primary-inverted);
105
105
  background: var(--color-light-graphic-primary);
106
- } .steps__checkbox_5fjrx {
106
+ } .steps__checkbox_yj7ed {
107
107
  display: flex;
108
108
  justify-content: center;
109
109
  align-items: center;
@@ -111,18 +111,18 @@
111
111
  width: 20px;
112
112
  height: 20px;
113
113
  border: 2px solid var(--color-light-graphic-quaternary);
114
- } .steps__dot_5fjrx {
114
+ } .steps__dot_yj7ed {
115
115
  width: 10px;
116
116
  height: 10px;
117
117
  border-radius: var(--border-radius-circle);
118
118
  background: var(--color-light-graphic-quaternary);
119
- } .steps__selected_5fjrx .steps__checkbox_5fjrx {
119
+ } .steps__selected_yj7ed .steps__checkbox_yj7ed {
120
120
  border: 2px solid var(--color-light-graphic-primary)
121
- } .steps__selected_5fjrx .steps__checkbox_5fjrx .steps__dot_5fjrx {
121
+ } .steps__selected_yj7ed .steps__checkbox_yj7ed .steps__dot_yj7ed {
122
122
  background: var(--color-light-graphic-primary);
123
- } .steps__option_5fjrx:not(.steps__error_5fjrx).steps__unordered_5fjrx {
123
+ } .steps__option_yj7ed:not(.steps__error_yj7ed).steps__unordered_yj7ed {
124
124
  background: unset;
125
- } .steps__completedIndicator_5fjrx > [class*='positive'] {
125
+ } .steps__completedIndicator_yj7ed > [class*='positive'] {
126
126
  color: var(--steps-option-svg-color);
127
127
  background-color: var(--steps-option-svg-color);
128
128
  }
package/components/step-indicator/Component.js CHANGED
@@ -11,7 +11,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
11
11
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
12
12
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
13
13
 
14
- var styles = {"component":"steps__component_14mfc"};
14
+ var styles = {"component":"steps__component_ol3rw"};
15
15
  require('./index.css')
16
16
 
17
17
  var StepIndicator = function (_a) {
package/components/step-indicator/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1ch7o */
2
- .steps__component_14mfc {
1
+ /* hash: vggs8 */
2
+ .steps__component_ol3rw {
3
3
  padding: 0;
4
4
  }
package/esm/Component.js CHANGED
@@ -9,7 +9,7 @@ import '@alfalab/icons-glyph/ExclamationCircleMIcon';
9
9
  import './components/step-indicator/Component.js';
10
10
  import '@alfalab/core-components-badge/esm';
11
11
 
12
- var styles = {"component":"steps__component_1hggi","vertical":"steps__vertical_1hggi"};
12
+ var styles = {"component":"steps__component_6608t","vertical":"steps__vertical_6608t"};
13
13
  require('./index.css')
14
14
 
15
15
  var Steps = function (_a) {
package/esm/components/step/Component.js CHANGED
@@ -8,7 +8,7 @@ import { ExclamationCircleMIcon } from '@alfalab/icons-glyph/ExclamationCircleMI
8
8
  import { StepIndicator } from '../step-indicator/Component.js';
9
9
  import '@alfalab/core-components-badge/esm';
10
10
 
11
- var styles = {"step":"steps__step_5fjrx","vertical":"steps__vertical_5fjrx","interactive":"steps__interactive_5fjrx","disabled":"steps__disabled_5fjrx","text":"steps__text_5fjrx","indicator":"steps__indicator_5fjrx","option":"steps__option_5fjrx","dash":"steps__dash_5fjrx","completed":"steps__completed_5fjrx","focused":"steps__focused_5fjrx","selected":"steps__selected_5fjrx","checkbox":"steps__checkbox_5fjrx","dot":"steps__dot_5fjrx","error":"steps__error_5fjrx","unordered":"steps__unordered_5fjrx","completedIndicator":"steps__completedIndicator_5fjrx"};
11
+ var styles = {"step":"steps__step_yj7ed","vertical":"steps__vertical_yj7ed","interactive":"steps__interactive_yj7ed","disabled":"steps__disabled_yj7ed","text":"steps__text_yj7ed","indicator":"steps__indicator_yj7ed","option":"steps__option_yj7ed","dash":"steps__dash_yj7ed","completed":"steps__completed_yj7ed","focused":"steps__focused_yj7ed","selected":"steps__selected_yj7ed","checkbox":"steps__checkbox_yj7ed","dot":"steps__dot_yj7ed","error":"steps__error_yj7ed","unordered":"steps__unordered_yj7ed","completedIndicator":"steps__completedIndicator_yj7ed"};
12
12
  require('./index.css')
13
13
 
14
14
  var Step = function (_a) {
package/esm/components/step/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1k7af */
1
+ /* hash: j7y5q */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-link: #0072ef;
@@ -31,26 +31,26 @@
31
31
  } :root {
32
32
  --steps-option-svg-color: var(--color-light-graphic-positive);
33
33
  --steps-dash-border: 2px solid var(--color-light-graphic-positive);
34
- } .steps__step_5fjrx {
34
+ } .steps__step_yj7ed {
35
35
  display: flex;
36
36
  outline: none
37
- } .steps__step_5fjrx:not(.steps__vertical_5fjrx) {
37
+ } .steps__step_yj7ed:not(.steps__vertical_yj7ed) {
38
38
  align-items: center;
39
- } .steps__step_5fjrx.steps__interactive_5fjrx:not(.steps__disabled_5fjrx):hover {
39
+ } .steps__step_yj7ed.steps__interactive_yj7ed:not(.steps__disabled_yj7ed):hover {
40
40
  cursor: pointer;
41
- } .steps__step_5fjrx.steps__disabled_5fjrx:hover .steps__text_5fjrx {
41
+ } .steps__step_yj7ed.steps__disabled_yj7ed:hover .steps__text_yj7ed {
42
42
  background: unset;
43
- } .steps__step_5fjrx.steps__disabled_5fjrx .steps__indicator_5fjrx {
43
+ } .steps__step_yj7ed.steps__disabled_yj7ed .steps__indicator_yj7ed {
44
44
  cursor: unset;
45
- } .steps__indicator_5fjrx {
45
+ } .steps__indicator_yj7ed {
46
46
  cursor: pointer;
47
47
  display: flex;
48
48
  align-items: center;
49
49
  margin-right: var(--gap-2xs)
50
- } .steps__indicator_5fjrx.steps__vertical_5fjrx {
50
+ } .steps__indicator_yj7ed.steps__vertical_yj7ed {
51
51
  flex-direction: column;
52
52
  margin-right: var(--gap-xs);
53
- } .steps__option_5fjrx {
53
+ } .steps__option_yj7ed {
54
54
  font-size: 14px;
55
55
  line-height: 20px;
56
56
  font-weight: 700;
@@ -63,25 +63,25 @@
63
63
  min-width: 24px;
64
64
  height: 24px;
65
65
  border-radius: var(--border-radius-circle)
66
- } .steps__option_5fjrx.steps__vertical_5fjrx {
66
+ } .steps__option_yj7ed.steps__vertical_yj7ed {
67
67
  margin-top: var(--gap-xs);
68
- } .steps__dash_5fjrx {
68
+ } .steps__dash_yj7ed {
69
69
  flex: 1 1 auto;
70
70
  min-width: 24px;
71
71
  border-top: 2px solid var(--color-light-border-primary);
72
72
  margin-right: var(--gap-xs)
73
- } .steps__dash_5fjrx.steps__completed_5fjrx {
73
+ } .steps__dash_yj7ed.steps__completed_yj7ed {
74
74
  border-top: var(--steps-dash-border);
75
- } .steps__dash_5fjrx.steps__vertical_5fjrx {
75
+ } .steps__dash_yj7ed.steps__vertical_yj7ed {
76
76
  min-width: unset;
77
77
  min-height: 24px;
78
78
  margin-right: 0;
79
79
  margin-top: var(--gap-xs);
80
80
  border-left: 2px solid var(--color-light-border-primary);
81
81
  border-top: none;
82
- } .steps__dash_5fjrx.steps__completed_5fjrx.steps__vertical_5fjrx {
82
+ } .steps__dash_yj7ed.steps__completed_yj7ed.steps__vertical_yj7ed {
83
83
  border-left: var(--steps-dash-border);
84
- } .steps__text_5fjrx {
84
+ } .steps__text_yj7ed {
85
85
  font-size: 16px;
86
86
  line-height: 24px;
87
87
  font-weight: 400;
@@ -91,19 +91,19 @@
91
91
  color: var(--color-light-text-primary);
92
92
  border-radius: var(--gap-xs);
93
93
  height: min-content
94
- } .steps__text_5fjrx.steps__interactive_5fjrx:not(.steps__disabled_5fjrx):hover {
94
+ } .steps__text_yj7ed.steps__interactive_yj7ed:not(.steps__disabled_yj7ed):hover {
95
95
  background: var(--color-light-bg-primary-inverted-alpha-7);
96
- } .steps__text_5fjrx.steps__interactive_5fjrx:not(.steps__disabled_5fjrx):active {
96
+ } .steps__text_yj7ed.steps__interactive_yj7ed:not(.steps__disabled_yj7ed):active {
97
97
  background: var(--color-light-bg-primary-inverted-alpha-15);
98
- } .steps__focused_5fjrx {
98
+ } .steps__focused_yj7ed {
99
99
  outline: var(--gap-3xs) solid var(--focus-color);
100
100
  outline-offset: var(--gap-3xs);
101
- } .steps__selected_5fjrx .steps__text_5fjrx {
101
+ } .steps__selected_yj7ed .steps__text_yj7ed {
102
102
  color: var(--color-light-graphic-primary);
103
- } .steps__selected_5fjrx .steps__option_5fjrx {
103
+ } .steps__selected_yj7ed .steps__option_yj7ed {
104
104
  color: var(--color-light-graphic-primary-inverted);
105
105
  background: var(--color-light-graphic-primary);
106
- } .steps__checkbox_5fjrx {
106
+ } .steps__checkbox_yj7ed {
107
107
  display: flex;
108
108
  justify-content: center;
109
109
  align-items: center;
@@ -111,18 +111,18 @@
111
111
  width: 20px;
112
112
  height: 20px;
113
113
  border: 2px solid var(--color-light-graphic-quaternary);
114
- } .steps__dot_5fjrx {
114
+ } .steps__dot_yj7ed {
115
115
  width: 10px;
116
116
  height: 10px;
117
117
  border-radius: var(--border-radius-circle);
118
118
  background: var(--color-light-graphic-quaternary);
119
- } .steps__selected_5fjrx .steps__checkbox_5fjrx {
119
+ } .steps__selected_yj7ed .steps__checkbox_yj7ed {
120
120
  border: 2px solid var(--color-light-graphic-primary)
121
- } .steps__selected_5fjrx .steps__checkbox_5fjrx .steps__dot_5fjrx {
121
+ } .steps__selected_yj7ed .steps__checkbox_yj7ed .steps__dot_yj7ed {
122
122
  background: var(--color-light-graphic-primary);
123
- } .steps__option_5fjrx:not(.steps__error_5fjrx).steps__unordered_5fjrx {
123
+ } .steps__option_yj7ed:not(.steps__error_yj7ed).steps__unordered_yj7ed {
124
124
  background: unset;
125
- } .steps__completedIndicator_5fjrx > [class*='positive'] {
125
+ } .steps__completedIndicator_yj7ed > [class*='positive'] {
126
126
  color: var(--steps-option-svg-color);
127
127
  background-color: var(--steps-option-svg-color);
128
128
  }
package/esm/components/step-indicator/Component.js CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import cn from 'classnames';
3
3
  import { Badge } from '@alfalab/core-components-badge/esm';
4
4
 
5
- var styles = {"component":"steps__component_14mfc"};
5
+ var styles = {"component":"steps__component_ol3rw"};
6
6
  require('./index.css')
7
7
 
8
8
  var StepIndicator = function (_a) {
package/esm/components/step-indicator/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1ch7o */
2
- .steps__component_14mfc {
1
+ /* hash: vggs8 */
2
+ .steps__component_ol3rw {
3
3
  padding: 0;
4
4
  }
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1pi6i */
1
+ /* hash: 1456s */
2
2
  :root {
3
3
  } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
4
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -14,11 +14,11 @@
14
14
  } :root {
15
15
  } :root {
16
16
  } :root {
17
- } .steps__component_1hggi {
17
+ } .steps__component_6608t {
18
18
  display: flex;
19
19
  align-items: center;
20
20
  flex-direction: row
21
- } .steps__component_1hggi.steps__vertical_1hggi {
21
+ } .steps__component_6608t.steps__vertical_6608t {
22
22
  flex-direction: column;
23
23
  align-items: flex-start;
24
24
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1pi6i */
1
+ /* hash: 1456s */
2
2
  :root {
3
3
  } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
4
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -14,11 +14,11 @@
14
14
  } :root {
15
15
  } :root {
16
16
  } :root {
17
- } .steps__component_1hggi {
17
+ } .steps__component_6608t {
18
18
  display: flex;
19
19
  align-items: center;
20
20
  flex-direction: row
21
- } .steps__component_1hggi.steps__vertical_1hggi {
21
+ } .steps__component_6608t.steps__vertical_6608t {
22
22
  flex-direction: column;
23
23
  align-items: flex-start;
24
24
  }
package/modern/Component.js CHANGED
@@ -8,7 +8,7 @@ import '@alfalab/icons-glyph/ExclamationCircleMIcon';
8
8
  import './components/step-indicator/Component.js';
9
9
  import '@alfalab/core-components-badge/modern';
10
10
 
11
- const styles = {"component":"steps__component_1hggi","vertical":"steps__vertical_1hggi"};
11
+ const styles = {"component":"steps__component_6608t","vertical":"steps__vertical_6608t"};
12
12
  require('./index.css')
13
13
 
14
14
  const Steps = ({ className, children, defaultActiveStep = 1, activeStep: activeStepProp, isMarkCompletedSteps = true, isVerticalAlign = false, ordered = true, interactive = true, checkIsStepDisabled, checkIsStepError, checkIsStepWarning, checkIsStepWaiting, checkIsStepPositive, checkIsStepCustom, onChange, dataTestId, }) => {
package/modern/components/step/Component.js CHANGED
@@ -7,7 +7,7 @@ import { ExclamationCircleMIcon } from '@alfalab/icons-glyph/ExclamationCircleMI
7
7
  import { StepIndicator } from '../step-indicator/Component.js';
8
8
  import '@alfalab/core-components-badge/modern';
9
9
 
10
- const styles = {"step":"steps__step_5fjrx","vertical":"steps__vertical_5fjrx","interactive":"steps__interactive_5fjrx","disabled":"steps__disabled_5fjrx","text":"steps__text_5fjrx","indicator":"steps__indicator_5fjrx","option":"steps__option_5fjrx","dash":"steps__dash_5fjrx","completed":"steps__completed_5fjrx","focused":"steps__focused_5fjrx","selected":"steps__selected_5fjrx","checkbox":"steps__checkbox_5fjrx","dot":"steps__dot_5fjrx","error":"steps__error_5fjrx","unordered":"steps__unordered_5fjrx","completedIndicator":"steps__completedIndicator_5fjrx"};
10
+ const styles = {"step":"steps__step_yj7ed","vertical":"steps__vertical_yj7ed","interactive":"steps__interactive_yj7ed","disabled":"steps__disabled_yj7ed","text":"steps__text_yj7ed","indicator":"steps__indicator_yj7ed","option":"steps__option_yj7ed","dash":"steps__dash_yj7ed","completed":"steps__completed_yj7ed","focused":"steps__focused_yj7ed","selected":"steps__selected_yj7ed","checkbox":"steps__checkbox_yj7ed","dot":"steps__dot_yj7ed","error":"steps__error_yj7ed","unordered":"steps__unordered_yj7ed","completedIndicator":"steps__completedIndicator_yj7ed"};
11
11
  require('./index.css')
12
12
 
13
13
  const Step = ({ children, stepNumber, isSelected, disabled, ordered, isPositive, isError, isWarning, isWaiting, customStepIndicator, isStepCompleted, onClick, interactive, isVerticalAlign, isNotLastStep, }) => {
package/modern/components/step/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1k7af */
1
+ /* hash: j7y5q */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
4
  --color-light-border-link: #0072ef;
@@ -31,26 +31,26 @@
31
31
  } :root {
32
32
  --steps-option-svg-color: var(--color-light-graphic-positive);
33
33
  --steps-dash-border: 2px solid var(--color-light-graphic-positive);
34
- } .steps__step_5fjrx {
34
+ } .steps__step_yj7ed {
35
35
  display: flex;
36
36
  outline: none
37
- } .steps__step_5fjrx:not(.steps__vertical_5fjrx) {
37
+ } .steps__step_yj7ed:not(.steps__vertical_yj7ed) {
38
38
  align-items: center;
39
- } .steps__step_5fjrx.steps__interactive_5fjrx:not(.steps__disabled_5fjrx):hover {
39
+ } .steps__step_yj7ed.steps__interactive_yj7ed:not(.steps__disabled_yj7ed):hover {
40
40
  cursor: pointer;
41
- } .steps__step_5fjrx.steps__disabled_5fjrx:hover .steps__text_5fjrx {
41
+ } .steps__step_yj7ed.steps__disabled_yj7ed:hover .steps__text_yj7ed {
42
42
  background: unset;
43
- } .steps__step_5fjrx.steps__disabled_5fjrx .steps__indicator_5fjrx {
43
+ } .steps__step_yj7ed.steps__disabled_yj7ed .steps__indicator_yj7ed {
44
44
  cursor: unset;
45
- } .steps__indicator_5fjrx {
45
+ } .steps__indicator_yj7ed {
46
46
  cursor: pointer;
47
47
  display: flex;
48
48
  align-items: center;
49
49
  margin-right: var(--gap-2xs)
50
- } .steps__indicator_5fjrx.steps__vertical_5fjrx {
50
+ } .steps__indicator_yj7ed.steps__vertical_yj7ed {
51
51
  flex-direction: column;
52
52
  margin-right: var(--gap-xs);
53
- } .steps__option_5fjrx {
53
+ } .steps__option_yj7ed {
54
54
  font-size: 14px;
55
55
  line-height: 20px;
56
56
  font-weight: 700;
@@ -63,25 +63,25 @@
63
63
  min-width: 24px;
64
64
  height: 24px;
65
65
  border-radius: var(--border-radius-circle)
66
- } .steps__option_5fjrx.steps__vertical_5fjrx {
66
+ } .steps__option_yj7ed.steps__vertical_yj7ed {
67
67
  margin-top: var(--gap-xs);
68
- } .steps__dash_5fjrx {
68
+ } .steps__dash_yj7ed {
69
69
  flex: 1 1 auto;
70
70
  min-width: 24px;
71
71
  border-top: 2px solid var(--color-light-border-primary);
72
72
  margin-right: var(--gap-xs)
73
- } .steps__dash_5fjrx.steps__completed_5fjrx {
73
+ } .steps__dash_yj7ed.steps__completed_yj7ed {
74
74
  border-top: var(--steps-dash-border);
75
- } .steps__dash_5fjrx.steps__vertical_5fjrx {
75
+ } .steps__dash_yj7ed.steps__vertical_yj7ed {
76
76
  min-width: unset;
77
77
  min-height: 24px;
78
78
  margin-right: 0;
79
79
  margin-top: var(--gap-xs);
80
80
  border-left: 2px solid var(--color-light-border-primary);
81
81
  border-top: none;
82
- } .steps__dash_5fjrx.steps__completed_5fjrx.steps__vertical_5fjrx {
82
+ } .steps__dash_yj7ed.steps__completed_yj7ed.steps__vertical_yj7ed {
83
83
  border-left: var(--steps-dash-border);
84
- } .steps__text_5fjrx {
84
+ } .steps__text_yj7ed {
85
85
  font-size: 16px;
86
86
  line-height: 24px;
87
87
  font-weight: 400;
@@ -91,19 +91,19 @@
91
91
  color: var(--color-light-text-primary);
92
92
  border-radius: var(--gap-xs);
93
93
  height: min-content
94
- } .steps__text_5fjrx.steps__interactive_5fjrx:not(.steps__disabled_5fjrx):hover {
94
+ } .steps__text_yj7ed.steps__interactive_yj7ed:not(.steps__disabled_yj7ed):hover {
95
95
  background: var(--color-light-bg-primary-inverted-alpha-7);
96
- } .steps__text_5fjrx.steps__interactive_5fjrx:not(.steps__disabled_5fjrx):active {
96
+ } .steps__text_yj7ed.steps__interactive_yj7ed:not(.steps__disabled_yj7ed):active {
97
97
  background: var(--color-light-bg-primary-inverted-alpha-15);
98
- } .steps__focused_5fjrx {
98
+ } .steps__focused_yj7ed {
99
99
  outline: var(--gap-3xs) solid var(--focus-color);
100
100
  outline-offset: var(--gap-3xs);
101
- } .steps__selected_5fjrx .steps__text_5fjrx {
101
+ } .steps__selected_yj7ed .steps__text_yj7ed {
102
102
  color: var(--color-light-graphic-primary);
103
- } .steps__selected_5fjrx .steps__option_5fjrx {
103
+ } .steps__selected_yj7ed .steps__option_yj7ed {
104
104
  color: var(--color-light-graphic-primary-inverted);
105
105
  background: var(--color-light-graphic-primary);
106
- } .steps__checkbox_5fjrx {
106
+ } .steps__checkbox_yj7ed {
107
107
  display: flex;
108
108
  justify-content: center;
109
109
  align-items: center;
@@ -111,18 +111,18 @@
111
111
  width: 20px;
112
112
  height: 20px;
113
113
  border: 2px solid var(--color-light-graphic-quaternary);
114
- } .steps__dot_5fjrx {
114
+ } .steps__dot_yj7ed {
115
115
  width: 10px;
116
116
  height: 10px;
117
117
  border-radius: var(--border-radius-circle);
118
118
  background: var(--color-light-graphic-quaternary);
119
- } .steps__selected_5fjrx .steps__checkbox_5fjrx {
119
+ } .steps__selected_yj7ed .steps__checkbox_yj7ed {
120
120
  border: 2px solid var(--color-light-graphic-primary)
121
- } .steps__selected_5fjrx .steps__checkbox_5fjrx .steps__dot_5fjrx {
121
+ } .steps__selected_yj7ed .steps__checkbox_yj7ed .steps__dot_yj7ed {
122
122
  background: var(--color-light-graphic-primary);
123
- } .steps__option_5fjrx:not(.steps__error_5fjrx).steps__unordered_5fjrx {
123
+ } .steps__option_yj7ed:not(.steps__error_yj7ed).steps__unordered_yj7ed {
124
124
  background: unset;
125
- } .steps__completedIndicator_5fjrx > [class*='positive'] {
125
+ } .steps__completedIndicator_yj7ed > [class*='positive'] {
126
126
  color: var(--steps-option-svg-color);
127
127
  background-color: var(--steps-option-svg-color);
128
128
  }
package/modern/components/step-indicator/Component.js CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import cn from 'classnames';
3
3
  import { Badge } from '@alfalab/core-components-badge/modern';
4
4
 
5
- const styles = {"component":"steps__component_14mfc"};
5
+ const styles = {"component":"steps__component_ol3rw"};
6
6
  require('./index.css')
7
7
 
8
8
  const StepIndicator = ({ content, iconColor, className }) => (React.createElement(Badge, { size: 'l', view: 'icon', iconColor: iconColor, className: cn(styles.component, className), content: content }));
package/modern/components/step-indicator/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1ch7o */
2
- .steps__component_14mfc {
1
+ /* hash: vggs8 */
2
+ .steps__component_ol3rw {
3
3
  padding: 0;
4
4
  }
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 1pi6i */
1
+ /* hash: 1456s */
2
2
  :root {
3
3
  } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
4
4
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -14,11 +14,11 @@
14
14
  } :root {
15
15
  } :root {
16
16
  } :root {
17
- } .steps__component_1hggi {
17
+ } .steps__component_6608t {
18
18
  display: flex;
19
19
  align-items: center;
20
20
  flex-direction: row
21
- } .steps__component_1hggi.steps__vertical_1hggi {
21
+ } .steps__component_6608t.steps__vertical_6608t {
22
22
  flex-direction: column;
23
23
  align-items: flex-start;
24
24
  }
package/package.json CHANGED
@@ -1,14 +1,11 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-steps",
3
- "version": "1.2.0",
3
+ "version": "1.3.0",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "main": "index.js",
8
8
  "module": "./esm/index.js",
9
- "scripts": {
10
- "postinstall": "node -e \"if (require('fs').existsSync('./send-stats.js')){require('./send-stats.js')} \""
11
- },
12
9
  "publishConfig": {
13
10
  "access": "public",
14
11
  "directory": "dist"
@@ -17,7 +14,7 @@
17
14
  "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
18
15
  },
19
16
  "dependencies": {
20
- "@alfalab/core-components-badge": "^5.1.0",
17
+ "@alfalab/core-components-badge": "^5.2.0",
21
18
  "@alfalab/hooks": "^1.13.0",
22
19
  "@alfalab/icons-glyph": "^2.108.0",
23
20
  "classnames": "^2.3.1",
package/src/Component.tsx ADDED
@@ -0,0 +1,190 @@
1
+ import React, { ReactNode, useEffect, useState } from 'react';
2
+ import cn from 'classnames';
3
+
4
+ import { Step } from './components/step';
5
+ import { StepIndicatorProps } from './components/step-indicator';
6
+
7
+ import styles from './index.module.css';
8
+
9
+ export type StepsProps = {
10
+ /**
11
+ * Дополнительный класс
12
+ */
13
+ className?: string;
14
+
15
+ /**
16
+ * Дочерние элементы
17
+ */
18
+ children: ReactNode;
19
+
20
+ /**
21
+ * Активный шаг, указанный по умолчанию
22
+ * @default 1
23
+ */
24
+ defaultActiveStep?: number;
25
+
26
+ /**
27
+ * Активный шаг
28
+ */
29
+ activeStep?: number;
30
+
31
+ /**
32
+ * Управление возможностью отключения пометки пройденного шага
33
+ * @default true
34
+ */
35
+ isMarkCompletedSteps?: boolean;
36
+
37
+ /**
38
+ * Управление ориентацией компонента
39
+ * @default false
40
+ */
41
+ isVerticalAlign?: boolean;
42
+
43
+ /**
44
+ * Управление отображением номера шага
45
+ */
46
+ ordered?: boolean;
47
+
48
+ /**
49
+ * Включение / отключение интерактивности шагов
50
+ */
51
+ interactive?: boolean;
52
+
53
+ /**
54
+ * Кастомный метод для управления состоянием disabled шага и
55
+ * возможностью перехода на этот шаг
56
+ * @param stepNumber - номер шага
57
+ * @return Флаг состояния disabled
58
+ */
59
+ checkIsStepDisabled?: (stepNumber: number) => boolean;
60
+
61
+ /**
62
+ * Кастомный метод для управления состоянием шага error
63
+ * @param stepNumber - номер шага
64
+ * @return Флаг состояния error
65
+ */
66
+ checkIsStepError?: (stepNumber: number) => boolean;
67
+
68
+ /**
69
+ * Кастомный метод для управления состоянием шага warning
70
+ * @param stepNumber - номер шага
71
+ * @return Флаг состояния warning
72
+ */
73
+ checkIsStepWarning?: (stepNumber: number) => boolean;
74
+
75
+ /**
76
+ * Кастомный метод для управления состоянием шага waiting
77
+ * @param stepNumber - номер шага
78
+ * @return Флаг состояния waiting
79
+ */
80
+ checkIsStepWaiting?: (stepNumber: number) => boolean;
81
+
82
+ /**
83
+ * Кастомный метод для управления состоянием шага positive
84
+ * @param stepNumber - номер шага
85
+ * @return Флаг состояния positive
86
+ */
87
+ checkIsStepPositive?: (stepNumber: number) => boolean;
88
+
89
+ /**
90
+ * Кастомный метод для установки кастомного индикатора шага
91
+ * @param stepNumber - номер шага
92
+ * @return Объект StepIndicatorProps { className, content, iconColor } или null
93
+ */
94
+ checkIsStepCustom?: (stepNumber: number) => StepIndicatorProps | null;
95
+
96
+ /**
97
+ * Обработчик клика на шаг
98
+ * @param stepNumber - номер активного шага
99
+ */
100
+ onChange?: (stepNumber: number) => void;
101
+
102
+ /**
103
+ * Идентификатор для систем автоматизированного тестирования
104
+ */
105
+ dataTestId?: string;
106
+ };
107
+
108
+ export const Steps: React.FC<StepsProps> = ({
109
+ className,
110
+ children,
111
+ defaultActiveStep = 1,
112
+ activeStep: activeStepProp,
113
+ isMarkCompletedSteps = true,
114
+ isVerticalAlign = false,
115
+ ordered = true,
116
+ interactive = true,
117
+ checkIsStepDisabled,
118
+ checkIsStepError,
119
+ checkIsStepWarning,
120
+ checkIsStepWaiting,
121
+ checkIsStepPositive,
122
+ checkIsStepCustom,
123
+ onChange,
124
+ dataTestId,
125
+ }) => {
126
+ const [activeStep, setActiveStep] = useState(activeStepProp || defaultActiveStep);
127
+
128
+ const stepsLength = React.Children.count(children);
129
+
130
+ useEffect(() => {
131
+ if (activeStepProp) {
132
+ setActiveStep(activeStepProp);
133
+ }
134
+ }, [activeStepProp]);
135
+
136
+ const handleStepClick = (stepNumber: number) => {
137
+ setActiveStep(stepNumber);
138
+
139
+ if (onChange) {
140
+ onChange(stepNumber);
141
+ }
142
+ };
143
+
144
+ if (!stepsLength) return null;
145
+
146
+ return (
147
+ <div
148
+ className={cn(className, styles.component, {
149
+ [styles.vertical]: isVerticalAlign,
150
+ })}
151
+ data-test-id={dataTestId}
152
+ >
153
+ {React.Children.map(children, (step, index) => {
154
+ const stepNumber = index + 1;
155
+ const isSelected = stepNumber === activeStep;
156
+ const isStepCompleted = isMarkCompletedSteps && stepNumber < activeStep;
157
+ const disabled = checkIsStepDisabled ? checkIsStepDisabled(stepNumber) : false;
158
+ const isPositive = checkIsStepPositive ? checkIsStepPositive(stepNumber) : false;
159
+ const isError = checkIsStepError ? checkIsStepError(stepNumber) : false;
160
+ const isWarning = checkIsStepWarning ? checkIsStepWarning(stepNumber) : false;
161
+ const isWaiting = checkIsStepWaiting ? checkIsStepWaiting(stepNumber) : false;
162
+ const customStepIndicator = checkIsStepCustom && checkIsStepCustom(stepNumber);
163
+ const isNotLastStep = stepsLength !== stepNumber;
164
+ const isInteractive = !disabled && interactive;
165
+
166
+ return (
167
+ <Step
168
+ stepNumber={stepNumber}
169
+ isSelected={isSelected}
170
+ isStepCompleted={isStepCompleted}
171
+ disabled={disabled}
172
+ isPositive={isPositive}
173
+ isError={isError}
174
+ isWarning={isWarning}
175
+ isWaiting={isWaiting}
176
+ customStepIndicator={customStepIndicator}
177
+ onClick={handleStepClick}
178
+ ordered={ordered}
179
+ interactive={isInteractive}
180
+ isVerticalAlign={isVerticalAlign}
181
+ isNotLastStep={isNotLastStep}
182
+ key={stepNumber}
183
+ >
184
+ {step}
185
+ </Step>
186
+ );
187
+ })}
188
+ </div>
189
+ );
190
+ };
package/src/components/step/Component.tsx ADDED
@@ -0,0 +1,222 @@
1
+ import React, { ReactNode, useRef } from 'react';
2
+ import cn from 'classnames';
3
+
4
+ import { useFocus } from '@alfalab/hooks';
5
+ import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';
6
+ import { ClockMIcon } from '@alfalab/icons-glyph/ClockMIcon';
7
+ import { ExclamationCircleMIcon } from '@alfalab/icons-glyph/ExclamationCircleMIcon';
8
+
9
+ import { StepIndicator, StepIndicatorProps } from '../step-indicator';
10
+
11
+ import styles from './index.module.css';
12
+
13
+ export type StepProps = {
14
+ /**
15
+ * Название шага
16
+ */
17
+ children: ReactNode;
18
+
19
+ /**
20
+ * Номер шага
21
+ */
22
+ stepNumber: number;
23
+
24
+ /**
25
+ * Маркер того, что текущий шаг выбран
26
+ */
27
+ isSelected: boolean;
28
+
29
+ /**
30
+ * Маркер того, что текущий шаг доступен для клика
31
+ */
32
+ disabled: boolean;
33
+
34
+ /**
35
+ * Управление отображением номера шага
36
+ */
37
+ ordered?: boolean;
38
+
39
+ /**
40
+ * Включение / отключение интерактивности шагов
41
+ */
42
+ interactive?: boolean;
43
+
44
+ /**
45
+ * Маркер того, что текущий шаг находится в состоянии "Positive"
46
+ */
47
+ isPositive: boolean;
48
+
49
+ /**
50
+ * Маркер того, что текущий шаг находится в состоянии "Error"
51
+ */
52
+ isError: boolean;
53
+
54
+ /**
55
+ * Маркер того, что текущий шаг находится в состоянии "Warning"
56
+ */
57
+ isWarning: boolean;
58
+
59
+ /**
60
+ * Маркер того, что текущий шаг находится в состоянии "Waiting"
61
+ */
62
+ isWaiting: boolean;
63
+
64
+ /**
65
+ * Маркер того, что текущий шаг нужно пометить как завершенный
66
+ */
67
+ isStepCompleted: boolean;
68
+
69
+ /**
70
+ * Свойства кастомного индикатора текущего шага
71
+ */
72
+ customStepIndicator?: StepIndicatorProps | null;
73
+
74
+ /**
75
+ * Управление ориентацией компонента
76
+ * @default false
77
+ */
78
+ isVerticalAlign?: boolean;
79
+
80
+ /**
81
+ * Указывает, является ли текущий шаг последним в списке
82
+ */
83
+ isNotLastStep?: boolean;
84
+
85
+ /**
86
+ * Обработчик нажатия на текущей шаг
87
+ * @param stepNumber - номер шага
88
+ */
89
+ onClick: (stepNumber: number) => void;
90
+ };
91
+
92
+ export const Step: React.FC<StepProps> = ({
93
+ children,
94
+ stepNumber,
95
+ isSelected,
96
+ disabled,
97
+ ordered,
98
+ isPositive,
99
+ isError,
100
+ isWarning,
101
+ isWaiting,
102
+ customStepIndicator,
103
+ isStepCompleted,
104
+ onClick,
105
+ interactive,
106
+ isVerticalAlign,
107
+ isNotLastStep,
108
+ }) => {
109
+ const stepRef = useRef<HTMLDivElement>(null);
110
+
111
+ const [focused] = useFocus(stepRef, 'keyboard');
112
+
113
+ const handleButtonClick = () => {
114
+ if (!disabled && interactive && onClick) {
115
+ onClick(stepNumber);
116
+ }
117
+ };
118
+
119
+ const handleTextClick = (e: React.MouseEvent<HTMLElement>) => {
120
+ if (!interactive) {
121
+ e.stopPropagation();
122
+ }
123
+ };
124
+
125
+ const handleKeyDown = (event: React.KeyboardEvent) => {
126
+ if (event.key === 'Enter') {
127
+ handleButtonClick();
128
+ }
129
+ };
130
+
131
+ const getStepIndicator = () => {
132
+ if (customStepIndicator) {
133
+ return <StepIndicator {...customStepIndicator} />;
134
+ }
135
+ if (isError) {
136
+ return <StepIndicator iconColor='negative' content={<ExclamationCircleMIcon />} />;
137
+ }
138
+ if (isWarning) {
139
+ return <StepIndicator iconColor='attention' content={<ExclamationCircleMIcon />} />;
140
+ }
141
+ if (isWaiting) {
142
+ return <StepIndicator iconColor='secondary' content={<ClockMIcon />} />;
143
+ }
144
+ if (isPositive) {
145
+ return <StepIndicator iconColor='positive' content={<CheckmarkCircleMIcon />} />;
146
+ }
147
+ if (isStepCompleted) {
148
+ return (
149
+ <StepIndicator
150
+ iconColor='positive'
151
+ content={<CheckmarkCircleMIcon />}
152
+ className={styles.completedIndicator}
153
+ />
154
+ );
155
+ }
156
+ if (!ordered) {
157
+ return (
158
+ <div className={styles.checkbox}>
159
+ <span className={styles.dot} />
160
+ </div>
161
+ );
162
+ }
163
+
164
+ return stepNumber;
165
+ };
166
+
167
+ const renderDash = () => (
168
+ <div
169
+ className={cn(styles.dash, {
170
+ [styles.vertical]: isVerticalAlign,
171
+ [styles.completed]: isStepCompleted,
172
+ })}
173
+ />
174
+ );
175
+
176
+ return (
177
+ <div
178
+ role='button'
179
+ tabIndex={0}
180
+ ref={stepRef}
181
+ className={cn(styles.step, {
182
+ [styles.completed]: isStepCompleted,
183
+ [styles.error]: isError,
184
+ [styles.selected]: isSelected,
185
+ [styles.disabled]: disabled,
186
+ [styles.focused]: focused,
187
+ [styles.vertical]: isVerticalAlign,
188
+ [styles.interactive]: interactive,
189
+ })}
190
+ onClick={handleButtonClick}
191
+ onKeyDown={handleKeyDown}
192
+ >
193
+ <div
194
+ className={cn(styles.indicator, {
195
+ [styles.vertical]: isVerticalAlign,
196
+ [styles.interactive]: interactive,
197
+ })}
198
+ >
199
+ <div
200
+ className={cn(styles.option, {
201
+ [styles.unordered]: !ordered,
202
+ [styles.vertical]: isVerticalAlign,
203
+ [styles.error]: isError,
204
+ })}
205
+ >
206
+ {getStepIndicator()}
207
+ </div>
208
+ {isNotLastStep && isVerticalAlign && renderDash()}
209
+ </div>
210
+ {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
211
+ <div
212
+ className={cn(styles.text, {
213
+ [styles.interactive]: interactive,
214
+ })}
215
+ onClick={handleTextClick}
216
+ >
217
+ {children}
218
+ </div>
219
+ {isNotLastStep && !isVerticalAlign && renderDash()}
220
+ </div>
221
+ );
222
+ };
package/src/components/step/index.module.css ADDED
@@ -0,0 +1,154 @@
1
+ @import '@alfalab/core-components-themes/src/default.css';
2
+
3
+ :root {
4
+ --steps-option-svg-color: var(--color-light-graphic-positive);
5
+ --steps-dash-border: 2px solid var(--color-light-graphic-positive);
6
+ }
7
+
8
+ .step {
9
+ display: flex;
10
+ outline: none;
11
+
12
+ &:not(.vertical) {
13
+ align-items: center;
14
+ }
15
+ }
16
+
17
+ .step.interactive:not(.disabled):hover {
18
+ cursor: pointer;
19
+ }
20
+
21
+ .step.disabled:hover {
22
+ & .text {
23
+ background: unset;
24
+ }
25
+ }
26
+
27
+ .step.disabled {
28
+ & .indicator {
29
+ cursor: unset;
30
+ }
31
+ }
32
+
33
+ .indicator {
34
+ cursor: pointer;
35
+ display: flex;
36
+ align-items: center;
37
+ margin-right: var(--gap-2xs);
38
+
39
+ &.vertical {
40
+ flex-direction: column;
41
+ margin-right: var(--gap-xs);
42
+ }
43
+ }
44
+
45
+ .option {
46
+ @mixin accent_primary_small;
47
+
48
+ display: flex;
49
+ align-items: center;
50
+ justify-content: center;
51
+ color: var(--color-light-graphic-primary);
52
+ background: var(--color-light-graphic-quaternary);
53
+ min-width: 24px;
54
+ height: 24px;
55
+ border-radius: var(--border-radius-circle);
56
+
57
+ &.vertical {
58
+ margin-top: var(--gap-xs);
59
+ }
60
+ }
61
+
62
+ .dash {
63
+ flex: 1 1 auto;
64
+ min-width: 24px;
65
+ border-top: 2px solid var(--color-light-border-primary);
66
+ margin-right: var(--gap-xs);
67
+
68
+ &.completed {
69
+ border-top: var(--steps-dash-border);
70
+ }
71
+
72
+ &.vertical {
73
+ min-width: unset;
74
+ min-height: 24px;
75
+ margin-right: 0;
76
+ margin-top: var(--gap-xs);
77
+ border-left: 2px solid var(--color-light-border-primary);
78
+ border-top: none;
79
+ }
80
+
81
+ &.completed.vertical {
82
+ border-left: var(--steps-dash-border);
83
+ }
84
+ }
85
+
86
+ .text {
87
+ @mixin paragraph_primary_medium;
88
+
89
+ transition: background 0.2s;
90
+ padding: var(--gap-xs);
91
+ color: var(--color-light-text-primary);
92
+ border-radius: var(--gap-xs);
93
+ height: min-content;
94
+
95
+ &.interactive:not(.disabled) {
96
+ &:hover {
97
+ background: var(--color-light-bg-primary-inverted-alpha-7);
98
+ }
99
+
100
+ &:active {
101
+ background: var(--color-light-bg-primary-inverted-alpha-15);
102
+ }
103
+ }
104
+ }
105
+
106
+ .focused {
107
+ outline: var(--gap-3xs) solid var(--focus-color);
108
+ outline-offset: var(--gap-3xs);
109
+ }
110
+
111
+ .selected {
112
+ & .text {
113
+ color: var(--color-light-graphic-primary);
114
+ }
115
+
116
+ & .option {
117
+ color: var(--color-light-graphic-primary-inverted);
118
+ background: var(--color-light-graphic-primary);
119
+ }
120
+ }
121
+
122
+ .checkbox {
123
+ display: flex;
124
+ justify-content: center;
125
+ align-items: center;
126
+ border-radius: var(--border-radius-circle);
127
+ width: 20px;
128
+ height: 20px;
129
+ border: 2px solid var(--color-light-graphic-quaternary);
130
+ }
131
+
132
+ .dot {
133
+ width: 10px;
134
+ height: 10px;
135
+ border-radius: var(--border-radius-circle);
136
+ background: var(--color-light-graphic-quaternary);
137
+ }
138
+
139
+ .selected .checkbox {
140
+ border: 2px solid var(--color-light-graphic-primary);
141
+
142
+ & .dot {
143
+ background: var(--color-light-graphic-primary);
144
+ }
145
+ }
146
+
147
+ .option:not(.error).unordered {
148
+ background: unset;
149
+ }
150
+
151
+ .completedIndicator > [class*='positive'] {
152
+ color: var(--steps-option-svg-color);
153
+ background-color: var(--steps-option-svg-color);
154
+ }
package/src/components/step/index.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './Component';
package/src/components/step-indicator/Component.tsx ADDED
@@ -0,0 +1,18 @@
1
+ import React from 'react';
2
+ import cn from 'classnames';
3
+
4
+ import { Badge, BadgeProps } from '@alfalab/core-components-badge';
5
+
6
+ import styles from './index.module.css';
7
+
8
+ export type StepIndicatorProps = Pick<BadgeProps, 'content' | 'iconColor' | 'className'>;
9
+
10
+ export const StepIndicator: React.FC<StepIndicatorProps> = ({ content, iconColor, className }) => (
11
+ <Badge
12
+ size='l'
13
+ view='icon'
14
+ iconColor={iconColor}
15
+ className={cn(styles.component, className)}
16
+ content={content}
17
+ />
18
+ );
package/src/components/step-indicator/index.module.css ADDED
@@ -0,0 +1,3 @@
1
+ .component {
2
+ padding: 0;
3
+ }
package/src/components/step-indicator/index.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './Component';
package/src/index.module.css ADDED
@@ -0,0 +1,12 @@
1
+ @import '@alfalab/core-components-themes/src/default.css';
2
+
3
+ .component {
4
+ display: flex;
5
+ align-items: center;
6
+ flex-direction: row;
7
+
8
+ &.vertical {
9
+ flex-direction: column;
10
+ align-items: flex-start;
11
+ }
12
+ }
package/src/index.ts ADDED
@@ -0,0 +1 @@
1
+ export * from './Component';
package/send-stats.js DELETED
@@ -1,82 +0,0 @@
1
- const http = require('http');
2
- const fs = require('fs');
3
- const { promisify } = require('util');
4
- const path = require('path');
5
-
6
- const readFile = promisify(fs.readFile);
7
-
8
- async function main() {
9
- const remoteHost = process.env.NIS_HOST || 'digital';
10
- const remotePort = process.env.NIS_PORT || 80;
11
- const remotePath = process.env.NIS_PATH || '/npm-install-stats/api/install-stats';
12
-
13
- try {
14
- const [_, node, os, arch] =
15
- /node\/v(\d+\.\d+\.\d+) (\w+) (\w+)/.exec(process.env.npm_config_user_agent) || [];
16
- const [__, npm] = /npm\/(\d+\.\d+\.\d+)/.exec(process.env.npm_config_user_agent) || [];
17
- const [___, yarn] = /yarn\/(\d+\.\d+\.\d+)/.exec(process.env.npm_config_user_agent) || [];
18
-
19
- let ownPackageJson, packageJson;
20
-
21
- try {
22
- const result = await Promise.all([
23
- readFile(path.join(process.cwd(), 'package.json'), 'utf-8'),
24
- readFile(path.join(process.cwd(), '../../../package.json'), 'utf-8'),
25
- ]);
26
-
27
- ownPackageJson = JSON.parse(result[0]);
28
- packageJson = JSON.parse(result[1]);
29
- } catch (err) {
30
- ownPackageJson = '';
31
- packageJson = '';
32
- }
33
-
34
- const data = {
35
- node,
36
- npm,
37
- yarn,
38
- os,
39
- arch,
40
- ownPackageJson: JSON.stringify(ownPackageJson),
41
- packageJson: JSON.stringify(packageJson),
42
- };
43
-
44
- const body = JSON.stringify(data);
45
-
46
- const options = {
47
- host: remoteHost,
48
- port: remotePort,
49
- path: remotePath,
50
- method: 'POST',
51
- headers: {
52
- 'Content-Type': 'application/json',
53
- 'Content-Length': body.length,
54
- },
55
- };
56
-
57
- return new Promise((resolve, reject) => {
58
- const req = http.request(options, (res) => {
59
- res.on('end', () => {
60
- resolve();
61
- });
62
- });
63
-
64
- req.on('error', () => {
65
- reject();
66
- });
67
-
68
- req.write(body);
69
- req.end();
70
- });
71
- } catch (error) {
72
- throw error;
73
- }
74
- }
75
-
76
- main()
77
- .then(() => {
78
- process.exit(0);
79
- })
80
- .catch(() => {
81
- process.exit(0);
82
- });