@alfalab/core-components-steps 1.1.1 → 1.1.3
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.
- package/Component.js +10 -12
- package/components/step/Component.js +20 -22
- package/components/step/index.css +32 -29
- package/components/step/index.js +3 -5
- package/components/step-indicator/Component.js +5 -7
- package/components/step-indicator/index.css +2 -2
- package/components/step-indicator/index.js +1 -3
- package/cssm/Component.js +12 -14
- package/cssm/components/step/Component.js +36 -38
- package/cssm/components/step/index.js +3 -5
- package/cssm/components/step/index.module.css +6 -3
- package/cssm/components/step-indicator/Component.js +5 -7
- package/cssm/components/step-indicator/index.js +1 -3
- package/cssm/index.js +3 -5
- package/esm/Component.js +3 -3
- package/esm/components/step/Component.js +4 -4
- package/esm/components/step/index.css +32 -29
- package/esm/components/step/index.js +3 -3
- package/esm/components/step-indicator/Component.js +1 -1
- package/esm/components/step-indicator/index.css +2 -2
- package/esm/components/step-indicator/index.js +1 -1
- package/esm/index.css +3 -3
- package/esm/index.js +3 -3
- package/index.css +3 -3
- package/index.js +3 -5
- package/modern/Component.js +4 -4
- package/modern/components/step/Component.js +4 -4
- package/modern/components/step/index.css +32 -29
- package/modern/components/step/index.js +3 -3
- package/modern/components/step-indicator/Component.js +2 -4
- package/modern/components/step-indicator/index.css +2 -2
- package/modern/components/step-indicator/index.js +1 -1
- package/modern/index.css +3 -3
- package/modern/index.js +4 -4
- package/package.json +2 -2
- package/send-stats.js +1 -1
package/Component.js
CHANGED
|
@@ -1,30 +1,28 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var React = require('react');
|
|
6
4
|
var cn = require('classnames');
|
|
7
5
|
var components_step_Component = require('./components/step/Component.js');
|
|
8
6
|
require('@alfalab/hooks');
|
|
9
7
|
require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
|
|
10
|
-
require('@alfalab/icons-glyph/ExclamationCircleMIcon');
|
|
11
8
|
require('@alfalab/icons-glyph/ClockMIcon');
|
|
12
|
-
require('@alfalab/
|
|
9
|
+
require('@alfalab/icons-glyph/ExclamationCircleMIcon');
|
|
13
10
|
require('./components/step-indicator/Component.js');
|
|
11
|
+
require('@alfalab/core-components-badge');
|
|
14
12
|
|
|
15
|
-
function
|
|
13
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
16
14
|
|
|
17
|
-
var React__default = /*#__PURE__*/
|
|
18
|
-
var cn__default = /*#__PURE__*/
|
|
15
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
16
|
+
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
19
17
|
|
|
20
|
-
var styles = {"component":"
|
|
18
|
+
var styles = {"component":"steps__component_1qx39","vertical":"steps__vertical_1qx39"};
|
|
21
19
|
require('./index.css')
|
|
22
20
|
|
|
23
21
|
var Steps = function (_a) {
|
|
24
22
|
var _b;
|
|
25
23
|
var className = _a.className, children = _a.children, _c = _a.defaultActiveStep, defaultActiveStep = _c === void 0 ? 1 : _c, activeStepProp = _a.activeStep, _d = _a.isMarkCompletedSteps, isMarkCompletedSteps = _d === void 0 ? true : _d, _e = _a.isVerticalAlign, isVerticalAlign = _e === void 0 ? false : _e, _f = _a.ordered, ordered = _f === void 0 ? true : _f, _g = _a.interactive, interactive = _g === void 0 ? true : _g, checkIsStepDisabled = _a.checkIsStepDisabled, checkIsStepError = _a.checkIsStepError, checkIsStepWarning = _a.checkIsStepWarning, checkIsStepWaiting = _a.checkIsStepWaiting, checkIsStepPositive = _a.checkIsStepPositive, checkIsStepCustom = _a.checkIsStepCustom, onChange = _a.onChange, dataTestId = _a.dataTestId;
|
|
26
24
|
var _h = React.useState(activeStepProp || defaultActiveStep), activeStep = _h[0], setActiveStep = _h[1];
|
|
27
|
-
var stepsLength = React__default
|
|
25
|
+
var stepsLength = React__default.default.Children.count(children);
|
|
28
26
|
React.useEffect(function () {
|
|
29
27
|
if (activeStepProp) {
|
|
30
28
|
setActiveStep(activeStepProp);
|
|
@@ -38,9 +36,9 @@ var Steps = function (_a) {
|
|
|
38
36
|
};
|
|
39
37
|
if (!stepsLength)
|
|
40
38
|
return null;
|
|
41
|
-
return (React__default
|
|
39
|
+
return (React__default.default.createElement("div", { className: cn__default.default(className, styles.component, (_b = {},
|
|
42
40
|
_b[styles.vertical] = isVerticalAlign,
|
|
43
|
-
_b)), "data-test-id": dataTestId }, React__default
|
|
41
|
+
_b)), "data-test-id": dataTestId }, React__default.default.Children.map(children, function (step, index) {
|
|
44
42
|
var stepNumber = index + 1;
|
|
45
43
|
var isSelected = stepNumber === activeStep;
|
|
46
44
|
var isStepCompleted = isMarkCompletedSteps && stepNumber < activeStep;
|
|
@@ -52,7 +50,7 @@ var Steps = function (_a) {
|
|
|
52
50
|
var customStepIndicator = checkIsStepCustom && checkIsStepCustom(stepNumber);
|
|
53
51
|
var isNotLastStep = stepsLength !== stepNumber;
|
|
54
52
|
var isInteractive = !disabled && interactive;
|
|
55
|
-
return (React__default
|
|
53
|
+
return (React__default.default.createElement(components_step_Component.Step, { stepNumber: stepNumber, isSelected: isSelected, isStepCompleted: isStepCompleted, disabled: disabled, isPositive: isPositive, isError: isError, isWarning: isWarning, isWaiting: isWaiting, customStepIndicator: customStepIndicator, onClick: handleStepClick, ordered: ordered, interactive: isInteractive, isVerticalAlign: isVerticalAlign, isNotLastStep: isNotLastStep, key: stepNumber }, step));
|
|
56
54
|
})));
|
|
57
55
|
};
|
|
58
56
|
|
|
@@ -1,22 +1,20 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var React = require('react');
|
|
6
4
|
var cn = require('classnames');
|
|
7
5
|
var hooks = require('@alfalab/hooks');
|
|
8
6
|
var CheckmarkCircleMIcon = require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
|
|
9
|
-
var ExclamationCircleMIcon = require('@alfalab/icons-glyph/ExclamationCircleMIcon');
|
|
10
7
|
var ClockMIcon = require('@alfalab/icons-glyph/ClockMIcon');
|
|
11
|
-
require('@alfalab/
|
|
8
|
+
var ExclamationCircleMIcon = require('@alfalab/icons-glyph/ExclamationCircleMIcon');
|
|
12
9
|
var components_stepIndicator_Component = require('../step-indicator/Component.js');
|
|
10
|
+
require('@alfalab/core-components-badge');
|
|
13
11
|
|
|
14
|
-
function
|
|
12
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
15
13
|
|
|
16
|
-
var React__default = /*#__PURE__*/
|
|
17
|
-
var cn__default = /*#__PURE__*/
|
|
14
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
15
|
+
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
18
16
|
|
|
19
|
-
|
|
17
|
+
/******************************************************************************
|
|
20
18
|
Copyright (c) Microsoft Corporation.
|
|
21
19
|
|
|
22
20
|
Permission to use, copy, modify, and/or distribute this software for any
|
|
@@ -43,7 +41,7 @@ var __assign = function () {
|
|
|
43
41
|
return __assign.apply(this, arguments);
|
|
44
42
|
};
|
|
45
43
|
|
|
46
|
-
var styles = {"step":"
|
|
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"};
|
|
47
45
|
require('./index.css')
|
|
48
46
|
|
|
49
47
|
var Step = function (_a) {
|
|
@@ -68,37 +66,37 @@ var Step = function (_a) {
|
|
|
68
66
|
};
|
|
69
67
|
var getStepIndicator = function () {
|
|
70
68
|
if (customStepIndicator) {
|
|
71
|
-
return React__default
|
|
69
|
+
return React__default.default.createElement(components_stepIndicator_Component.StepIndicator, __assign({}, customStepIndicator));
|
|
72
70
|
}
|
|
73
71
|
if (isError) {
|
|
74
|
-
return React__default
|
|
72
|
+
return React__default.default.createElement(components_stepIndicator_Component.StepIndicator, { iconColor: 'negative', content: React__default.default.createElement(ExclamationCircleMIcon.ExclamationCircleMIcon, null) });
|
|
75
73
|
}
|
|
76
74
|
if (isWarning) {
|
|
77
|
-
return React__default
|
|
75
|
+
return React__default.default.createElement(components_stepIndicator_Component.StepIndicator, { iconColor: 'attention', content: React__default.default.createElement(ExclamationCircleMIcon.ExclamationCircleMIcon, null) });
|
|
78
76
|
}
|
|
79
77
|
if (isWaiting) {
|
|
80
|
-
return React__default
|
|
78
|
+
return React__default.default.createElement(components_stepIndicator_Component.StepIndicator, { iconColor: 'secondary', content: React__default.default.createElement(ClockMIcon.ClockMIcon, null) });
|
|
81
79
|
}
|
|
82
80
|
if (isPositive) {
|
|
83
|
-
return React__default
|
|
81
|
+
return React__default.default.createElement(components_stepIndicator_Component.StepIndicator, { iconColor: 'positive', content: React__default.default.createElement(CheckmarkCircleMIcon.CheckmarkCircleMIcon, null) });
|
|
84
82
|
}
|
|
85
83
|
if (isStepCompleted) {
|
|
86
|
-
return (React__default
|
|
84
|
+
return (React__default.default.createElement(components_stepIndicator_Component.StepIndicator, { iconColor: 'positive', content: React__default.default.createElement(CheckmarkCircleMIcon.CheckmarkCircleMIcon, null), className: styles.completedIndicator }));
|
|
87
85
|
}
|
|
88
86
|
if (!ordered) {
|
|
89
|
-
return (React__default
|
|
90
|
-
React__default
|
|
87
|
+
return (React__default.default.createElement("div", { className: styles.checkbox },
|
|
88
|
+
React__default.default.createElement("span", { className: styles.dot })));
|
|
91
89
|
}
|
|
92
90
|
return stepNumber;
|
|
93
91
|
};
|
|
94
92
|
var renderDash = function () {
|
|
95
93
|
var _a;
|
|
96
|
-
return (React__default
|
|
94
|
+
return (React__default.default.createElement("div", { className: cn__default.default(styles.dash, (_a = {},
|
|
97
95
|
_a[styles.vertical] = isVerticalAlign,
|
|
98
96
|
_a[styles.completed] = isStepCompleted,
|
|
99
97
|
_a)) }));
|
|
100
98
|
};
|
|
101
|
-
return (React__default
|
|
99
|
+
return (React__default.default.createElement("div", { role: 'button', tabIndex: 0, ref: stepRef, className: cn__default.default(styles.step, (_b = {},
|
|
102
100
|
_b[styles.completed] = isStepCompleted,
|
|
103
101
|
_b[styles.error] = isError,
|
|
104
102
|
_b[styles.selected] = isSelected,
|
|
@@ -107,17 +105,17 @@ var Step = function (_a) {
|
|
|
107
105
|
_b[styles.vertical] = isVerticalAlign,
|
|
108
106
|
_b[styles.interactive] = interactive,
|
|
109
107
|
_b)), onClick: handleButtonClick, onKeyDown: handleKeyDown },
|
|
110
|
-
React__default
|
|
108
|
+
React__default.default.createElement("div", { className: cn__default.default(styles.indicator, (_c = {},
|
|
111
109
|
_c[styles.vertical] = isVerticalAlign,
|
|
112
110
|
_c[styles.interactive] = interactive,
|
|
113
111
|
_c)) },
|
|
114
|
-
React__default
|
|
112
|
+
React__default.default.createElement("div", { className: cn__default.default(styles.option, (_d = {},
|
|
115
113
|
_d[styles.unordered] = !ordered,
|
|
116
114
|
_d[styles.vertical] = isVerticalAlign,
|
|
117
115
|
_d[styles.error] = isError,
|
|
118
116
|
_d)) }, getStepIndicator()),
|
|
119
117
|
isNotLastStep && isVerticalAlign && renderDash()),
|
|
120
|
-
React__default
|
|
118
|
+
React__default.default.createElement("div", { className: cn__default.default(styles.text, (_e = {},
|
|
121
119
|
_e[styles.interactive] = interactive,
|
|
122
120
|
_e)), onClick: handleTextClick }, children),
|
|
123
121
|
isNotLastStep && !isVerticalAlign && renderDash()));
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 9mw7p */
|
|
2
2
|
:root {
|
|
3
3
|
--color-light-border-link: #007aff;
|
|
4
4
|
--color-light-border-primary: #dbdee1;
|
|
@@ -23,6 +23,9 @@
|
|
|
23
23
|
--gap-2xs: 4px;
|
|
24
24
|
--gap-xs: 8px;
|
|
25
25
|
}
|
|
26
|
+
:root {
|
|
27
|
+
--border-radius-circle: 50%;
|
|
28
|
+
}
|
|
26
29
|
:root {
|
|
27
30
|
--focus-color: var(--color-light-border-link);
|
|
28
31
|
}
|
|
@@ -30,33 +33,33 @@
|
|
|
30
33
|
--steps-option-svg-color: var(--color-light-graphic-positive);
|
|
31
34
|
--steps-dash-border: 2px solid var(--color-light-graphic-positive);
|
|
32
35
|
}
|
|
33
|
-
.
|
|
36
|
+
.steps__step_1wzux {
|
|
34
37
|
display: flex;
|
|
35
38
|
outline: none
|
|
36
39
|
}
|
|
37
|
-
.
|
|
40
|
+
.steps__step_1wzux:not(.steps__vertical_1wzux) {
|
|
38
41
|
align-items: center;
|
|
39
42
|
}
|
|
40
|
-
.
|
|
43
|
+
.steps__step_1wzux.steps__interactive_1wzux:not(.steps__disabled_1wzux):hover {
|
|
41
44
|
cursor: pointer;
|
|
42
45
|
}
|
|
43
|
-
.
|
|
46
|
+
.steps__step_1wzux.steps__disabled_1wzux:hover .steps__text_1wzux {
|
|
44
47
|
background: unset;
|
|
45
48
|
}
|
|
46
|
-
.
|
|
49
|
+
.steps__step_1wzux.steps__disabled_1wzux .steps__indicator_1wzux {
|
|
47
50
|
cursor: unset;
|
|
48
51
|
}
|
|
49
|
-
.
|
|
52
|
+
.steps__indicator_1wzux {
|
|
50
53
|
cursor: pointer;
|
|
51
54
|
display: flex;
|
|
52
55
|
align-items: center;
|
|
53
56
|
margin-right: var(--gap-2xs)
|
|
54
57
|
}
|
|
55
|
-
.
|
|
58
|
+
.steps__indicator_1wzux.steps__vertical_1wzux {
|
|
56
59
|
flex-direction: column;
|
|
57
60
|
margin-right: var(--gap-xs);
|
|
58
61
|
}
|
|
59
|
-
.
|
|
62
|
+
.steps__option_1wzux {
|
|
60
63
|
font-size: 14px;
|
|
61
64
|
line-height: 20px;
|
|
62
65
|
font-weight: 700;
|
|
@@ -68,21 +71,21 @@
|
|
|
68
71
|
background: var(--color-light-graphic-quaternary);
|
|
69
72
|
min-width: 24px;
|
|
70
73
|
height: 24px;
|
|
71
|
-
border-radius:
|
|
74
|
+
border-radius: var(--border-radius-circle)
|
|
72
75
|
}
|
|
73
|
-
.
|
|
76
|
+
.steps__option_1wzux.steps__vertical_1wzux {
|
|
74
77
|
margin-top: var(--gap-xs);
|
|
75
78
|
}
|
|
76
|
-
.
|
|
79
|
+
.steps__dash_1wzux {
|
|
77
80
|
flex: 1 1 auto;
|
|
78
81
|
min-width: 24px;
|
|
79
82
|
border-top: 2px solid var(--color-light-border-primary);
|
|
80
83
|
margin-right: var(--gap-xs)
|
|
81
84
|
}
|
|
82
|
-
.
|
|
85
|
+
.steps__dash_1wzux.steps__completed_1wzux {
|
|
83
86
|
border-top: var(--steps-dash-border);
|
|
84
87
|
}
|
|
85
|
-
.
|
|
88
|
+
.steps__dash_1wzux.steps__vertical_1wzux {
|
|
86
89
|
min-width: unset;
|
|
87
90
|
min-height: 24px;
|
|
88
91
|
margin-right: 0;
|
|
@@ -90,10 +93,10 @@
|
|
|
90
93
|
border-left: 2px solid var(--color-light-border-primary);
|
|
91
94
|
border-top: none;
|
|
92
95
|
}
|
|
93
|
-
.
|
|
96
|
+
.steps__dash_1wzux.steps__completed_1wzux.steps__vertical_1wzux {
|
|
94
97
|
border-left: var(--steps-dash-border);
|
|
95
98
|
}
|
|
96
|
-
.
|
|
99
|
+
.steps__text_1wzux {
|
|
97
100
|
font-size: 16px;
|
|
98
101
|
line-height: 24px;
|
|
99
102
|
font-weight: 400;
|
|
@@ -104,48 +107,48 @@
|
|
|
104
107
|
border-radius: var(--gap-xs);
|
|
105
108
|
height: min-content
|
|
106
109
|
}
|
|
107
|
-
.
|
|
110
|
+
.steps__text_1wzux.steps__interactive_1wzux:not(.steps__disabled_1wzux):hover {
|
|
108
111
|
background: var(--color-light-bg-primary-inverted-alpha-7);
|
|
109
112
|
}
|
|
110
|
-
.
|
|
113
|
+
.steps__text_1wzux.steps__interactive_1wzux:not(.steps__disabled_1wzux):active {
|
|
111
114
|
background: var(--color-light-bg-primary-inverted-alpha-15);
|
|
112
115
|
}
|
|
113
|
-
.
|
|
116
|
+
.steps__focused_1wzux {
|
|
114
117
|
outline: var(--gap-3xs) solid var(--focus-color);
|
|
115
118
|
outline-offset: var(--gap-3xs);
|
|
116
119
|
}
|
|
117
|
-
.
|
|
120
|
+
.steps__selected_1wzux .steps__text_1wzux {
|
|
118
121
|
color: var(--color-light-graphic-primary);
|
|
119
122
|
}
|
|
120
|
-
.
|
|
123
|
+
.steps__selected_1wzux .steps__option_1wzux {
|
|
121
124
|
color: var(--color-light-graphic-primary-inverted);
|
|
122
125
|
background: var(--color-light-graphic-primary);
|
|
123
126
|
}
|
|
124
|
-
.
|
|
127
|
+
.steps__checkbox_1wzux {
|
|
125
128
|
display: flex;
|
|
126
129
|
justify-content: center;
|
|
127
130
|
align-items: center;
|
|
128
|
-
border-radius:
|
|
131
|
+
border-radius: var(--border-radius-circle);
|
|
129
132
|
width: 20px;
|
|
130
133
|
height: 20px;
|
|
131
134
|
border: 2px solid var(--color-light-graphic-quaternary);
|
|
132
135
|
}
|
|
133
|
-
.
|
|
136
|
+
.steps__dot_1wzux {
|
|
134
137
|
width: 10px;
|
|
135
138
|
height: 10px;
|
|
136
|
-
border-radius:
|
|
139
|
+
border-radius: var(--border-radius-circle);
|
|
137
140
|
background: var(--color-light-graphic-quaternary);
|
|
138
141
|
}
|
|
139
|
-
.
|
|
142
|
+
.steps__selected_1wzux .steps__checkbox_1wzux {
|
|
140
143
|
border: 2px solid var(--color-light-graphic-primary)
|
|
141
144
|
}
|
|
142
|
-
.
|
|
145
|
+
.steps__selected_1wzux .steps__checkbox_1wzux .steps__dot_1wzux {
|
|
143
146
|
background: var(--color-light-graphic-primary);
|
|
144
147
|
}
|
|
145
|
-
.
|
|
148
|
+
.steps__option_1wzux:not(.steps__error_1wzux).steps__unordered_1wzux {
|
|
146
149
|
background: unset;
|
|
147
150
|
}
|
|
148
|
-
.
|
|
151
|
+
.steps__completedIndicator_1wzux > [class*='positive'] {
|
|
149
152
|
color: var(--steps-option-svg-color);
|
|
150
153
|
background-color: var(--steps-option-svg-color);
|
|
151
154
|
}
|
package/components/step/index.js
CHANGED
|
@@ -1,16 +1,14 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
var components_step_Component = require('./Component.js');
|
|
5
4
|
require('react');
|
|
6
5
|
require('classnames');
|
|
7
|
-
var components_step_Component = require('./Component.js');
|
|
8
6
|
require('@alfalab/hooks');
|
|
9
7
|
require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
|
|
10
|
-
require('@alfalab/icons-glyph/ExclamationCircleMIcon');
|
|
11
8
|
require('@alfalab/icons-glyph/ClockMIcon');
|
|
12
|
-
require('@alfalab/
|
|
9
|
+
require('@alfalab/icons-glyph/ExclamationCircleMIcon');
|
|
13
10
|
require('../step-indicator/Component.js');
|
|
11
|
+
require('@alfalab/core-components-badge');
|
|
14
12
|
|
|
15
13
|
|
|
16
14
|
|
|
@@ -1,22 +1,20 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var React = require('react');
|
|
6
4
|
var cn = require('classnames');
|
|
7
5
|
var coreComponentsBadge = require('@alfalab/core-components-badge');
|
|
8
6
|
|
|
9
|
-
function
|
|
7
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
10
8
|
|
|
11
|
-
var React__default = /*#__PURE__*/
|
|
12
|
-
var cn__default = /*#__PURE__*/
|
|
9
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
10
|
+
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
13
11
|
|
|
14
|
-
var styles = {"component":"
|
|
12
|
+
var styles = {"component":"steps__component_89css"};
|
|
15
13
|
require('./index.css')
|
|
16
14
|
|
|
17
15
|
var StepIndicator = function (_a) {
|
|
18
16
|
var content = _a.content, iconColor = _a.iconColor, className = _a.className;
|
|
19
|
-
return (React__default
|
|
17
|
+
return (React__default.default.createElement(coreComponentsBadge.Badge, { size: 'l', view: 'icon', iconColor: iconColor, className: cn__default.default(styles.component, className), content: content }));
|
|
20
18
|
};
|
|
21
19
|
|
|
22
20
|
exports.StepIndicator = StepIndicator;
|
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
var components_stepIndicator_Component = require('./Component.js');
|
|
5
4
|
require('react');
|
|
6
5
|
require('classnames');
|
|
7
6
|
require('@alfalab/core-components-badge');
|
|
8
|
-
var components_stepIndicator_Component = require('./Component.js');
|
|
9
7
|
|
|
10
8
|
|
|
11
9
|
|
package/cssm/Component.js
CHANGED
|
@@ -1,31 +1,29 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var React = require('react');
|
|
6
4
|
var cn = require('classnames');
|
|
7
5
|
var components_step_Component = require('./components/step/Component.js');
|
|
6
|
+
var styles = require('./index.module.css');
|
|
8
7
|
require('@alfalab/hooks');
|
|
9
8
|
require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
|
|
10
|
-
require('@alfalab/icons-glyph/ExclamationCircleMIcon');
|
|
11
9
|
require('@alfalab/icons-glyph/ClockMIcon');
|
|
10
|
+
require('@alfalab/icons-glyph/ExclamationCircleMIcon');
|
|
11
|
+
require('./components/step-indicator/Component.js');
|
|
12
12
|
require('@alfalab/core-components-badge/cssm');
|
|
13
13
|
require('./components/step-indicator/index.module.css');
|
|
14
|
-
require('./components/step-indicator/Component.js');
|
|
15
14
|
require('./components/step/index.module.css');
|
|
16
|
-
var styles = require('./index.module.css');
|
|
17
15
|
|
|
18
|
-
function
|
|
16
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
19
17
|
|
|
20
|
-
var React__default = /*#__PURE__*/
|
|
21
|
-
var cn__default = /*#__PURE__*/
|
|
22
|
-
var styles__default = /*#__PURE__*/
|
|
18
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
19
|
+
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
20
|
+
var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
|
|
23
21
|
|
|
24
22
|
var Steps = function (_a) {
|
|
25
23
|
var _b;
|
|
26
24
|
var className = _a.className, children = _a.children, _c = _a.defaultActiveStep, defaultActiveStep = _c === void 0 ? 1 : _c, activeStepProp = _a.activeStep, _d = _a.isMarkCompletedSteps, isMarkCompletedSteps = _d === void 0 ? true : _d, _e = _a.isVerticalAlign, isVerticalAlign = _e === void 0 ? false : _e, _f = _a.ordered, ordered = _f === void 0 ? true : _f, _g = _a.interactive, interactive = _g === void 0 ? true : _g, checkIsStepDisabled = _a.checkIsStepDisabled, checkIsStepError = _a.checkIsStepError, checkIsStepWarning = _a.checkIsStepWarning, checkIsStepWaiting = _a.checkIsStepWaiting, checkIsStepPositive = _a.checkIsStepPositive, checkIsStepCustom = _a.checkIsStepCustom, onChange = _a.onChange, dataTestId = _a.dataTestId;
|
|
27
25
|
var _h = React.useState(activeStepProp || defaultActiveStep), activeStep = _h[0], setActiveStep = _h[1];
|
|
28
|
-
var stepsLength = React__default
|
|
26
|
+
var stepsLength = React__default.default.Children.count(children);
|
|
29
27
|
React.useEffect(function () {
|
|
30
28
|
if (activeStepProp) {
|
|
31
29
|
setActiveStep(activeStepProp);
|
|
@@ -39,9 +37,9 @@ var Steps = function (_a) {
|
|
|
39
37
|
};
|
|
40
38
|
if (!stepsLength)
|
|
41
39
|
return null;
|
|
42
|
-
return (React__default
|
|
43
|
-
_b[styles__default
|
|
44
|
-
_b)), "data-test-id": dataTestId }, React__default
|
|
40
|
+
return (React__default.default.createElement("div", { className: cn__default.default(className, styles__default.default.component, (_b = {},
|
|
41
|
+
_b[styles__default.default.vertical] = isVerticalAlign,
|
|
42
|
+
_b)), "data-test-id": dataTestId }, React__default.default.Children.map(children, function (step, index) {
|
|
45
43
|
var stepNumber = index + 1;
|
|
46
44
|
var isSelected = stepNumber === activeStep;
|
|
47
45
|
var isStepCompleted = isMarkCompletedSteps && stepNumber < activeStep;
|
|
@@ -53,7 +51,7 @@ var Steps = function (_a) {
|
|
|
53
51
|
var customStepIndicator = checkIsStepCustom && checkIsStepCustom(stepNumber);
|
|
54
52
|
var isNotLastStep = stepsLength !== stepNumber;
|
|
55
53
|
var isInteractive = !disabled && interactive;
|
|
56
|
-
return (React__default
|
|
54
|
+
return (React__default.default.createElement(components_step_Component.Step, { stepNumber: stepNumber, isSelected: isSelected, isStepCompleted: isStepCompleted, disabled: disabled, isPositive: isPositive, isError: isError, isWarning: isWarning, isWaiting: isWaiting, customStepIndicator: customStepIndicator, onClick: handleStepClick, ordered: ordered, interactive: isInteractive, isVerticalAlign: isVerticalAlign, isNotLastStep: isNotLastStep, key: stepNumber }, step));
|
|
57
55
|
})));
|
|
58
56
|
};
|
|
59
57
|
|
|
@@ -1,25 +1,23 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var React = require('react');
|
|
6
4
|
var cn = require('classnames');
|
|
7
5
|
var hooks = require('@alfalab/hooks');
|
|
8
6
|
var CheckmarkCircleMIcon = require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
|
|
9
|
-
var ExclamationCircleMIcon = require('@alfalab/icons-glyph/ExclamationCircleMIcon');
|
|
10
7
|
var ClockMIcon = require('@alfalab/icons-glyph/ClockMIcon');
|
|
11
|
-
require('@alfalab/
|
|
12
|
-
require('../step-indicator/index.module.css');
|
|
8
|
+
var ExclamationCircleMIcon = require('@alfalab/icons-glyph/ExclamationCircleMIcon');
|
|
13
9
|
var components_stepIndicator_Component = require('../step-indicator/Component.js');
|
|
14
10
|
var styles = require('./index.module.css');
|
|
11
|
+
require('@alfalab/core-components-badge/cssm');
|
|
12
|
+
require('../step-indicator/index.module.css');
|
|
15
13
|
|
|
16
|
-
function
|
|
14
|
+
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
17
15
|
|
|
18
|
-
var React__default = /*#__PURE__*/
|
|
19
|
-
var cn__default = /*#__PURE__*/
|
|
20
|
-
var styles__default = /*#__PURE__*/
|
|
16
|
+
var React__default = /*#__PURE__*/_interopDefaultCompat(React);
|
|
17
|
+
var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
|
|
18
|
+
var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
|
|
21
19
|
|
|
22
|
-
|
|
20
|
+
/******************************************************************************
|
|
23
21
|
Copyright (c) Microsoft Corporation.
|
|
24
22
|
|
|
25
23
|
Permission to use, copy, modify, and/or distribute this software for any
|
|
@@ -68,57 +66,57 @@ var Step = function (_a) {
|
|
|
68
66
|
};
|
|
69
67
|
var getStepIndicator = function () {
|
|
70
68
|
if (customStepIndicator) {
|
|
71
|
-
return React__default
|
|
69
|
+
return React__default.default.createElement(components_stepIndicator_Component.StepIndicator, __assign({}, customStepIndicator));
|
|
72
70
|
}
|
|
73
71
|
if (isError) {
|
|
74
|
-
return React__default
|
|
72
|
+
return React__default.default.createElement(components_stepIndicator_Component.StepIndicator, { iconColor: 'negative', content: React__default.default.createElement(ExclamationCircleMIcon.ExclamationCircleMIcon, null) });
|
|
75
73
|
}
|
|
76
74
|
if (isWarning) {
|
|
77
|
-
return React__default
|
|
75
|
+
return React__default.default.createElement(components_stepIndicator_Component.StepIndicator, { iconColor: 'attention', content: React__default.default.createElement(ExclamationCircleMIcon.ExclamationCircleMIcon, null) });
|
|
78
76
|
}
|
|
79
77
|
if (isWaiting) {
|
|
80
|
-
return React__default
|
|
78
|
+
return React__default.default.createElement(components_stepIndicator_Component.StepIndicator, { iconColor: 'secondary', content: React__default.default.createElement(ClockMIcon.ClockMIcon, null) });
|
|
81
79
|
}
|
|
82
80
|
if (isPositive) {
|
|
83
|
-
return React__default
|
|
81
|
+
return React__default.default.createElement(components_stepIndicator_Component.StepIndicator, { iconColor: 'positive', content: React__default.default.createElement(CheckmarkCircleMIcon.CheckmarkCircleMIcon, null) });
|
|
84
82
|
}
|
|
85
83
|
if (isStepCompleted) {
|
|
86
|
-
return (React__default
|
|
84
|
+
return (React__default.default.createElement(components_stepIndicator_Component.StepIndicator, { iconColor: 'positive', content: React__default.default.createElement(CheckmarkCircleMIcon.CheckmarkCircleMIcon, null), className: styles__default.default.completedIndicator }));
|
|
87
85
|
}
|
|
88
86
|
if (!ordered) {
|
|
89
|
-
return (React__default
|
|
90
|
-
React__default
|
|
87
|
+
return (React__default.default.createElement("div", { className: styles__default.default.checkbox },
|
|
88
|
+
React__default.default.createElement("span", { className: styles__default.default.dot })));
|
|
91
89
|
}
|
|
92
90
|
return stepNumber;
|
|
93
91
|
};
|
|
94
92
|
var renderDash = function () {
|
|
95
93
|
var _a;
|
|
96
|
-
return (React__default
|
|
97
|
-
_a[styles__default
|
|
98
|
-
_a[styles__default
|
|
94
|
+
return (React__default.default.createElement("div", { className: cn__default.default(styles__default.default.dash, (_a = {},
|
|
95
|
+
_a[styles__default.default.vertical] = isVerticalAlign,
|
|
96
|
+
_a[styles__default.default.completed] = isStepCompleted,
|
|
99
97
|
_a)) }));
|
|
100
98
|
};
|
|
101
|
-
return (React__default
|
|
102
|
-
_b[styles__default
|
|
103
|
-
_b[styles__default
|
|
104
|
-
_b[styles__default
|
|
105
|
-
_b[styles__default
|
|
106
|
-
_b[styles__default
|
|
107
|
-
_b[styles__default
|
|
108
|
-
_b[styles__default
|
|
99
|
+
return (React__default.default.createElement("div", { role: 'button', tabIndex: 0, ref: stepRef, className: cn__default.default(styles__default.default.step, (_b = {},
|
|
100
|
+
_b[styles__default.default.completed] = isStepCompleted,
|
|
101
|
+
_b[styles__default.default.error] = isError,
|
|
102
|
+
_b[styles__default.default.selected] = isSelected,
|
|
103
|
+
_b[styles__default.default.disabled] = disabled,
|
|
104
|
+
_b[styles__default.default.focused] = focused,
|
|
105
|
+
_b[styles__default.default.vertical] = isVerticalAlign,
|
|
106
|
+
_b[styles__default.default.interactive] = interactive,
|
|
109
107
|
_b)), onClick: handleButtonClick, onKeyDown: handleKeyDown },
|
|
110
|
-
React__default
|
|
111
|
-
_c[styles__default
|
|
112
|
-
_c[styles__default
|
|
108
|
+
React__default.default.createElement("div", { className: cn__default.default(styles__default.default.indicator, (_c = {},
|
|
109
|
+
_c[styles__default.default.vertical] = isVerticalAlign,
|
|
110
|
+
_c[styles__default.default.interactive] = interactive,
|
|
113
111
|
_c)) },
|
|
114
|
-
React__default
|
|
115
|
-
_d[styles__default
|
|
116
|
-
_d[styles__default
|
|
117
|
-
_d[styles__default
|
|
112
|
+
React__default.default.createElement("div", { className: cn__default.default(styles__default.default.option, (_d = {},
|
|
113
|
+
_d[styles__default.default.unordered] = !ordered,
|
|
114
|
+
_d[styles__default.default.vertical] = isVerticalAlign,
|
|
115
|
+
_d[styles__default.default.error] = isError,
|
|
118
116
|
_d)) }, getStepIndicator()),
|
|
119
117
|
isNotLastStep && isVerticalAlign && renderDash()),
|
|
120
|
-
React__default
|
|
121
|
-
_e[styles__default
|
|
118
|
+
React__default.default.createElement("div", { className: cn__default.default(styles__default.default.text, (_e = {},
|
|
119
|
+
_e[styles__default.default.interactive] = interactive,
|
|
122
120
|
_e)), onClick: handleTextClick }, children),
|
|
123
121
|
isNotLastStep && !isVerticalAlign && renderDash()));
|
|
124
122
|
};
|
|
@@ -1,17 +1,15 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
var components_step_Component = require('./Component.js');
|
|
5
4
|
require('react');
|
|
6
5
|
require('classnames');
|
|
7
|
-
var components_step_Component = require('./Component.js');
|
|
8
6
|
require('@alfalab/hooks');
|
|
9
7
|
require('@alfalab/icons-glyph/CheckmarkCircleMIcon');
|
|
10
|
-
require('@alfalab/icons-glyph/ExclamationCircleMIcon');
|
|
11
8
|
require('@alfalab/icons-glyph/ClockMIcon');
|
|
9
|
+
require('@alfalab/icons-glyph/ExclamationCircleMIcon');
|
|
10
|
+
require('../step-indicator/Component.js');
|
|
12
11
|
require('@alfalab/core-components-badge/cssm');
|
|
13
12
|
require('../step-indicator/index.module.css');
|
|
14
|
-
require('../step-indicator/Component.js');
|
|
15
13
|
require('./index.module.css');
|
|
16
14
|
|
|
17
15
|
|