@alfalab/core-components-steps 1.2.1 → 1.3.1

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 +32 -32
  4. package/components/step-indicator/Component.js +1 -1
  5. package/components/step-indicator/index.css +2 -2
  6. package/cssm/components/step/index.module.css +6 -6
  7. package/esm/Component.js +1 -1
  8. package/esm/components/step/Component.js +1 -1
  9. package/esm/components/step/index.css +32 -32
  10. package/esm/components/step-indicator/Component.js +1 -1
  11. package/esm/components/step-indicator/index.css +2 -2
  12. package/esm/index.css +3 -3
  13. package/index.css +3 -3
  14. package/modern/Component.js +1 -1
  15. package/modern/components/step/Component.js +1 -1
  16. package/modern/components/step/index.css +32 -32
  17. package/modern/components/step-indicator/Component.js +1 -1
  18. package/modern/components/step-indicator/index.css +2 -2
  19. package/modern/index.css +3 -3
  20. package/package.json +2 -2
  21. package/src/Component.tsx +190 -0
  22. package/src/components/step/Component.tsx +222 -0
  23. package/src/components/step/index.module.css +154 -0
  24. package/src/components/step/index.ts +1 -0
  25. package/src/components/step-indicator/Component.tsx +18 -0
  26. package/src/components/step-indicator/index.module.css +3 -0
  27. package/src/components/step-indicator/index.ts +1 -0
  28. package/src/index.module.css +12 -0
  29. package/src/index.ts +1 -0
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_1f08b","vertical":"steps__vertical_1f08b"};
21
+ var styles = {"component":"steps__component_1xk4u","vertical":"steps__vertical_1xk4u"};
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_a1mj1","vertical":"steps__vertical_a1mj1","interactive":"steps__interactive_a1mj1","disabled":"steps__disabled_a1mj1","text":"steps__text_a1mj1","indicator":"steps__indicator_a1mj1","option":"steps__option_a1mj1","dash":"steps__dash_a1mj1","completed":"steps__completed_a1mj1","focused":"steps__focused_a1mj1","selected":"steps__selected_a1mj1","checkbox":"steps__checkbox_a1mj1","dot":"steps__dot_a1mj1","error":"steps__error_a1mj1","unordered":"steps__unordered_a1mj1","completedIndicator":"steps__completedIndicator_a1mj1"};
20
+ var styles = {"step":"steps__step_enyr3","vertical":"steps__vertical_enyr3","interactive":"steps__interactive_enyr3","disabled":"steps__disabled_enyr3","text":"steps__text_enyr3","indicator":"steps__indicator_enyr3","option":"steps__option_enyr3","dash":"steps__dash_enyr3","completed":"steps__completed_enyr3","focused":"steps__focused_enyr3","selected":"steps__selected_enyr3","checkbox":"steps__checkbox_enyr3","dot":"steps__dot_enyr3","error":"steps__error_enyr3","unordered":"steps__unordered_enyr3","completedIndicator":"steps__completedIndicator_enyr3"};
21
21
  require('./index.css')
22
22
 
23
23
  var Step = function (_a) {
package/components/step/index.css CHANGED
@@ -1,15 +1,15 @@
1
- /* hash: 1in2w */
1
+ /* hash: 18k6n */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
- --color-light-border-link: #0072ef;
5
- --color-light-border-primary: #dcdcdd;
6
- --color-light-graphic-positive: #2fc26e;
4
+ --color-light-border-link: #2288fa;
5
+ --color-light-border-primary: #d5d6dc;
6
+ --color-light-graphic-positive: #0cc44d;
7
7
  --color-light-graphic-primary: #0e0e0e;
8
8
  --color-light-graphic-primary-inverted: #fff;
9
- --color-light-graphic-quaternary: #dcdcdd;
9
+ --color-light-graphic-quaternary: #e7e8ec;
10
10
  --color-light-text-primary: #0e0e0e; /* 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 */
11
- --color-light-bg-primary-inverted-alpha-7: rgba(18, 18, 18, 0.07);
12
- --color-light-bg-primary-inverted-alpha-15: rgba(18, 18, 18, 0.15);
11
+ --color-light-bg-primary-inverted-alpha-7: rgba(14, 14, 14, 0.07);
12
+ --color-light-bg-primary-inverted-alpha-15: rgba(14, 14, 14, 0.15);
13
13
  } :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
14
  } :root {
15
15
  } :root {
@@ -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_a1mj1 {
34
+ } .steps__step_enyr3 {
35
35
  display: flex;
36
36
  outline: none
37
- } .steps__step_a1mj1:not(.steps__vertical_a1mj1) {
37
+ } .steps__step_enyr3:not(.steps__vertical_enyr3) {
38
38
  align-items: center;
39
- } .steps__step_a1mj1.steps__interactive_a1mj1:not(.steps__disabled_a1mj1):hover {
39
+ } .steps__step_enyr3.steps__interactive_enyr3:not(.steps__disabled_enyr3):hover {
40
40
  cursor: pointer;
41
- } .steps__step_a1mj1.steps__disabled_a1mj1:hover .steps__text_a1mj1 {
41
+ } .steps__step_enyr3.steps__disabled_enyr3:hover .steps__text_enyr3 {
42
42
  background: unset;
43
- } .steps__step_a1mj1.steps__disabled_a1mj1 .steps__indicator_a1mj1 {
43
+ } .steps__step_enyr3.steps__disabled_enyr3 .steps__indicator_enyr3 {
44
44
  cursor: unset;
45
- } .steps__indicator_a1mj1 {
45
+ } .steps__indicator_enyr3 {
46
46
  cursor: pointer;
47
47
  display: flex;
48
48
  align-items: center;
49
49
  margin-right: var(--gap-2xs)
50
- } .steps__indicator_a1mj1.steps__vertical_a1mj1 {
50
+ } .steps__indicator_enyr3.steps__vertical_enyr3 {
51
51
  flex-direction: column;
52
52
  margin-right: var(--gap-xs);
53
- } .steps__option_a1mj1 {
53
+ } .steps__option_enyr3 {
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_a1mj1.steps__vertical_a1mj1 {
66
+ } .steps__option_enyr3.steps__vertical_enyr3 {
67
67
  margin-top: var(--gap-xs);
68
- } .steps__dash_a1mj1 {
68
+ } .steps__dash_enyr3 {
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_a1mj1.steps__completed_a1mj1 {
73
+ } .steps__dash_enyr3.steps__completed_enyr3 {
74
74
  border-top: var(--steps-dash-border);
75
- } .steps__dash_a1mj1.steps__vertical_a1mj1 {
75
+ } .steps__dash_enyr3.steps__vertical_enyr3 {
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_a1mj1.steps__completed_a1mj1.steps__vertical_a1mj1 {
82
+ } .steps__dash_enyr3.steps__completed_enyr3.steps__vertical_enyr3 {
83
83
  border-left: var(--steps-dash-border);
84
- } .steps__text_a1mj1 {
84
+ } .steps__text_enyr3 {
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_a1mj1.steps__interactive_a1mj1:not(.steps__disabled_a1mj1):hover {
94
+ } .steps__text_enyr3.steps__interactive_enyr3:not(.steps__disabled_enyr3):hover {
95
95
  background: var(--color-light-bg-primary-inverted-alpha-7);
96
- } .steps__text_a1mj1.steps__interactive_a1mj1:not(.steps__disabled_a1mj1):active {
96
+ } .steps__text_enyr3.steps__interactive_enyr3:not(.steps__disabled_enyr3):active {
97
97
  background: var(--color-light-bg-primary-inverted-alpha-15);
98
- } .steps__focused_a1mj1 {
98
+ } .steps__focused_enyr3 {
99
99
  outline: var(--gap-3xs) solid var(--focus-color);
100
100
  outline-offset: var(--gap-3xs);
101
- } .steps__selected_a1mj1 .steps__text_a1mj1 {
101
+ } .steps__selected_enyr3 .steps__text_enyr3 {
102
102
  color: var(--color-light-graphic-primary);
103
- } .steps__selected_a1mj1 .steps__option_a1mj1 {
103
+ } .steps__selected_enyr3 .steps__option_enyr3 {
104
104
  color: var(--color-light-graphic-primary-inverted);
105
105
  background: var(--color-light-graphic-primary);
106
- } .steps__checkbox_a1mj1 {
106
+ } .steps__checkbox_enyr3 {
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_a1mj1 {
114
+ } .steps__dot_enyr3 {
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_a1mj1 .steps__checkbox_a1mj1 {
119
+ } .steps__selected_enyr3 .steps__checkbox_enyr3 {
120
120
  border: 2px solid var(--color-light-graphic-primary)
121
- } .steps__selected_a1mj1 .steps__checkbox_a1mj1 .steps__dot_a1mj1 {
121
+ } .steps__selected_enyr3 .steps__checkbox_enyr3 .steps__dot_enyr3 {
122
122
  background: var(--color-light-graphic-primary);
123
- } .steps__option_a1mj1:not(.steps__error_a1mj1).steps__unordered_a1mj1 {
123
+ } .steps__option_enyr3:not(.steps__error_enyr3).steps__unordered_enyr3 {
124
124
  background: unset;
125
- } .steps__completedIndicator_a1mj1 > [class*='positive'] {
125
+ } .steps__completedIndicator_enyr3 > [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_1gant"};
14
+ var styles = {"component":"steps__component_1duub"};
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: 1uvli */
2
- .steps__component_1gant {
1
+ /* hash: 1kspa */
2
+ .steps__component_1duub {
3
3
  padding: 0;
4
4
  }
package/cssm/components/step/index.module.css CHANGED
@@ -1,14 +1,14 @@
1
1
  :root {
2
2
  } /* deprecated */ :root {
3
- --color-light-border-link: #0072ef;
4
- --color-light-border-primary: #dcdcdd;
5
- --color-light-graphic-positive: #2fc26e;
3
+ --color-light-border-link: #2288fa;
4
+ --color-light-border-primary: #d5d6dc;
5
+ --color-light-graphic-positive: #0cc44d;
6
6
  --color-light-graphic-primary: #0e0e0e;
7
7
  --color-light-graphic-primary-inverted: #fff;
8
- --color-light-graphic-quaternary: #dcdcdd;
8
+ --color-light-graphic-quaternary: #e7e8ec;
9
9
  --color-light-text-primary: #0e0e0e; /* 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 */
10
- --color-light-bg-primary-inverted-alpha-7: rgba(18, 18, 18, 0.07);
11
- --color-light-bg-primary-inverted-alpha-15: rgba(18, 18, 18, 0.15);
10
+ --color-light-bg-primary-inverted-alpha-7: rgba(14, 14, 14, 0.07);
11
+ --color-light-bg-primary-inverted-alpha-15: rgba(14, 14, 14, 0.15);
12
12
  } :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 */
13
13
  } :root {
14
14
  } :root {
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_1f08b","vertical":"steps__vertical_1f08b"};
12
+ var styles = {"component":"steps__component_1xk4u","vertical":"steps__vertical_1xk4u"};
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_a1mj1","vertical":"steps__vertical_a1mj1","interactive":"steps__interactive_a1mj1","disabled":"steps__disabled_a1mj1","text":"steps__text_a1mj1","indicator":"steps__indicator_a1mj1","option":"steps__option_a1mj1","dash":"steps__dash_a1mj1","completed":"steps__completed_a1mj1","focused":"steps__focused_a1mj1","selected":"steps__selected_a1mj1","checkbox":"steps__checkbox_a1mj1","dot":"steps__dot_a1mj1","error":"steps__error_a1mj1","unordered":"steps__unordered_a1mj1","completedIndicator":"steps__completedIndicator_a1mj1"};
11
+ var styles = {"step":"steps__step_enyr3","vertical":"steps__vertical_enyr3","interactive":"steps__interactive_enyr3","disabled":"steps__disabled_enyr3","text":"steps__text_enyr3","indicator":"steps__indicator_enyr3","option":"steps__option_enyr3","dash":"steps__dash_enyr3","completed":"steps__completed_enyr3","focused":"steps__focused_enyr3","selected":"steps__selected_enyr3","checkbox":"steps__checkbox_enyr3","dot":"steps__dot_enyr3","error":"steps__error_enyr3","unordered":"steps__unordered_enyr3","completedIndicator":"steps__completedIndicator_enyr3"};
12
12
  require('./index.css')
13
13
 
14
14
  var Step = function (_a) {
package/esm/components/step/index.css CHANGED
@@ -1,15 +1,15 @@
1
- /* hash: 1in2w */
1
+ /* hash: 18k6n */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
- --color-light-border-link: #0072ef;
5
- --color-light-border-primary: #dcdcdd;
6
- --color-light-graphic-positive: #2fc26e;
4
+ --color-light-border-link: #2288fa;
5
+ --color-light-border-primary: #d5d6dc;
6
+ --color-light-graphic-positive: #0cc44d;
7
7
  --color-light-graphic-primary: #0e0e0e;
8
8
  --color-light-graphic-primary-inverted: #fff;
9
- --color-light-graphic-quaternary: #dcdcdd;
9
+ --color-light-graphic-quaternary: #e7e8ec;
10
10
  --color-light-text-primary: #0e0e0e; /* 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 */
11
- --color-light-bg-primary-inverted-alpha-7: rgba(18, 18, 18, 0.07);
12
- --color-light-bg-primary-inverted-alpha-15: rgba(18, 18, 18, 0.15);
11
+ --color-light-bg-primary-inverted-alpha-7: rgba(14, 14, 14, 0.07);
12
+ --color-light-bg-primary-inverted-alpha-15: rgba(14, 14, 14, 0.15);
13
13
  } :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
14
  } :root {
15
15
  } :root {
@@ -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_a1mj1 {
34
+ } .steps__step_enyr3 {
35
35
  display: flex;
36
36
  outline: none
37
- } .steps__step_a1mj1:not(.steps__vertical_a1mj1) {
37
+ } .steps__step_enyr3:not(.steps__vertical_enyr3) {
38
38
  align-items: center;
39
- } .steps__step_a1mj1.steps__interactive_a1mj1:not(.steps__disabled_a1mj1):hover {
39
+ } .steps__step_enyr3.steps__interactive_enyr3:not(.steps__disabled_enyr3):hover {
40
40
  cursor: pointer;
41
- } .steps__step_a1mj1.steps__disabled_a1mj1:hover .steps__text_a1mj1 {
41
+ } .steps__step_enyr3.steps__disabled_enyr3:hover .steps__text_enyr3 {
42
42
  background: unset;
43
- } .steps__step_a1mj1.steps__disabled_a1mj1 .steps__indicator_a1mj1 {
43
+ } .steps__step_enyr3.steps__disabled_enyr3 .steps__indicator_enyr3 {
44
44
  cursor: unset;
45
- } .steps__indicator_a1mj1 {
45
+ } .steps__indicator_enyr3 {
46
46
  cursor: pointer;
47
47
  display: flex;
48
48
  align-items: center;
49
49
  margin-right: var(--gap-2xs)
50
- } .steps__indicator_a1mj1.steps__vertical_a1mj1 {
50
+ } .steps__indicator_enyr3.steps__vertical_enyr3 {
51
51
  flex-direction: column;
52
52
  margin-right: var(--gap-xs);
53
- } .steps__option_a1mj1 {
53
+ } .steps__option_enyr3 {
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_a1mj1.steps__vertical_a1mj1 {
66
+ } .steps__option_enyr3.steps__vertical_enyr3 {
67
67
  margin-top: var(--gap-xs);
68
- } .steps__dash_a1mj1 {
68
+ } .steps__dash_enyr3 {
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_a1mj1.steps__completed_a1mj1 {
73
+ } .steps__dash_enyr3.steps__completed_enyr3 {
74
74
  border-top: var(--steps-dash-border);
75
- } .steps__dash_a1mj1.steps__vertical_a1mj1 {
75
+ } .steps__dash_enyr3.steps__vertical_enyr3 {
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_a1mj1.steps__completed_a1mj1.steps__vertical_a1mj1 {
82
+ } .steps__dash_enyr3.steps__completed_enyr3.steps__vertical_enyr3 {
83
83
  border-left: var(--steps-dash-border);
84
- } .steps__text_a1mj1 {
84
+ } .steps__text_enyr3 {
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_a1mj1.steps__interactive_a1mj1:not(.steps__disabled_a1mj1):hover {
94
+ } .steps__text_enyr3.steps__interactive_enyr3:not(.steps__disabled_enyr3):hover {
95
95
  background: var(--color-light-bg-primary-inverted-alpha-7);
96
- } .steps__text_a1mj1.steps__interactive_a1mj1:not(.steps__disabled_a1mj1):active {
96
+ } .steps__text_enyr3.steps__interactive_enyr3:not(.steps__disabled_enyr3):active {
97
97
  background: var(--color-light-bg-primary-inverted-alpha-15);
98
- } .steps__focused_a1mj1 {
98
+ } .steps__focused_enyr3 {
99
99
  outline: var(--gap-3xs) solid var(--focus-color);
100
100
  outline-offset: var(--gap-3xs);
101
- } .steps__selected_a1mj1 .steps__text_a1mj1 {
101
+ } .steps__selected_enyr3 .steps__text_enyr3 {
102
102
  color: var(--color-light-graphic-primary);
103
- } .steps__selected_a1mj1 .steps__option_a1mj1 {
103
+ } .steps__selected_enyr3 .steps__option_enyr3 {
104
104
  color: var(--color-light-graphic-primary-inverted);
105
105
  background: var(--color-light-graphic-primary);
106
- } .steps__checkbox_a1mj1 {
106
+ } .steps__checkbox_enyr3 {
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_a1mj1 {
114
+ } .steps__dot_enyr3 {
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_a1mj1 .steps__checkbox_a1mj1 {
119
+ } .steps__selected_enyr3 .steps__checkbox_enyr3 {
120
120
  border: 2px solid var(--color-light-graphic-primary)
121
- } .steps__selected_a1mj1 .steps__checkbox_a1mj1 .steps__dot_a1mj1 {
121
+ } .steps__selected_enyr3 .steps__checkbox_enyr3 .steps__dot_enyr3 {
122
122
  background: var(--color-light-graphic-primary);
123
- } .steps__option_a1mj1:not(.steps__error_a1mj1).steps__unordered_a1mj1 {
123
+ } .steps__option_enyr3:not(.steps__error_enyr3).steps__unordered_enyr3 {
124
124
  background: unset;
125
- } .steps__completedIndicator_a1mj1 > [class*='positive'] {
125
+ } .steps__completedIndicator_enyr3 > [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_1gant"};
5
+ var styles = {"component":"steps__component_1duub"};
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: 1uvli */
2
- .steps__component_1gant {
1
+ /* hash: 1kspa */
2
+ .steps__component_1duub {
3
3
  padding: 0;
4
4
  }
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 3g6be */
1
+ /* hash: 1llu0 */
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_1f08b {
17
+ } .steps__component_1xk4u {
18
18
  display: flex;
19
19
  align-items: center;
20
20
  flex-direction: row
21
- } .steps__component_1f08b.steps__vertical_1f08b {
21
+ } .steps__component_1xk4u.steps__vertical_1xk4u {
22
22
  flex-direction: column;
23
23
  align-items: flex-start;
24
24
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 3g6be */
1
+ /* hash: 1llu0 */
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_1f08b {
17
+ } .steps__component_1xk4u {
18
18
  display: flex;
19
19
  align-items: center;
20
20
  flex-direction: row
21
- } .steps__component_1f08b.steps__vertical_1f08b {
21
+ } .steps__component_1xk4u.steps__vertical_1xk4u {
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_1f08b","vertical":"steps__vertical_1f08b"};
11
+ const styles = {"component":"steps__component_1xk4u","vertical":"steps__vertical_1xk4u"};
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_a1mj1","vertical":"steps__vertical_a1mj1","interactive":"steps__interactive_a1mj1","disabled":"steps__disabled_a1mj1","text":"steps__text_a1mj1","indicator":"steps__indicator_a1mj1","option":"steps__option_a1mj1","dash":"steps__dash_a1mj1","completed":"steps__completed_a1mj1","focused":"steps__focused_a1mj1","selected":"steps__selected_a1mj1","checkbox":"steps__checkbox_a1mj1","dot":"steps__dot_a1mj1","error":"steps__error_a1mj1","unordered":"steps__unordered_a1mj1","completedIndicator":"steps__completedIndicator_a1mj1"};
10
+ const styles = {"step":"steps__step_enyr3","vertical":"steps__vertical_enyr3","interactive":"steps__interactive_enyr3","disabled":"steps__disabled_enyr3","text":"steps__text_enyr3","indicator":"steps__indicator_enyr3","option":"steps__option_enyr3","dash":"steps__dash_enyr3","completed":"steps__completed_enyr3","focused":"steps__focused_enyr3","selected":"steps__selected_enyr3","checkbox":"steps__checkbox_enyr3","dot":"steps__dot_enyr3","error":"steps__error_enyr3","unordered":"steps__unordered_enyr3","completedIndicator":"steps__completedIndicator_enyr3"};
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,15 +1,15 @@
1
- /* hash: 1in2w */
1
+ /* hash: 18k6n */
2
2
  :root {
3
3
  } /* deprecated */ :root {
4
- --color-light-border-link: #0072ef;
5
- --color-light-border-primary: #dcdcdd;
6
- --color-light-graphic-positive: #2fc26e;
4
+ --color-light-border-link: #2288fa;
5
+ --color-light-border-primary: #d5d6dc;
6
+ --color-light-graphic-positive: #0cc44d;
7
7
  --color-light-graphic-primary: #0e0e0e;
8
8
  --color-light-graphic-primary-inverted: #fff;
9
- --color-light-graphic-quaternary: #dcdcdd;
9
+ --color-light-graphic-quaternary: #e7e8ec;
10
10
  --color-light-text-primary: #0e0e0e; /* 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 */
11
- --color-light-bg-primary-inverted-alpha-7: rgba(18, 18, 18, 0.07);
12
- --color-light-bg-primary-inverted-alpha-15: rgba(18, 18, 18, 0.15);
11
+ --color-light-bg-primary-inverted-alpha-7: rgba(14, 14, 14, 0.07);
12
+ --color-light-bg-primary-inverted-alpha-15: rgba(14, 14, 14, 0.15);
13
13
  } :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
14
  } :root {
15
15
  } :root {
@@ -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_a1mj1 {
34
+ } .steps__step_enyr3 {
35
35
  display: flex;
36
36
  outline: none
37
- } .steps__step_a1mj1:not(.steps__vertical_a1mj1) {
37
+ } .steps__step_enyr3:not(.steps__vertical_enyr3) {
38
38
  align-items: center;
39
- } .steps__step_a1mj1.steps__interactive_a1mj1:not(.steps__disabled_a1mj1):hover {
39
+ } .steps__step_enyr3.steps__interactive_enyr3:not(.steps__disabled_enyr3):hover {
40
40
  cursor: pointer;
41
- } .steps__step_a1mj1.steps__disabled_a1mj1:hover .steps__text_a1mj1 {
41
+ } .steps__step_enyr3.steps__disabled_enyr3:hover .steps__text_enyr3 {
42
42
  background: unset;
43
- } .steps__step_a1mj1.steps__disabled_a1mj1 .steps__indicator_a1mj1 {
43
+ } .steps__step_enyr3.steps__disabled_enyr3 .steps__indicator_enyr3 {
44
44
  cursor: unset;
45
- } .steps__indicator_a1mj1 {
45
+ } .steps__indicator_enyr3 {
46
46
  cursor: pointer;
47
47
  display: flex;
48
48
  align-items: center;
49
49
  margin-right: var(--gap-2xs)
50
- } .steps__indicator_a1mj1.steps__vertical_a1mj1 {
50
+ } .steps__indicator_enyr3.steps__vertical_enyr3 {
51
51
  flex-direction: column;
52
52
  margin-right: var(--gap-xs);
53
- } .steps__option_a1mj1 {
53
+ } .steps__option_enyr3 {
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_a1mj1.steps__vertical_a1mj1 {
66
+ } .steps__option_enyr3.steps__vertical_enyr3 {
67
67
  margin-top: var(--gap-xs);
68
- } .steps__dash_a1mj1 {
68
+ } .steps__dash_enyr3 {
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_a1mj1.steps__completed_a1mj1 {
73
+ } .steps__dash_enyr3.steps__completed_enyr3 {
74
74
  border-top: var(--steps-dash-border);
75
- } .steps__dash_a1mj1.steps__vertical_a1mj1 {
75
+ } .steps__dash_enyr3.steps__vertical_enyr3 {
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_a1mj1.steps__completed_a1mj1.steps__vertical_a1mj1 {
82
+ } .steps__dash_enyr3.steps__completed_enyr3.steps__vertical_enyr3 {
83
83
  border-left: var(--steps-dash-border);
84
- } .steps__text_a1mj1 {
84
+ } .steps__text_enyr3 {
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_a1mj1.steps__interactive_a1mj1:not(.steps__disabled_a1mj1):hover {
94
+ } .steps__text_enyr3.steps__interactive_enyr3:not(.steps__disabled_enyr3):hover {
95
95
  background: var(--color-light-bg-primary-inverted-alpha-7);
96
- } .steps__text_a1mj1.steps__interactive_a1mj1:not(.steps__disabled_a1mj1):active {
96
+ } .steps__text_enyr3.steps__interactive_enyr3:not(.steps__disabled_enyr3):active {
97
97
  background: var(--color-light-bg-primary-inverted-alpha-15);
98
- } .steps__focused_a1mj1 {
98
+ } .steps__focused_enyr3 {
99
99
  outline: var(--gap-3xs) solid var(--focus-color);
100
100
  outline-offset: var(--gap-3xs);
101
- } .steps__selected_a1mj1 .steps__text_a1mj1 {
101
+ } .steps__selected_enyr3 .steps__text_enyr3 {
102
102
  color: var(--color-light-graphic-primary);
103
- } .steps__selected_a1mj1 .steps__option_a1mj1 {
103
+ } .steps__selected_enyr3 .steps__option_enyr3 {
104
104
  color: var(--color-light-graphic-primary-inverted);
105
105
  background: var(--color-light-graphic-primary);
106
- } .steps__checkbox_a1mj1 {
106
+ } .steps__checkbox_enyr3 {
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_a1mj1 {
114
+ } .steps__dot_enyr3 {
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_a1mj1 .steps__checkbox_a1mj1 {
119
+ } .steps__selected_enyr3 .steps__checkbox_enyr3 {
120
120
  border: 2px solid var(--color-light-graphic-primary)
121
- } .steps__selected_a1mj1 .steps__checkbox_a1mj1 .steps__dot_a1mj1 {
121
+ } .steps__selected_enyr3 .steps__checkbox_enyr3 .steps__dot_enyr3 {
122
122
  background: var(--color-light-graphic-primary);
123
- } .steps__option_a1mj1:not(.steps__error_a1mj1).steps__unordered_a1mj1 {
123
+ } .steps__option_enyr3:not(.steps__error_enyr3).steps__unordered_enyr3 {
124
124
  background: unset;
125
- } .steps__completedIndicator_a1mj1 > [class*='positive'] {
125
+ } .steps__completedIndicator_enyr3 > [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_1gant"};
5
+ const styles = {"component":"steps__component_1duub"};
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: 1uvli */
2
- .steps__component_1gant {
1
+ /* hash: 1kspa */
2
+ .steps__component_1duub {
3
3
  padding: 0;
4
4
  }
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 3g6be */
1
+ /* hash: 1llu0 */
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_1f08b {
17
+ } .steps__component_1xk4u {
18
18
  display: flex;
19
19
  align-items: center;
20
20
  flex-direction: row
21
- } .steps__component_1f08b.steps__vertical_1f08b {
21
+ } .steps__component_1xk4u.steps__vertical_1xk4u {
22
22
  flex-direction: column;
23
23
  align-items: flex-start;
24
24
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-steps",
3
- "version": "1.2.1",
3
+ "version": "1.3.1",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -14,7 +14,7 @@
14
14
  "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
15
15
  },
16
16
  "dependencies": {
17
- "@alfalab/core-components-badge": "^5.1.1",
17
+ "@alfalab/core-components-badge": "^5.3.0",
18
18
  "@alfalab/hooks": "^1.13.0",
19
19
  "@alfalab/icons-glyph": "^2.108.0",
20
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';