@alfalab/core-components-steps 1.1.3 → 1.1.5

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 (20) hide show
  1. package/Component.js +1 -1
  2. package/components/step/Component.js +2 -2
  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/cssm/components/step/Component.js +1 -1
  7. package/esm/Component.js +1 -1
  8. package/esm/components/step/Component.js +2 -2
  9. package/esm/components/step/index.css +26 -26
  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 +2 -2
  16. package/modern/components/step/index.css +26 -26
  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 +3 -3
package/Component.js CHANGED
@@ -15,7 +15,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
15
15
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
16
16
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
17
17
 
18
- var styles = {"component":"steps__component_1qx39","vertical":"steps__vertical_1qx39"};
18
+ var styles = {"component":"steps__component_1cb0a","vertical":"steps__vertical_1cb0a"};
19
19
  require('./index.css')
20
20
 
21
21
  var Steps = function (_a) {
package/components/step/Component.js CHANGED
@@ -41,7 +41,7 @@ var __assign = function () {
41
41
  return __assign.apply(this, arguments);
42
42
  };
43
43
 
44
- var styles = {"step":"steps__step_1wzux","vertical":"steps__vertical_1wzux","interactive":"steps__interactive_1wzux","disabled":"steps__disabled_1wzux","text":"steps__text_1wzux","indicator":"steps__indicator_1wzux","option":"steps__option_1wzux","dash":"steps__dash_1wzux","completed":"steps__completed_1wzux","focused":"steps__focused_1wzux","selected":"steps__selected_1wzux","checkbox":"steps__checkbox_1wzux","dot":"steps__dot_1wzux","error":"steps__error_1wzux","unordered":"steps__unordered_1wzux","completedIndicator":"steps__completedIndicator_1wzux"};
44
+ var styles = {"step":"steps__step_1mmvm","vertical":"steps__vertical_1mmvm","interactive":"steps__interactive_1mmvm","disabled":"steps__disabled_1mmvm","text":"steps__text_1mmvm","indicator":"steps__indicator_1mmvm","option":"steps__option_1mmvm","dash":"steps__dash_1mmvm","completed":"steps__completed_1mmvm","focused":"steps__focused_1mmvm","selected":"steps__selected_1mmvm","checkbox":"steps__checkbox_1mmvm","dot":"steps__dot_1mmvm","error":"steps__error_1mmvm","unordered":"steps__unordered_1mmvm","completedIndicator":"steps__completedIndicator_1mmvm"};
45
45
  require('./index.css')
46
46
 
47
47
  var Step = function (_a) {
@@ -50,7 +50,7 @@ var Step = function (_a) {
50
50
  var stepRef = React.useRef(null);
51
51
  var focused = hooks.useFocus(stepRef, 'keyboard')[0];
52
52
  var handleButtonClick = function () {
53
- if (!disabled && onClick) {
53
+ if (!disabled && interactive && onClick) {
54
54
  onClick(stepNumber);
55
55
  }
56
56
  };
package/components/step/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 9mw7p */
1
+ /* hash: leby6 */
2
2
  :root {
3
3
  --color-light-border-link: #007aff;
4
4
  --color-light-border-primary: #dbdee1;
@@ -33,33 +33,33 @@
33
33
  --steps-option-svg-color: var(--color-light-graphic-positive);
34
34
  --steps-dash-border: 2px solid var(--color-light-graphic-positive);
35
35
  }
36
- .steps__step_1wzux {
36
+ .steps__step_1mmvm {
37
37
  display: flex;
38
38
  outline: none
39
39
  }
40
- .steps__step_1wzux:not(.steps__vertical_1wzux) {
40
+ .steps__step_1mmvm:not(.steps__vertical_1mmvm) {
41
41
  align-items: center;
42
42
  }
43
- .steps__step_1wzux.steps__interactive_1wzux:not(.steps__disabled_1wzux):hover {
43
+ .steps__step_1mmvm.steps__interactive_1mmvm:not(.steps__disabled_1mmvm):hover {
44
44
  cursor: pointer;
45
45
  }
46
- .steps__step_1wzux.steps__disabled_1wzux:hover .steps__text_1wzux {
46
+ .steps__step_1mmvm.steps__disabled_1mmvm:hover .steps__text_1mmvm {
47
47
  background: unset;
48
48
  }
49
- .steps__step_1wzux.steps__disabled_1wzux .steps__indicator_1wzux {
49
+ .steps__step_1mmvm.steps__disabled_1mmvm .steps__indicator_1mmvm {
50
50
  cursor: unset;
51
51
  }
52
- .steps__indicator_1wzux {
52
+ .steps__indicator_1mmvm {
53
53
  cursor: pointer;
54
54
  display: flex;
55
55
  align-items: center;
56
56
  margin-right: var(--gap-2xs)
57
57
  }
58
- .steps__indicator_1wzux.steps__vertical_1wzux {
58
+ .steps__indicator_1mmvm.steps__vertical_1mmvm {
59
59
  flex-direction: column;
60
60
  margin-right: var(--gap-xs);
61
61
  }
62
- .steps__option_1wzux {
62
+ .steps__option_1mmvm {
63
63
  font-size: 14px;
64
64
  line-height: 20px;
65
65
  font-weight: 700;
@@ -73,19 +73,19 @@
73
73
  height: 24px;
74
74
  border-radius: var(--border-radius-circle)
75
75
  }
76
- .steps__option_1wzux.steps__vertical_1wzux {
76
+ .steps__option_1mmvm.steps__vertical_1mmvm {
77
77
  margin-top: var(--gap-xs);
78
78
  }
79
- .steps__dash_1wzux {
79
+ .steps__dash_1mmvm {
80
80
  flex: 1 1 auto;
81
81
  min-width: 24px;
82
82
  border-top: 2px solid var(--color-light-border-primary);
83
83
  margin-right: var(--gap-xs)
84
84
  }
85
- .steps__dash_1wzux.steps__completed_1wzux {
85
+ .steps__dash_1mmvm.steps__completed_1mmvm {
86
86
  border-top: var(--steps-dash-border);
87
87
  }
88
- .steps__dash_1wzux.steps__vertical_1wzux {
88
+ .steps__dash_1mmvm.steps__vertical_1mmvm {
89
89
  min-width: unset;
90
90
  min-height: 24px;
91
91
  margin-right: 0;
@@ -93,10 +93,10 @@
93
93
  border-left: 2px solid var(--color-light-border-primary);
94
94
  border-top: none;
95
95
  }
96
- .steps__dash_1wzux.steps__completed_1wzux.steps__vertical_1wzux {
96
+ .steps__dash_1mmvm.steps__completed_1mmvm.steps__vertical_1mmvm {
97
97
  border-left: var(--steps-dash-border);
98
98
  }
99
- .steps__text_1wzux {
99
+ .steps__text_1mmvm {
100
100
  font-size: 16px;
101
101
  line-height: 24px;
102
102
  font-weight: 400;
@@ -107,24 +107,24 @@
107
107
  border-radius: var(--gap-xs);
108
108
  height: min-content
109
109
  }
110
- .steps__text_1wzux.steps__interactive_1wzux:not(.steps__disabled_1wzux):hover {
110
+ .steps__text_1mmvm.steps__interactive_1mmvm:not(.steps__disabled_1mmvm):hover {
111
111
  background: var(--color-light-bg-primary-inverted-alpha-7);
112
112
  }
113
- .steps__text_1wzux.steps__interactive_1wzux:not(.steps__disabled_1wzux):active {
113
+ .steps__text_1mmvm.steps__interactive_1mmvm:not(.steps__disabled_1mmvm):active {
114
114
  background: var(--color-light-bg-primary-inverted-alpha-15);
115
115
  }
116
- .steps__focused_1wzux {
116
+ .steps__focused_1mmvm {
117
117
  outline: var(--gap-3xs) solid var(--focus-color);
118
118
  outline-offset: var(--gap-3xs);
119
119
  }
120
- .steps__selected_1wzux .steps__text_1wzux {
120
+ .steps__selected_1mmvm .steps__text_1mmvm {
121
121
  color: var(--color-light-graphic-primary);
122
122
  }
123
- .steps__selected_1wzux .steps__option_1wzux {
123
+ .steps__selected_1mmvm .steps__option_1mmvm {
124
124
  color: var(--color-light-graphic-primary-inverted);
125
125
  background: var(--color-light-graphic-primary);
126
126
  }
127
- .steps__checkbox_1wzux {
127
+ .steps__checkbox_1mmvm {
128
128
  display: flex;
129
129
  justify-content: center;
130
130
  align-items: center;
@@ -133,22 +133,22 @@
133
133
  height: 20px;
134
134
  border: 2px solid var(--color-light-graphic-quaternary);
135
135
  }
136
- .steps__dot_1wzux {
136
+ .steps__dot_1mmvm {
137
137
  width: 10px;
138
138
  height: 10px;
139
139
  border-radius: var(--border-radius-circle);
140
140
  background: var(--color-light-graphic-quaternary);
141
141
  }
142
- .steps__selected_1wzux .steps__checkbox_1wzux {
142
+ .steps__selected_1mmvm .steps__checkbox_1mmvm {
143
143
  border: 2px solid var(--color-light-graphic-primary)
144
144
  }
145
- .steps__selected_1wzux .steps__checkbox_1wzux .steps__dot_1wzux {
145
+ .steps__selected_1mmvm .steps__checkbox_1mmvm .steps__dot_1mmvm {
146
146
  background: var(--color-light-graphic-primary);
147
147
  }
148
- .steps__option_1wzux:not(.steps__error_1wzux).steps__unordered_1wzux {
148
+ .steps__option_1mmvm:not(.steps__error_1mmvm).steps__unordered_1mmvm {
149
149
  background: unset;
150
150
  }
151
- .steps__completedIndicator_1wzux > [class*='positive'] {
151
+ .steps__completedIndicator_1mmvm > [class*='positive'] {
152
152
  color: var(--steps-option-svg-color);
153
153
  background-color: var(--steps-option-svg-color);
154
154
  }
package/components/step-indicator/Component.js CHANGED
@@ -9,7 +9,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
9
9
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
10
10
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
11
11
 
12
- var styles = {"component":"steps__component_89css"};
12
+ var styles = {"component":"steps__component_1lzbr"};
13
13
  require('./index.css')
14
14
 
15
15
  var StepIndicator = function (_a) {
package/components/step-indicator/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: lveu7 */
2
- .steps__component_89css {
1
+ /* hash: xpqo1 */
2
+ .steps__component_1lzbr {
3
3
  padding: 0;
4
4
  }
package/cssm/components/step/Component.js CHANGED
@@ -50,7 +50,7 @@ var Step = function (_a) {
50
50
  var stepRef = React.useRef(null);
51
51
  var focused = hooks.useFocus(stepRef, 'keyboard')[0];
52
52
  var handleButtonClick = function () {
53
- if (!disabled && onClick) {
53
+ if (!disabled && interactive && onClick) {
54
54
  onClick(stepNumber);
55
55
  }
56
56
  };
package/esm/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/esm';
10
10
 
11
- var styles = {"component":"steps__component_1qx39","vertical":"steps__vertical_1qx39"};
11
+ var styles = {"component":"steps__component_1cb0a","vertical":"steps__vertical_1cb0a"};
12
12
  require('./index.css')
13
13
 
14
14
  var Steps = function (_a) {
package/esm/components/step/Component.js CHANGED
@@ -34,7 +34,7 @@ var __assign = function () {
34
34
  return __assign.apply(this, arguments);
35
35
  };
36
36
 
37
- var styles = {"step":"steps__step_1wzux","vertical":"steps__vertical_1wzux","interactive":"steps__interactive_1wzux","disabled":"steps__disabled_1wzux","text":"steps__text_1wzux","indicator":"steps__indicator_1wzux","option":"steps__option_1wzux","dash":"steps__dash_1wzux","completed":"steps__completed_1wzux","focused":"steps__focused_1wzux","selected":"steps__selected_1wzux","checkbox":"steps__checkbox_1wzux","dot":"steps__dot_1wzux","error":"steps__error_1wzux","unordered":"steps__unordered_1wzux","completedIndicator":"steps__completedIndicator_1wzux"};
37
+ var styles = {"step":"steps__step_1mmvm","vertical":"steps__vertical_1mmvm","interactive":"steps__interactive_1mmvm","disabled":"steps__disabled_1mmvm","text":"steps__text_1mmvm","indicator":"steps__indicator_1mmvm","option":"steps__option_1mmvm","dash":"steps__dash_1mmvm","completed":"steps__completed_1mmvm","focused":"steps__focused_1mmvm","selected":"steps__selected_1mmvm","checkbox":"steps__checkbox_1mmvm","dot":"steps__dot_1mmvm","error":"steps__error_1mmvm","unordered":"steps__unordered_1mmvm","completedIndicator":"steps__completedIndicator_1mmvm"};
38
38
  require('./index.css')
39
39
 
40
40
  var Step = function (_a) {
@@ -43,7 +43,7 @@ var Step = function (_a) {
43
43
  var stepRef = useRef(null);
44
44
  var focused = useFocus(stepRef, 'keyboard')[0];
45
45
  var handleButtonClick = function () {
46
- if (!disabled && onClick) {
46
+ if (!disabled && interactive && onClick) {
47
47
  onClick(stepNumber);
48
48
  }
49
49
  };
package/esm/components/step/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 9mw7p */
1
+ /* hash: leby6 */
2
2
  :root {
3
3
  --color-light-border-link: #007aff;
4
4
  --color-light-border-primary: #dbdee1;
@@ -33,33 +33,33 @@
33
33
  --steps-option-svg-color: var(--color-light-graphic-positive);
34
34
  --steps-dash-border: 2px solid var(--color-light-graphic-positive);
35
35
  }
36
- .steps__step_1wzux {
36
+ .steps__step_1mmvm {
37
37
  display: flex;
38
38
  outline: none
39
39
  }
40
- .steps__step_1wzux:not(.steps__vertical_1wzux) {
40
+ .steps__step_1mmvm:not(.steps__vertical_1mmvm) {
41
41
  align-items: center;
42
42
  }
43
- .steps__step_1wzux.steps__interactive_1wzux:not(.steps__disabled_1wzux):hover {
43
+ .steps__step_1mmvm.steps__interactive_1mmvm:not(.steps__disabled_1mmvm):hover {
44
44
  cursor: pointer;
45
45
  }
46
- .steps__step_1wzux.steps__disabled_1wzux:hover .steps__text_1wzux {
46
+ .steps__step_1mmvm.steps__disabled_1mmvm:hover .steps__text_1mmvm {
47
47
  background: unset;
48
48
  }
49
- .steps__step_1wzux.steps__disabled_1wzux .steps__indicator_1wzux {
49
+ .steps__step_1mmvm.steps__disabled_1mmvm .steps__indicator_1mmvm {
50
50
  cursor: unset;
51
51
  }
52
- .steps__indicator_1wzux {
52
+ .steps__indicator_1mmvm {
53
53
  cursor: pointer;
54
54
  display: flex;
55
55
  align-items: center;
56
56
  margin-right: var(--gap-2xs)
57
57
  }
58
- .steps__indicator_1wzux.steps__vertical_1wzux {
58
+ .steps__indicator_1mmvm.steps__vertical_1mmvm {
59
59
  flex-direction: column;
60
60
  margin-right: var(--gap-xs);
61
61
  }
62
- .steps__option_1wzux {
62
+ .steps__option_1mmvm {
63
63
  font-size: 14px;
64
64
  line-height: 20px;
65
65
  font-weight: 700;
@@ -73,19 +73,19 @@
73
73
  height: 24px;
74
74
  border-radius: var(--border-radius-circle)
75
75
  }
76
- .steps__option_1wzux.steps__vertical_1wzux {
76
+ .steps__option_1mmvm.steps__vertical_1mmvm {
77
77
  margin-top: var(--gap-xs);
78
78
  }
79
- .steps__dash_1wzux {
79
+ .steps__dash_1mmvm {
80
80
  flex: 1 1 auto;
81
81
  min-width: 24px;
82
82
  border-top: 2px solid var(--color-light-border-primary);
83
83
  margin-right: var(--gap-xs)
84
84
  }
85
- .steps__dash_1wzux.steps__completed_1wzux {
85
+ .steps__dash_1mmvm.steps__completed_1mmvm {
86
86
  border-top: var(--steps-dash-border);
87
87
  }
88
- .steps__dash_1wzux.steps__vertical_1wzux {
88
+ .steps__dash_1mmvm.steps__vertical_1mmvm {
89
89
  min-width: unset;
90
90
  min-height: 24px;
91
91
  margin-right: 0;
@@ -93,10 +93,10 @@
93
93
  border-left: 2px solid var(--color-light-border-primary);
94
94
  border-top: none;
95
95
  }
96
- .steps__dash_1wzux.steps__completed_1wzux.steps__vertical_1wzux {
96
+ .steps__dash_1mmvm.steps__completed_1mmvm.steps__vertical_1mmvm {
97
97
  border-left: var(--steps-dash-border);
98
98
  }
99
- .steps__text_1wzux {
99
+ .steps__text_1mmvm {
100
100
  font-size: 16px;
101
101
  line-height: 24px;
102
102
  font-weight: 400;
@@ -107,24 +107,24 @@
107
107
  border-radius: var(--gap-xs);
108
108
  height: min-content
109
109
  }
110
- .steps__text_1wzux.steps__interactive_1wzux:not(.steps__disabled_1wzux):hover {
110
+ .steps__text_1mmvm.steps__interactive_1mmvm:not(.steps__disabled_1mmvm):hover {
111
111
  background: var(--color-light-bg-primary-inverted-alpha-7);
112
112
  }
113
- .steps__text_1wzux.steps__interactive_1wzux:not(.steps__disabled_1wzux):active {
113
+ .steps__text_1mmvm.steps__interactive_1mmvm:not(.steps__disabled_1mmvm):active {
114
114
  background: var(--color-light-bg-primary-inverted-alpha-15);
115
115
  }
116
- .steps__focused_1wzux {
116
+ .steps__focused_1mmvm {
117
117
  outline: var(--gap-3xs) solid var(--focus-color);
118
118
  outline-offset: var(--gap-3xs);
119
119
  }
120
- .steps__selected_1wzux .steps__text_1wzux {
120
+ .steps__selected_1mmvm .steps__text_1mmvm {
121
121
  color: var(--color-light-graphic-primary);
122
122
  }
123
- .steps__selected_1wzux .steps__option_1wzux {
123
+ .steps__selected_1mmvm .steps__option_1mmvm {
124
124
  color: var(--color-light-graphic-primary-inverted);
125
125
  background: var(--color-light-graphic-primary);
126
126
  }
127
- .steps__checkbox_1wzux {
127
+ .steps__checkbox_1mmvm {
128
128
  display: flex;
129
129
  justify-content: center;
130
130
  align-items: center;
@@ -133,22 +133,22 @@
133
133
  height: 20px;
134
134
  border: 2px solid var(--color-light-graphic-quaternary);
135
135
  }
136
- .steps__dot_1wzux {
136
+ .steps__dot_1mmvm {
137
137
  width: 10px;
138
138
  height: 10px;
139
139
  border-radius: var(--border-radius-circle);
140
140
  background: var(--color-light-graphic-quaternary);
141
141
  }
142
- .steps__selected_1wzux .steps__checkbox_1wzux {
142
+ .steps__selected_1mmvm .steps__checkbox_1mmvm {
143
143
  border: 2px solid var(--color-light-graphic-primary)
144
144
  }
145
- .steps__selected_1wzux .steps__checkbox_1wzux .steps__dot_1wzux {
145
+ .steps__selected_1mmvm .steps__checkbox_1mmvm .steps__dot_1mmvm {
146
146
  background: var(--color-light-graphic-primary);
147
147
  }
148
- .steps__option_1wzux:not(.steps__error_1wzux).steps__unordered_1wzux {
148
+ .steps__option_1mmvm:not(.steps__error_1mmvm).steps__unordered_1mmvm {
149
149
  background: unset;
150
150
  }
151
- .steps__completedIndicator_1wzux > [class*='positive'] {
151
+ .steps__completedIndicator_1mmvm > [class*='positive'] {
152
152
  color: var(--steps-option-svg-color);
153
153
  background-color: var(--steps-option-svg-color);
154
154
  }
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_89css"};
5
+ var styles = {"component":"steps__component_1lzbr"};
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: lveu7 */
2
- .steps__component_89css {
1
+ /* hash: xpqo1 */
2
+ .steps__component_1lzbr {
3
3
  padding: 0;
4
4
  }
package/esm/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: li0ej */
1
+ /* hash: 1302x */
2
2
  :root {
3
3
 
4
4
  /* Hard */
@@ -7,12 +7,12 @@
7
7
 
8
8
  /* Hard up */
9
9
  }
10
- .steps__component_1qx39 {
10
+ .steps__component_1cb0a {
11
11
  display: flex;
12
12
  align-items: center;
13
13
  flex-direction: row
14
14
  }
15
- .steps__component_1qx39.steps__vertical_1qx39 {
15
+ .steps__component_1cb0a.steps__vertical_1cb0a {
16
16
  flex-direction: column;
17
17
  align-items: flex-start;
18
18
  }
package/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: li0ej */
1
+ /* hash: 1302x */
2
2
  :root {
3
3
 
4
4
  /* Hard */
@@ -7,12 +7,12 @@
7
7
 
8
8
  /* Hard up */
9
9
  }
10
- .steps__component_1qx39 {
10
+ .steps__component_1cb0a {
11
11
  display: flex;
12
12
  align-items: center;
13
13
  flex-direction: row
14
14
  }
15
- .steps__component_1qx39.steps__vertical_1qx39 {
15
+ .steps__component_1cb0a.steps__vertical_1cb0a {
16
16
  flex-direction: column;
17
17
  align-items: flex-start;
18
18
  }
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_1qx39","vertical":"steps__vertical_1qx39"};
11
+ const styles = {"component":"steps__component_1cb0a","vertical":"steps__vertical_1cb0a"};
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,14 +7,14 @@ 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_1wzux","vertical":"steps__vertical_1wzux","interactive":"steps__interactive_1wzux","disabled":"steps__disabled_1wzux","text":"steps__text_1wzux","indicator":"steps__indicator_1wzux","option":"steps__option_1wzux","dash":"steps__dash_1wzux","completed":"steps__completed_1wzux","focused":"steps__focused_1wzux","selected":"steps__selected_1wzux","checkbox":"steps__checkbox_1wzux","dot":"steps__dot_1wzux","error":"steps__error_1wzux","unordered":"steps__unordered_1wzux","completedIndicator":"steps__completedIndicator_1wzux"};
10
+ const styles = {"step":"steps__step_1mmvm","vertical":"steps__vertical_1mmvm","interactive":"steps__interactive_1mmvm","disabled":"steps__disabled_1mmvm","text":"steps__text_1mmvm","indicator":"steps__indicator_1mmvm","option":"steps__option_1mmvm","dash":"steps__dash_1mmvm","completed":"steps__completed_1mmvm","focused":"steps__focused_1mmvm","selected":"steps__selected_1mmvm","checkbox":"steps__checkbox_1mmvm","dot":"steps__dot_1mmvm","error":"steps__error_1mmvm","unordered":"steps__unordered_1mmvm","completedIndicator":"steps__completedIndicator_1mmvm"};
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, }) => {
14
14
  const stepRef = useRef(null);
15
15
  const [focused] = useFocus(stepRef, 'keyboard');
16
16
  const handleButtonClick = () => {
17
- if (!disabled && onClick) {
17
+ if (!disabled && interactive && onClick) {
18
18
  onClick(stepNumber);
19
19
  }
20
20
  };
package/modern/components/step/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: 9mw7p */
1
+ /* hash: leby6 */
2
2
  :root {
3
3
  --color-light-border-link: #007aff;
4
4
  --color-light-border-primary: #dbdee1;
@@ -33,33 +33,33 @@
33
33
  --steps-option-svg-color: var(--color-light-graphic-positive);
34
34
  --steps-dash-border: 2px solid var(--color-light-graphic-positive);
35
35
  }
36
- .steps__step_1wzux {
36
+ .steps__step_1mmvm {
37
37
  display: flex;
38
38
  outline: none
39
39
  }
40
- .steps__step_1wzux:not(.steps__vertical_1wzux) {
40
+ .steps__step_1mmvm:not(.steps__vertical_1mmvm) {
41
41
  align-items: center;
42
42
  }
43
- .steps__step_1wzux.steps__interactive_1wzux:not(.steps__disabled_1wzux):hover {
43
+ .steps__step_1mmvm.steps__interactive_1mmvm:not(.steps__disabled_1mmvm):hover {
44
44
  cursor: pointer;
45
45
  }
46
- .steps__step_1wzux.steps__disabled_1wzux:hover .steps__text_1wzux {
46
+ .steps__step_1mmvm.steps__disabled_1mmvm:hover .steps__text_1mmvm {
47
47
  background: unset;
48
48
  }
49
- .steps__step_1wzux.steps__disabled_1wzux .steps__indicator_1wzux {
49
+ .steps__step_1mmvm.steps__disabled_1mmvm .steps__indicator_1mmvm {
50
50
  cursor: unset;
51
51
  }
52
- .steps__indicator_1wzux {
52
+ .steps__indicator_1mmvm {
53
53
  cursor: pointer;
54
54
  display: flex;
55
55
  align-items: center;
56
56
  margin-right: var(--gap-2xs)
57
57
  }
58
- .steps__indicator_1wzux.steps__vertical_1wzux {
58
+ .steps__indicator_1mmvm.steps__vertical_1mmvm {
59
59
  flex-direction: column;
60
60
  margin-right: var(--gap-xs);
61
61
  }
62
- .steps__option_1wzux {
62
+ .steps__option_1mmvm {
63
63
  font-size: 14px;
64
64
  line-height: 20px;
65
65
  font-weight: 700;
@@ -73,19 +73,19 @@
73
73
  height: 24px;
74
74
  border-radius: var(--border-radius-circle)
75
75
  }
76
- .steps__option_1wzux.steps__vertical_1wzux {
76
+ .steps__option_1mmvm.steps__vertical_1mmvm {
77
77
  margin-top: var(--gap-xs);
78
78
  }
79
- .steps__dash_1wzux {
79
+ .steps__dash_1mmvm {
80
80
  flex: 1 1 auto;
81
81
  min-width: 24px;
82
82
  border-top: 2px solid var(--color-light-border-primary);
83
83
  margin-right: var(--gap-xs)
84
84
  }
85
- .steps__dash_1wzux.steps__completed_1wzux {
85
+ .steps__dash_1mmvm.steps__completed_1mmvm {
86
86
  border-top: var(--steps-dash-border);
87
87
  }
88
- .steps__dash_1wzux.steps__vertical_1wzux {
88
+ .steps__dash_1mmvm.steps__vertical_1mmvm {
89
89
  min-width: unset;
90
90
  min-height: 24px;
91
91
  margin-right: 0;
@@ -93,10 +93,10 @@
93
93
  border-left: 2px solid var(--color-light-border-primary);
94
94
  border-top: none;
95
95
  }
96
- .steps__dash_1wzux.steps__completed_1wzux.steps__vertical_1wzux {
96
+ .steps__dash_1mmvm.steps__completed_1mmvm.steps__vertical_1mmvm {
97
97
  border-left: var(--steps-dash-border);
98
98
  }
99
- .steps__text_1wzux {
99
+ .steps__text_1mmvm {
100
100
  font-size: 16px;
101
101
  line-height: 24px;
102
102
  font-weight: 400;
@@ -107,24 +107,24 @@
107
107
  border-radius: var(--gap-xs);
108
108
  height: min-content
109
109
  }
110
- .steps__text_1wzux.steps__interactive_1wzux:not(.steps__disabled_1wzux):hover {
110
+ .steps__text_1mmvm.steps__interactive_1mmvm:not(.steps__disabled_1mmvm):hover {
111
111
  background: var(--color-light-bg-primary-inverted-alpha-7);
112
112
  }
113
- .steps__text_1wzux.steps__interactive_1wzux:not(.steps__disabled_1wzux):active {
113
+ .steps__text_1mmvm.steps__interactive_1mmvm:not(.steps__disabled_1mmvm):active {
114
114
  background: var(--color-light-bg-primary-inverted-alpha-15);
115
115
  }
116
- .steps__focused_1wzux {
116
+ .steps__focused_1mmvm {
117
117
  outline: var(--gap-3xs) solid var(--focus-color);
118
118
  outline-offset: var(--gap-3xs);
119
119
  }
120
- .steps__selected_1wzux .steps__text_1wzux {
120
+ .steps__selected_1mmvm .steps__text_1mmvm {
121
121
  color: var(--color-light-graphic-primary);
122
122
  }
123
- .steps__selected_1wzux .steps__option_1wzux {
123
+ .steps__selected_1mmvm .steps__option_1mmvm {
124
124
  color: var(--color-light-graphic-primary-inverted);
125
125
  background: var(--color-light-graphic-primary);
126
126
  }
127
- .steps__checkbox_1wzux {
127
+ .steps__checkbox_1mmvm {
128
128
  display: flex;
129
129
  justify-content: center;
130
130
  align-items: center;
@@ -133,22 +133,22 @@
133
133
  height: 20px;
134
134
  border: 2px solid var(--color-light-graphic-quaternary);
135
135
  }
136
- .steps__dot_1wzux {
136
+ .steps__dot_1mmvm {
137
137
  width: 10px;
138
138
  height: 10px;
139
139
  border-radius: var(--border-radius-circle);
140
140
  background: var(--color-light-graphic-quaternary);
141
141
  }
142
- .steps__selected_1wzux .steps__checkbox_1wzux {
142
+ .steps__selected_1mmvm .steps__checkbox_1mmvm {
143
143
  border: 2px solid var(--color-light-graphic-primary)
144
144
  }
145
- .steps__selected_1wzux .steps__checkbox_1wzux .steps__dot_1wzux {
145
+ .steps__selected_1mmvm .steps__checkbox_1mmvm .steps__dot_1mmvm {
146
146
  background: var(--color-light-graphic-primary);
147
147
  }
148
- .steps__option_1wzux:not(.steps__error_1wzux).steps__unordered_1wzux {
148
+ .steps__option_1mmvm:not(.steps__error_1mmvm).steps__unordered_1mmvm {
149
149
  background: unset;
150
150
  }
151
- .steps__completedIndicator_1wzux > [class*='positive'] {
151
+ .steps__completedIndicator_1mmvm > [class*='positive'] {
152
152
  color: var(--steps-option-svg-color);
153
153
  background-color: var(--steps-option-svg-color);
154
154
  }
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_89css"};
5
+ const styles = {"component":"steps__component_1lzbr"};
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: lveu7 */
2
- .steps__component_89css {
1
+ /* hash: xpqo1 */
2
+ .steps__component_1lzbr {
3
3
  padding: 0;
4
4
  }
package/modern/index.css CHANGED
@@ -1,4 +1,4 @@
1
- /* hash: li0ej */
1
+ /* hash: 1302x */
2
2
  :root {
3
3
 
4
4
  /* Hard */
@@ -7,12 +7,12 @@
7
7
 
8
8
  /* Hard up */
9
9
  }
10
- .steps__component_1qx39 {
10
+ .steps__component_1cb0a {
11
11
  display: flex;
12
12
  align-items: center;
13
13
  flex-direction: row
14
14
  }
15
- .steps__component_1qx39.steps__vertical_1qx39 {
15
+ .steps__component_1cb0a.steps__vertical_1cb0a {
16
16
  flex-direction: column;
17
17
  align-items: flex-start;
18
18
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alfalab/core-components-steps",
3
- "version": "1.1.3",
3
+ "version": "1.1.5",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "license": "MIT",
@@ -17,9 +17,9 @@
17
17
  "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
18
18
  },
19
19
  "dependencies": {
20
- "@alfalab/core-components-badge": "^4.0.4",
20
+ "@alfalab/core-components-badge": "^5.0.0",
21
21
  "@alfalab/hooks": "^1.13.0",
22
- "@alfalab/icons-glyph": "^2.71.0",
22
+ "@alfalab/icons-glyph": "^2.89.0",
23
23
  "classnames": "^2.3.1"
24
24
  }
25
25
  }