@pareto-engineering/design-system 2.0.0-alpha.40 → 2.0.0-alpha.41
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/dist/cjs/c/ContentSlides/common/HorizontalMenu/HorizontalMenu.js +11 -4
- package/dist/cjs/f/fields/RatingsInput/RatingsInput.js +10 -2
- package/dist/cjs/f/fields/TextInput/TextInput.js +10 -3
- package/dist/es/c/ContentSlides/common/HorizontalMenu/HorizontalMenu.js +11 -4
- package/dist/es/f/fields/RatingsInput/RatingsInput.js +10 -2
- package/dist/es/f/fields/TextInput/TextInput.js +10 -3
- package/package.json +1 -1
- package/src/ui/c/ContentSlides/common/HorizontalMenu/HorizontalMenu.jsx +8 -1
- package/src/ui/f/fields/RatingsInput/RatingsInput.jsx +10 -2
- package/src/ui/f/fields/TextInput/TextInput.jsx +7 -0
|
@@ -39,7 +39,8 @@ var HorizontalMenu = _ref => {
|
|
|
39
39
|
logoColor,
|
|
40
40
|
hideBackIcon,
|
|
41
41
|
stepsBackwards,
|
|
42
|
-
customPrevStep
|
|
42
|
+
customPrevStep,
|
|
43
|
+
color // ...otherProps
|
|
43
44
|
|
|
44
45
|
} = _ref;
|
|
45
46
|
var {
|
|
@@ -68,7 +69,7 @@ var HorizontalMenu = _ref => {
|
|
|
68
69
|
progress: currentStep.progress,
|
|
69
70
|
attached: true,
|
|
70
71
|
height: ".4em",
|
|
71
|
-
color:
|
|
72
|
+
color: color,
|
|
72
73
|
className: "y-background1 b-dark-y"
|
|
73
74
|
}), /*#__PURE__*/React.createElement("div", {
|
|
74
75
|
className: _bem.default.elementContent
|
|
@@ -125,11 +126,17 @@ HorizontalMenu.propTypes = {
|
|
|
125
126
|
/**
|
|
126
127
|
* Hide back icon boolean
|
|
127
128
|
*/
|
|
128
|
-
hideBackIcon: _propTypes.default.bool
|
|
129
|
+
hideBackIcon: _propTypes.default.bool,
|
|
130
|
+
|
|
131
|
+
/**
|
|
132
|
+
* String that will represent color for Progress bar
|
|
133
|
+
*/
|
|
134
|
+
color: _propTypes.default.string
|
|
129
135
|
};
|
|
130
136
|
HorizontalMenu.defaultProps = {
|
|
131
137
|
logoColor: 'paragraph',
|
|
132
|
-
stepsBackwards: 1
|
|
138
|
+
stepsBackwards: 1,
|
|
139
|
+
color: 'main2'
|
|
133
140
|
};
|
|
134
141
|
var _default = HorizontalMenu;
|
|
135
142
|
exports.default = _default;
|
|
@@ -37,6 +37,7 @@ var RatingsInput = _ref => {
|
|
|
37
37
|
showRatingValue,
|
|
38
38
|
oneInputLabel,
|
|
39
39
|
label,
|
|
40
|
+
labelColor,
|
|
40
41
|
labelMax,
|
|
41
42
|
labelMin,
|
|
42
43
|
displayRatingsLabel,
|
|
@@ -54,6 +55,7 @@ var RatingsInput = _ref => {
|
|
|
54
55
|
}, /*#__PURE__*/React.createElement(_common2.FormLabel, {
|
|
55
56
|
className: ['input-label', oneInputLabel ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v'].filter(e => e).join(' '),
|
|
56
57
|
name: name,
|
|
58
|
+
color: labelColor,
|
|
57
59
|
optional: optional
|
|
58
60
|
}, label), /*#__PURE__*/React.createElement("div", {
|
|
59
61
|
className: "stars"
|
|
@@ -134,11 +136,17 @@ RatingsInput.propTypes = {
|
|
|
134
136
|
/**
|
|
135
137
|
* If the slide will only have one input
|
|
136
138
|
*/
|
|
137
|
-
oneInputLabel: _propTypes.default.bool
|
|
139
|
+
oneInputLabel: _propTypes.default.bool,
|
|
140
|
+
|
|
141
|
+
/**
|
|
142
|
+
* String that will represent color for the label
|
|
143
|
+
*/
|
|
144
|
+
labelColor: _propTypes.default.string
|
|
138
145
|
};
|
|
139
146
|
RatingsInput.defaultProps = {
|
|
140
147
|
labelMin: 'not satisfied.',
|
|
141
|
-
labelMax: 'very satisfied.'
|
|
148
|
+
labelMax: 'very satisfied.',
|
|
149
|
+
labelColor: 'main2'
|
|
142
150
|
};
|
|
143
151
|
|
|
144
152
|
var _default = /*#__PURE__*/(0, React.memo)(RatingsInput);
|
|
@@ -44,7 +44,8 @@ var TextInput = _ref => {
|
|
|
44
44
|
oneInputLabel,
|
|
45
45
|
description,
|
|
46
46
|
disabled,
|
|
47
|
-
placeholder
|
|
47
|
+
placeholder,
|
|
48
|
+
optional // ...otherProps
|
|
48
49
|
|
|
49
50
|
} = _ref;
|
|
50
51
|
(0, React.useLayoutEffect)(() => {
|
|
@@ -62,7 +63,8 @@ var TextInput = _ref => {
|
|
|
62
63
|
}, /*#__PURE__*/React.createElement(_common.FormLabel, {
|
|
63
64
|
className: [oneInputLabel ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v'].filter(e => e).join(' '),
|
|
64
65
|
name: name,
|
|
65
|
-
color: labelColor
|
|
66
|
+
color: labelColor,
|
|
67
|
+
optional: optional
|
|
66
68
|
}, label), /*#__PURE__*/React.createElement("input", _extends({
|
|
67
69
|
id: name,
|
|
68
70
|
className: "input",
|
|
@@ -139,7 +141,12 @@ TextInput.propTypes = {
|
|
|
139
141
|
/**
|
|
140
142
|
* The text input color
|
|
141
143
|
*/
|
|
142
|
-
color: _propTypes.default.string
|
|
144
|
+
color: _propTypes.default.string,
|
|
145
|
+
|
|
146
|
+
/**
|
|
147
|
+
* Whether the input is optional or not
|
|
148
|
+
*/
|
|
149
|
+
optional: _propTypes.default.bool
|
|
143
150
|
};
|
|
144
151
|
TextInput.defaultProps = {
|
|
145
152
|
type: 'text',
|
|
@@ -19,7 +19,8 @@ const HorizontalMenu = ({
|
|
|
19
19
|
logoColor,
|
|
20
20
|
hideBackIcon,
|
|
21
21
|
stepsBackwards,
|
|
22
|
-
customPrevStep
|
|
22
|
+
customPrevStep,
|
|
23
|
+
color // ...otherProps
|
|
23
24
|
|
|
24
25
|
}) => {
|
|
25
26
|
const {
|
|
@@ -48,7 +49,7 @@ const HorizontalMenu = ({
|
|
|
48
49
|
progress: currentStep.progress,
|
|
49
50
|
attached: true,
|
|
50
51
|
height: ".4em",
|
|
51
|
-
color:
|
|
52
|
+
color: color,
|
|
52
53
|
className: "y-background1 b-dark-y"
|
|
53
54
|
}), /*#__PURE__*/React.createElement("div", {
|
|
54
55
|
className: styleNames.elementContent
|
|
@@ -105,10 +106,16 @@ HorizontalMenu.propTypes = {
|
|
|
105
106
|
/**
|
|
106
107
|
* Hide back icon boolean
|
|
107
108
|
*/
|
|
108
|
-
hideBackIcon: PropTypes.bool
|
|
109
|
+
hideBackIcon: PropTypes.bool,
|
|
110
|
+
|
|
111
|
+
/**
|
|
112
|
+
* String that will represent color for Progress bar
|
|
113
|
+
*/
|
|
114
|
+
color: PropTypes.string
|
|
109
115
|
};
|
|
110
116
|
HorizontalMenu.defaultProps = {
|
|
111
117
|
logoColor: 'paragraph',
|
|
112
|
-
stepsBackwards: 1
|
|
118
|
+
stepsBackwards: 1,
|
|
119
|
+
color: 'main2'
|
|
113
120
|
};
|
|
114
121
|
export default HorizontalMenu;
|
|
@@ -21,6 +21,7 @@ const RatingsInput = ({
|
|
|
21
21
|
showRatingValue,
|
|
22
22
|
oneInputLabel,
|
|
23
23
|
label,
|
|
24
|
+
labelColor,
|
|
24
25
|
labelMax,
|
|
25
26
|
labelMin,
|
|
26
27
|
displayRatingsLabel,
|
|
@@ -38,6 +39,7 @@ const RatingsInput = ({
|
|
|
38
39
|
}, /*#__PURE__*/React.createElement(FormLabel, {
|
|
39
40
|
className: ['input-label', oneInputLabel ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v'].filter(e => e).join(' '),
|
|
40
41
|
name: name,
|
|
42
|
+
color: labelColor,
|
|
41
43
|
optional: optional
|
|
42
44
|
}, label), /*#__PURE__*/React.createElement("div", {
|
|
43
45
|
className: "stars"
|
|
@@ -118,10 +120,16 @@ RatingsInput.propTypes = {
|
|
|
118
120
|
/**
|
|
119
121
|
* If the slide will only have one input
|
|
120
122
|
*/
|
|
121
|
-
oneInputLabel: PropTypes.bool
|
|
123
|
+
oneInputLabel: PropTypes.bool,
|
|
124
|
+
|
|
125
|
+
/**
|
|
126
|
+
* String that will represent color for the label
|
|
127
|
+
*/
|
|
128
|
+
labelColor: PropTypes.string
|
|
122
129
|
};
|
|
123
130
|
RatingsInput.defaultProps = {
|
|
124
131
|
labelMin: 'not satisfied.',
|
|
125
|
-
labelMax: 'very satisfied.'
|
|
132
|
+
labelMax: 'very satisfied.',
|
|
133
|
+
labelColor: 'main2'
|
|
126
134
|
};
|
|
127
135
|
export default /*#__PURE__*/memo(RatingsInput);
|
|
@@ -27,7 +27,8 @@ const TextInput = ({
|
|
|
27
27
|
oneInputLabel,
|
|
28
28
|
description,
|
|
29
29
|
disabled,
|
|
30
|
-
placeholder
|
|
30
|
+
placeholder,
|
|
31
|
+
optional // ...otherProps
|
|
31
32
|
|
|
32
33
|
}) => {
|
|
33
34
|
useLayoutEffect(() => {
|
|
@@ -45,7 +46,8 @@ const TextInput = ({
|
|
|
45
46
|
}, /*#__PURE__*/React.createElement(FormLabel, {
|
|
46
47
|
className: [oneInputLabel ? 'md-s2 s0 v1 mb-v' : 'v50 mb-v'].filter(e => e).join(' '),
|
|
47
48
|
name: name,
|
|
48
|
-
color: labelColor
|
|
49
|
+
color: labelColor,
|
|
50
|
+
optional: optional
|
|
49
51
|
}, label), /*#__PURE__*/React.createElement("input", _extends({
|
|
50
52
|
id: name,
|
|
51
53
|
className: "input",
|
|
@@ -122,7 +124,12 @@ TextInput.propTypes = {
|
|
|
122
124
|
/**
|
|
123
125
|
* The text input color
|
|
124
126
|
*/
|
|
125
|
-
color: PropTypes.string
|
|
127
|
+
color: PropTypes.string,
|
|
128
|
+
|
|
129
|
+
/**
|
|
130
|
+
* Whether the input is optional or not
|
|
131
|
+
*/
|
|
132
|
+
optional: PropTypes.bool
|
|
126
133
|
};
|
|
127
134
|
TextInput.defaultProps = {
|
|
128
135
|
type: 'text',
|
package/package.json
CHANGED
|
@@ -24,6 +24,7 @@ const HorizontalMenu = ({
|
|
|
24
24
|
hideBackIcon,
|
|
25
25
|
stepsBackwards,
|
|
26
26
|
customPrevStep,
|
|
27
|
+
color,
|
|
27
28
|
// ...otherProps
|
|
28
29
|
}) => {
|
|
29
30
|
const {
|
|
@@ -59,7 +60,7 @@ const HorizontalMenu = ({
|
|
|
59
60
|
>
|
|
60
61
|
{
|
|
61
62
|
(currentStep?.progress > 0)
|
|
62
|
-
&& <ProgressBar progress={currentStep.progress} attached height=".4em" color=
|
|
63
|
+
&& <ProgressBar progress={currentStep.progress} attached height=".4em" color={color} className="y-background1 b-dark-y" />
|
|
63
64
|
}
|
|
64
65
|
<div className={styleNames.elementContent}>
|
|
65
66
|
<div className="left">
|
|
@@ -128,11 +129,17 @@ HorizontalMenu.propTypes = {
|
|
|
128
129
|
* Hide back icon boolean
|
|
129
130
|
*/
|
|
130
131
|
hideBackIcon:PropTypes.bool,
|
|
132
|
+
|
|
133
|
+
/**
|
|
134
|
+
* String that will represent color for Progress bar
|
|
135
|
+
*/
|
|
136
|
+
color:PropTypes.string,
|
|
131
137
|
}
|
|
132
138
|
|
|
133
139
|
HorizontalMenu.defaultProps = {
|
|
134
140
|
logoColor :'paragraph',
|
|
135
141
|
stepsBackwards:1,
|
|
142
|
+
color :'main2',
|
|
136
143
|
}
|
|
137
144
|
|
|
138
145
|
export default HorizontalMenu
|
|
@@ -28,6 +28,7 @@ const RatingsInput = ({
|
|
|
28
28
|
showRatingValue,
|
|
29
29
|
oneInputLabel,
|
|
30
30
|
label,
|
|
31
|
+
labelColor,
|
|
31
32
|
labelMax,
|
|
32
33
|
labelMin,
|
|
33
34
|
displayRatingsLabel,
|
|
@@ -58,6 +59,7 @@ const RatingsInput = ({
|
|
|
58
59
|
.filter((e) => e)
|
|
59
60
|
.join(' ')}
|
|
60
61
|
name={name}
|
|
62
|
+
color={labelColor}
|
|
61
63
|
optional={optional}
|
|
62
64
|
>
|
|
63
65
|
{ label }
|
|
@@ -136,11 +138,17 @@ RatingsInput.propTypes = {
|
|
|
136
138
|
* If the slide will only have one input
|
|
137
139
|
*/
|
|
138
140
|
oneInputLabel :PropTypes.bool,
|
|
141
|
+
|
|
142
|
+
/**
|
|
143
|
+
* String that will represent color for the label
|
|
144
|
+
*/
|
|
145
|
+
labelColor:PropTypes.string,
|
|
139
146
|
}
|
|
140
147
|
|
|
141
148
|
RatingsInput.defaultProps = {
|
|
142
|
-
labelMin:'not satisfied.',
|
|
143
|
-
labelMax:'very satisfied.',
|
|
149
|
+
labelMin :'not satisfied.',
|
|
150
|
+
labelMax :'very satisfied.',
|
|
151
|
+
labelColor:'main2',
|
|
144
152
|
}
|
|
145
153
|
|
|
146
154
|
export default memo(RatingsInput)
|
|
@@ -34,6 +34,7 @@ const TextInput = ({
|
|
|
34
34
|
description,
|
|
35
35
|
disabled,
|
|
36
36
|
placeholder,
|
|
37
|
+
optional,
|
|
37
38
|
// ...otherProps
|
|
38
39
|
}) => {
|
|
39
40
|
useLayoutEffect(() => {
|
|
@@ -62,6 +63,7 @@ const TextInput = ({
|
|
|
62
63
|
.join(' ')}
|
|
63
64
|
name={name}
|
|
64
65
|
color={labelColor}
|
|
66
|
+
optional={optional}
|
|
65
67
|
>
|
|
66
68
|
{ label }
|
|
67
69
|
</FormLabel>
|
|
@@ -156,6 +158,11 @@ TextInput.propTypes = {
|
|
|
156
158
|
* The text input color
|
|
157
159
|
*/
|
|
158
160
|
color:PropTypes.string,
|
|
161
|
+
|
|
162
|
+
/**
|
|
163
|
+
* Whether the input is optional or not
|
|
164
|
+
*/
|
|
165
|
+
optional:PropTypes.bool,
|
|
159
166
|
}
|
|
160
167
|
|
|
161
168
|
TextInput.defaultProps = {
|