@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.
@@ -39,7 +39,8 @@ var HorizontalMenu = _ref => {
39
39
  logoColor,
40
40
  hideBackIcon,
41
41
  stepsBackwards,
42
- customPrevStep // ...otherProps
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: "main2",
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 // ...otherProps
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 // ...otherProps
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: "main2",
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 // ...otherProps
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pareto-engineering/design-system",
3
- "version": "2.0.0-alpha.40",
3
+ "version": "2.0.0-alpha.41",
4
4
  "description": "",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/es/index.js",
@@ -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="main2" className="y-background1 b-dark-y" />
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 = {