@dxc-technology/halstack-react 0.0.0-0355f44 → 0.0.0-05400ed

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 (11) hide show
  1. package/dist/V3Textarea/V3Textarea.js +264 -0
  2. package/dist/common/variables.js +35 -35
  3. package/dist/file-input/FileInput.js +2 -2
  4. package/dist/main.d.ts +1 -1
  5. package/dist/main.js +6 -6
  6. package/dist/textarea/Textarea.js +227 -122
  7. package/dist/{new-textarea → textarea}/index.d.ts +1 -1
  8. package/package.json +1 -1
  9. package/test/{NewTextarea.test.js → Textarea.test.js} +16 -18
  10. package/test/{TextArea.test.js → V3TextArea.test.js} +6 -7
  11. package/dist/new-textarea/NewTextarea.js +0 -369
package/dist/textarea/Textarea.js CHANGED
@@ -21,22 +21,70 @@ var _react = _interopRequireWildcard(require("react"));
21
21
 
22
22
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
23
23
 
24
- var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
24
+ var _utils = require("../common/utils.js");
25
+
26
+ var _useTheme = _interopRequireDefault(require("../useTheme.js"));
25
27
 
26
28
  var _propTypes = _interopRequireDefault(require("prop-types"));
27
29
 
28
30
  var _variables = require("../common/variables.js");
29
31
 
30
- var _utils = require("../common/utils.js");
32
+ var _uuid = require("uuid");
31
33
 
32
- var _useTheme = _interopRequireDefault(require("../useTheme.js"));
34
+ var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
33
35
 
34
- var _RequiredComponent = _interopRequireDefault(require("../common/RequiredComponent"));
36
+ function _templateObject6() {
37
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n font-family: ", ";\n font-size: 0.75rem;\n font-weight: 400;\n min-height: 1.5em;\n line-height: 1.5em;\n"]);
35
38
 
36
- var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
39
+ _templateObject6 = function _templateObject6() {
40
+ return data;
41
+ };
42
+
43
+ return data;
44
+ }
45
+
46
+ function _templateObject5() {
47
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n ", ";\n ", "\n\n margin: calc(1rem * 0.25) 0;\n padding: calc(1rem * 0.5) calc(1rem * 1);\n box-shadow: 0 0 0 2px transparent;\n border-radius: calc(1rem * 0.25);\n border: 1px solid\n ", ";\n ", "\n\n ", ";\n ", ";\n\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: 1.5em;\n\n ::placeholder {\n color: ", ";\n }\n"]);
48
+
49
+ _templateObject5 = function _templateObject5() {
50
+ return data;
51
+ };
52
+
53
+ return data;
54
+ }
55
+
56
+ function _templateObject4() {
57
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: ", ";\n"]);
58
+
59
+ _templateObject4 = function _templateObject4() {
60
+ return data;
61
+ };
62
+
63
+ return data;
64
+ }
65
+
66
+ function _templateObject3() {
67
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n font-weight: ", ";\n"]);
68
+
69
+ _templateObject3 = function _templateObject3() {
70
+ return data;
71
+ };
72
+
73
+ return data;
74
+ }
75
+
76
+ function _templateObject2() {
77
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: ", ";\n"]);
78
+
79
+ _templateObject2 = function _templateObject2() {
80
+ return data;
81
+ };
82
+
83
+ return data;
84
+ }
37
85
 
38
86
  function _templateObject() {
39
- var data = (0, _taggedTemplateLiteral2["default"])(["\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n display: inline-block;\n position: relative;\n height: auto;\n width: ", ";\n\n .MuiTextField-root {\n width: 100%;\n\n .MuiFormHelperText-root {\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n margin-top: 6px;\n }\n .MuiFormLabel-root {\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n color: ", ";\n padding-left: \"inherit\";\n\n &.Mui-disabled {\n color: ", " !important;\n cursor: not-allowed;\n }\n\n &.Mui-focused {\n color: ", ";\n &.MuiInputLabel-shrink {\n transform: \"translate(0, 1.5px) scale(0.75);\";\n }\n }\n\n &.MuiInputLabel-shrink {\n font-family: ", ";\n transform: \"translate(0, 1.5px) scale(0.75)\";\n }\n\n &.Mui-error {\n color: ", ";\n }\n\n &:not(.MuiInputLabel-shrink) {\n font-family: ", ";\n color: ", ";\n & + div,\n & + div + p {\n color: ", ";\n }\n }\n\n &.MuiInputLabel-shrink {\n & + div::before {\n border-color: ", ";\n }\n & + div + p {\n color: ", ";\n }\n }\n }\n .MuiInputBase-root.MuiInput-root.MuiInput-underline {\n &::before {\n border-bottom: ", ";\n }\n\n &:not(.Mui-error)::before,\n &:not(&.Mui-focused)::before {\n border-bottom: ", ";\n }\n\n &::after {\n border-bottom: ", ";\n }\n\n .MuiInputBase-inputMultiline {\n overflow: auto !important;\n\n ::-webkit-scrollbar {\n width: 3px;\n }\n\n ::-webkit-scrollbar-track {\n background-color: ", ";\n border-radius: 3px;\n }\n\n ::-webkit-scrollbar-thumb {\n background-color: ", ";\n border-radius: 3px;\n }\n }\n\n &.Mui-error {\n &::before {\n border-width: ", ";\n border-color: ", ";\n }\n &::after {\n transform: scaleX(0);\n }\n }\n\n &.Mui-focused {\n &::after {\n border-width: calc(", " + 1px);\n border-color: ", ";\n }\n &.Mui-error::after {\n border-color: ", ";\n }\n }\n\n &.Mui-disabled {\n cursor: not-allowed;\n\n &::before {\n border-bottom: ", ";\n border-bottom-style: solid;\n }\n }\n\n .MuiInputBase-input {\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n letter-spacing: ", ";\n color: ", ";\n line-height: ", ";\n padding-left: \"inherit\";\n text-overflow: ellipsis;\n\n &.Mui-disabled {\n cursor: not-allowed;\n color: ", ";\n }\n }\n\n &:hover:not(.Mui-disabled):before &:hover:not(.Mui-error):before {\n border-bottom-color: ", ";\n }\n }\n\n & > p {\n &.Mui-error {\n color: ", ";\n }\n &.Mui-disabled {\n color: ", " !important;\n cursor: not-allowed;\n }\n }\n }\n"]);
87
+ var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n\n width: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"]);
40
88
 
41
89
  _templateObject = function _templateObject() {
42
90
  return data;
@@ -45,28 +93,48 @@ function _templateObject() {
45
93
  return data;
46
94
  }
47
95
 
48
- var DxcTextarea = function DxcTextarea(_ref) {
96
+ var getNotOptionalErrorMessage = function getNotOptionalErrorMessage() {
97
+ return "This field is required. Please, enter a value.";
98
+ };
99
+
100
+ var getLengthErrorMessage = function getLengthErrorMessage(length) {
101
+ return "Min length ".concat(length.min, ", max length ").concat(length.max, ".");
102
+ };
103
+
104
+ var getPatternErrorMessage = function getPatternErrorMessage() {
105
+ return "Please match the format requested.";
106
+ };
107
+
108
+ var patternMatch = function patternMatch(pattern, value) {
109
+ return new RegExp(pattern).test(value);
110
+ };
111
+
112
+ var DxcTextarea = _react["default"].forwardRef(function (_ref, ref) {
49
113
  var _ref$label = _ref.label,
50
- label = _ref$label === void 0 ? " " : _ref$label,
114
+ label = _ref$label === void 0 ? "" : _ref$label,
51
115
  _ref$name = _ref.name,
52
116
  name = _ref$name === void 0 ? "" : _ref$name,
53
117
  value = _ref.value,
54
- _ref$assistiveText = _ref.assistiveText,
55
- assistiveText = _ref$assistiveText === void 0 ? "" : _ref$assistiveText,
56
- _ref$disabled = _ref.disabled,
57
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
58
- _ref$onChange = _ref.onChange,
59
- onChange = _ref$onChange === void 0 ? "" : _ref$onChange,
60
- _ref$onBlur = _ref.onBlur,
61
- onBlur = _ref$onBlur === void 0 ? "" : _ref$onBlur,
62
- _ref$numRows = _ref.numRows,
63
- numRows = _ref$numRows === void 0 ? 4 : _ref$numRows,
64
- _ref$invalid = _ref.invalid,
65
- invalid = _ref$invalid === void 0 ? false : _ref$invalid,
66
- _ref$required = _ref.required,
67
- required = _ref$required === void 0 ? false : _ref$required,
118
+ _ref$helperText = _ref.helperText,
119
+ helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
68
120
  _ref$placeholder = _ref.placeholder,
69
121
  placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
122
+ _ref$disabled = _ref.disabled,
123
+ disabled = _ref$disabled === void 0 ? false : _ref$disabled,
124
+ _ref$optional = _ref.optional,
125
+ optional = _ref$optional === void 0 ? false : _ref$optional,
126
+ _ref$verticalGrow = _ref.verticalGrow,
127
+ verticalGrow = _ref$verticalGrow === void 0 ? "auto" : _ref$verticalGrow,
128
+ _ref$rows = _ref.rows,
129
+ rows = _ref$rows === void 0 ? 4 : _ref$rows,
130
+ onChange = _ref.onChange,
131
+ onBlur = _ref.onBlur,
132
+ _ref$error = _ref.error,
133
+ error = _ref$error === void 0 ? "" : _ref$error,
134
+ pattern = _ref.pattern,
135
+ length = _ref.length,
136
+ _ref$autocomplete = _ref.autocomplete,
137
+ autocomplete = _ref$autocomplete === void 0 ? "off" : _ref$autocomplete,
70
138
  margin = _ref.margin,
71
139
  _ref$size = _ref.size,
72
140
  size = _ref$size === void 0 ? "medium" : _ref$size,
@@ -78,63 +146,111 @@ var DxcTextarea = function DxcTextarea(_ref) {
78
146
  innerValue = _useState2[0],
79
147
  setInnerValue = _useState2[1];
80
148
 
149
+ var _useState3 = (0, _react.useState)("textarea-".concat((0, _uuid.v4)())),
150
+ _useState4 = (0, _slicedToArray2["default"])(_useState3, 1),
151
+ textareaId = _useState4[0];
152
+
81
153
  var colorsTheme = (0, _useTheme["default"])();
82
154
  var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
155
+ var textareaRef = (0, _react.useRef)(null);
156
+ var errorId = "error-message-".concat(textareaId);
83
157
 
84
- var handlerTextareaChange = function handlerTextareaChange(event) {
85
- if (value === null || value === undefined) {
86
- if (typeof onChange === "function") {
87
- setInnerValue(event.target.value);
88
- onChange(event.target.value);
89
- } else {
90
- setInnerValue(event.target.value);
91
- }
92
- } else if (onChange !== "") {
93
- if (typeof onChange === "function") {
94
- onChange(event.target.value);
95
- } else {
96
- setInnerValue(event.target.value);
97
- }
98
- }
158
+ var isNotOptional = function isNotOptional(value) {
159
+ return value === "" && !optional;
99
160
  };
100
161
 
101
- var handlerTextareaBlur = function handlerTextareaBlur(event) {
102
- setInnerValue(event.target.value);
162
+ var isLengthIncorrect = function isLengthIncorrect(value) {
163
+ return value !== "" && length && length.min && length.max && (value.length < length.min || value.length > length.max);
164
+ };
103
165
 
104
- if (onBlur) {
105
- onBlur(event.target.value);
106
- }
166
+ var changeValue = function changeValue(newValue) {
167
+ value !== null && value !== void 0 ? value : setInnerValue(newValue);
168
+ if (isNotOptional(newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
169
+ value: newValue,
170
+ error: getNotOptionalErrorMessage()
171
+ });else if (isLengthIncorrect(newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
172
+ value: newValue,
173
+ error: getLengthErrorMessage(length)
174
+ });else if (newValue && pattern && !patternMatch(pattern, newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
175
+ value: newValue,
176
+ error: getPatternErrorMessage()
177
+ });else onChange === null || onChange === void 0 ? void 0 : onChange({
178
+ value: newValue,
179
+ error: null
180
+ });
181
+ };
182
+
183
+ var handleTOnBlur = function handleTOnBlur(event) {
184
+ if (isNotOptional(event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
185
+ value: event.target.value,
186
+ error: getNotOptionalErrorMessage()
187
+ });else if (isLengthIncorrect(event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
188
+ value: event.target.value,
189
+ error: getLengthErrorMessage(length)
190
+ });else if (event.target.value && pattern && !patternMatch(pattern, event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
191
+ value: event.target.value,
192
+ error: getPatternErrorMessage()
193
+ });else onBlur === null || onBlur === void 0 ? void 0 : onBlur({
194
+ value: event.target.value,
195
+ error: null
196
+ });
107
197
  };
108
198
 
199
+ var handleTOnChange = function handleTOnChange(event) {
200
+ changeValue(event.target.value);
201
+ };
202
+
203
+ (0, _react.useLayoutEffect)(function () {
204
+ if (verticalGrow === "auto") {
205
+ var textareaLineHeight = parseInt(window.getComputedStyle(textareaRef.current)["line-height"]);
206
+ var textareaPaddingTopBottom = parseInt(window.getComputedStyle(textareaRef.current)["padding-top"]) * 2;
207
+ textareaRef.current.style.height = "".concat(textareaLineHeight * rows, "px");
208
+ var newHeight = textareaRef.current.scrollHeight - textareaPaddingTopBottom;
209
+ textareaRef.current.style.height = "".concat(newHeight, "px");
210
+ }
211
+ }, [value, verticalGrow, rows, innerValue]);
109
212
  return _react["default"].createElement(_styledComponents.ThemeProvider, {
110
213
  theme: colorsTheme.textarea
111
- }, _react["default"].createElement(TextContainer, {
112
- required: required,
113
- assistiveText: assistiveText,
214
+ }, _react["default"].createElement(TextareaContainer, {
114
215
  margin: margin,
115
216
  size: size,
217
+ ref: ref
218
+ }, _react["default"].createElement(Label, {
219
+ htmlFor: textareaId,
220
+ disabled: disabled,
116
221
  backgroundType: backgroundType
117
- }, _react["default"].createElement(_TextField["default"], {
118
- error: invalid,
119
- value: value !== null ? value : innerValue,
120
- name: name,
121
- multiline: true,
222
+ }, label, " ", optional && _react["default"].createElement(OptionalLabel, null, "(Optional)")), _react["default"].createElement(HelperText, {
122
223
  disabled: disabled,
123
- label: required ? _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(_RequiredComponent["default"], null), label) : label,
124
- helperText: assistiveText,
125
- onChange: handlerTextareaChange,
126
- onBlur: onBlur && handlerTextareaBlur || null,
127
- rows: numRows,
224
+ backgroundType: backgroundType
225
+ }, helperText), _react["default"].createElement(Textarea, {
226
+ id: textareaId,
227
+ name: name,
228
+ value: value !== null && value !== void 0 ? value : innerValue,
128
229
  placeholder: placeholder,
129
- inputProps: {
130
- tabIndex: tabIndex
131
- }
132
- })));
133
- };
230
+ verticalGrow: verticalGrow,
231
+ rows: rows,
232
+ onChange: handleTOnChange,
233
+ onBlur: handleTOnBlur,
234
+ disabled: disabled,
235
+ error: error,
236
+ minLength: length === null || length === void 0 ? void 0 : length.min,
237
+ maxLength: length === null || length === void 0 ? void 0 : length.max,
238
+ autoComplete: autocomplete,
239
+ backgroundType: backgroundType,
240
+ ref: textareaRef,
241
+ tabIndex: tabIndex,
242
+ "aria-invalid": error ? "true" : "false",
243
+ "aria-describedby": error ? errorId : undefined,
244
+ "aria-required": optional ? "false" : "true"
245
+ }), !disabled && _react["default"].createElement(Error, {
246
+ id: errorId,
247
+ backgroundType: backgroundType
248
+ }, error)));
249
+ });
134
250
 
135
251
  var sizes = {
136
- small: "42px",
137
- medium: "240px",
252
+ small: "240px",
253
+ medium: "360px",
138
254
  large: "480px",
139
255
  fillParent: "100%"
140
256
  };
@@ -143,7 +259,9 @@ var calculateWidth = function calculateWidth(margin, size) {
143
259
  return size === "fillParent" ? "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")") : sizes[size];
144
260
  };
145
261
 
146
- var TextContainer = _styledComponents["default"].div(_templateObject(), function (props) {
262
+ var TextareaContainer = _styledComponents["default"].div(_templateObject(), function (props) {
263
+ return calculateWidth(props.margin, props.size);
264
+ }, function (props) {
147
265
  return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
148
266
  }, function (props) {
149
267
  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
@@ -153,18 +271,12 @@ var TextContainer = _styledComponents["default"].div(_templateObject(), function
153
271
  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
154
272
  }, function (props) {
155
273
  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
156
- }, function (props) {
157
- return calculateWidth(props.margin, props.size);
274
+ });
275
+
276
+ var Label = _styledComponents["default"].label(_templateObject2(), function (props) {
277
+ return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledLabelFontColorOnDark : props.theme.disabledLabelFontColor : props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
158
278
  }, function (props) {
159
279
  return props.theme.fontFamily;
160
- }, function (props) {
161
- return props.theme.assistiveTextFontSize;
162
- }, function (props) {
163
- return props.theme.assistiveTextFontStyle;
164
- }, function (props) {
165
- return props.theme.assistiveTextFontWeight;
166
- }, function (props) {
167
- return props.theme.assistiveTextLetterSpacing;
168
280
  }, function (props) {
169
281
  return props.theme.labelFontSize;
170
282
  }, function (props) {
@@ -172,49 +284,41 @@ var TextContainer = _styledComponents["default"].div(_templateObject(), function
172
284
  }, function (props) {
173
285
  return props.theme.labelFontWeight;
174
286
  }, function (props) {
175
- return props.theme.labelLetterSpacing;
176
- }, function (props) {
177
- return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
178
- }, function (props) {
179
- return props.backgroundType === "dark" ? props.theme.disabledColorOnDark : props.theme.disabledColor;
180
- }, function (props) {
181
- return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
182
- }, function (props) {
183
- return props.theme.fontFamily;
184
- }, function (props) {
185
- return props.backgroundType === "dark" ? props.theme.errorColorOnDark : props.theme.errorColor;
287
+ return props.theme.labelLineHeight;
288
+ });
289
+
290
+ var OptionalLabel = _styledComponents["default"].span(_templateObject3(), function (props) {
291
+ return props.theme.optionalLabelFontWeight;
292
+ });
293
+
294
+ var HelperText = _styledComponents["default"].span(_templateObject4(), function (props) {
295
+ return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledHelperTextFontColorOnDark : props.theme.disabledHelperTextFontColor : props.backgroundType === "dark" ? props.theme.helperTextFontColorOnDark : props.theme.helperTextFontColor;
186
296
  }, function (props) {
187
297
  return props.theme.fontFamily;
188
298
  }, function (props) {
189
- return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
190
- }, function (props) {
191
- return props.backgroundType === "dark" ? props.theme.assistiveTextFontColorOnDark : props.theme.assistiveTextFontColor;
192
- }, function (props) {
193
- return props.backgroundType ? props.theme.underlineColorOnDark : props.theme.underlineColor;
194
- }, function (props) {
195
- return props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
299
+ return props.theme.helperTextFontSize;
196
300
  }, function (props) {
197
- return "".concat(props.theme.underlineThickness, " solid ").concat(props.backgroundType === "dark" ? props.theme.underlineColorOnDark : props.theme.underlineColor);
301
+ return props.theme.helperTextFontStyle;
198
302
  }, function (props) {
199
- return "".concat(props.theme.underlineThickness, " solid ").concat(props.backgroundType === "dark" ? props.theme.underlineColorOnDark : props.theme.underlineColor);
303
+ return props.theme.helperTextFontWeight;
200
304
  }, function (props) {
201
- return "calc(".concat(props.theme.underlineThickness, " + 1px) solid ").concat(props.backgroundType === "dark" ? props.theme.underlineFocusColorOnDark : props.theme.underlineFocusColor);
202
- }, function (props) {
203
- return props.backgroundType === "dark" ? props.theme.scrollBarTrackColorOnDark : props.theme.scrollBarTrackColor;
204
- }, function (props) {
205
- return props.backgroundType === "dark" ? props.theme.scrollBarThumbColorOnDark : props.theme.scrollBarThumbColor;
305
+ return props.theme.helperTextLineHeight;
306
+ });
307
+
308
+ var Textarea = _styledComponents["default"].textarea(_templateObject5(), function (props) {
309
+ if (props.verticalGrow === "none") return "resize: none;";else if (props.verticalGrow === "auto") return "resize: none; overflow: hidden;";else if (props.verticalGrow === "manual") return "resize: vertical;";else return "resize: none;";
206
310
  }, function (props) {
207
- return props.theme.underlineThickness;
311
+ if (props.disabled) return props.backgroundType === "dark" ? "background-color: ".concat(props.theme.disabledContainerFillColorOnDark, ";") : "background-color: ".concat(props.theme.disabledContainerFillColor, ";");else return "background-color: transparent;";
208
312
  }, function (props) {
209
- return props.backgroundType === "dark" ? props.theme.errorColorOnDark : props.theme.errorColor;
313
+ if (props.disabled) return props.backgroundType === "dark" ? props.theme.disabledBorderColorOnDark : props.theme.disabledBorderColor;else return props.backgroundType === "dark" ? props.theme.enabledBorderColorOnDark : props.theme.enabledBorderColor;
210
314
  }, function (props) {
211
- return props.theme.underlineThickness;
315
+ return props.error && !props.disabled && "border-color: transparent;\n box-shadow: 0 0 0 2px ".concat(props.backgroundType === "dark" ? props.theme.errorBorderColorOnDark : props.theme.errorBorderColor, ";\n ");
212
316
  }, function (props) {
213
- return props.backgroundType === "dark" ? props.theme.underlineFocusColorOnDark : props.theme.underlineFocusColor;
317
+ return props.disabled && "cursor: not-allowed;";
214
318
  }, function (props) {
215
- return props.backgroundType === "dark" ? props.theme.errorColorOnDark : props.theme.errorColor;
319
+ return !props.disabled && "\n &:hover {\n border-color: ".concat(props.error ? "transparent" : props.backgroundType === "dark" ? props.theme.hoverBorderColorOnDark : props.theme.hoverBorderColor, ";\n ").concat(props.error && "box-shadow: 0 0 0 2px ".concat(props.backgroundType === "dark" ? props.theme.hoverErrorBorderColorOnDark : props.theme.hoverErrorBorderColor, ";"), "\n }\n &:focus {\n outline: none;\n border-color: transparent;\n box-shadow: 0 0 0 2px ").concat(props.backgroundType === "dark" ? props.theme.focusBorderColorOnDark : props.theme.focusBorderColor, ";\n }\n &:focus-within {\n outline: none;\n border-color: transparent;\n box-shadow: 0 0 0 2px ").concat(props.backgroundType === "dark" ? props.theme.focusBorderColorOnDark : props.theme.focusBorderColor, ";\n }\n ");
216
320
  }, function (props) {
217
- return "".concat(props.theme.underlineThickness, " solid ").concat(props.backgroundType === "dark" ? props.theme.disabledColorOnDark : props.theme.disabledColor, " !important");
321
+ return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledValueFontColorOnDark : props.theme.disabledValueFontColor : props.backgroundType === "dark" ? props.theme.valueFontColorOnDark : props.theme.valueFontColor;
218
322
  }, function (props) {
219
323
  return props.theme.fontFamily;
220
324
  }, function (props) {
@@ -224,40 +328,41 @@ var TextContainer = _styledComponents["default"].div(_templateObject(), function
224
328
  }, function (props) {
225
329
  return props.theme.valueFontWeight;
226
330
  }, function (props) {
227
- return props.theme.valueLetterSpacing;
228
- }, function (props) {
229
- return props.backgroundType === "dark" ? props.theme.valueFontColorOnDark : props.theme.valueFontColor;
230
- }, function (props) {
231
- return props.theme.valueLineHeight;
232
- }, function (props) {
233
- return props.backgroundType === "dark" ? props.theme.disabledColorOnDark : props.theme.disabledColor;
234
- }, function (props) {
235
- return props.backgroundType === "dark" ? props.theme.underlineFocusColorOnDark : props.theme.underlineFocusColor;
236
- }, function (props) {
237
- return "".concat(props.backgroundType === "dark" ? props.theme.errorColorOnDark : props.theme.errorColor, " !important");
331
+ return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledPlaceholderFontColorOnDark : props.theme.disabledPlaceholderFontColor : props.backgroundType === "dark" ? props.theme.placeholderFontColorOnDark : props.theme.placeholderFontColor;
332
+ });
333
+
334
+ var Error = _styledComponents["default"].span(_templateObject6(), function (props) {
335
+ return props.backgroundType === "dark" ? props.theme.errorMessageColorOnDark : props.theme.errorMessageColor;
238
336
  }, function (props) {
239
- return props.backgroundType === "dark" ? props.theme.disabledColorOnDark : props.theme.disabledColor;
337
+ return props.theme.fontFamily;
240
338
  });
241
339
 
242
340
  DxcTextarea.propTypes = {
243
341
  label: _propTypes["default"].string,
244
342
  name: _propTypes["default"].string,
245
343
  value: _propTypes["default"].string,
246
- assistiveText: _propTypes["default"].string,
247
- disabled: _propTypes["default"].bool,
248
- required: _propTypes["default"].bool,
249
- invalid: _propTypes["default"].bool,
344
+ helperText: _propTypes["default"].string,
250
345
  placeholder: _propTypes["default"].string,
346
+ verticalGrow: _propTypes["default"].oneOf(["auto", "none", "manual"]),
347
+ rows: _propTypes["default"].number,
348
+ length: _propTypes["default"].shape({
349
+ min: _propTypes["default"].number,
350
+ max: _propTypes["default"].number
351
+ }),
352
+ pattern: _propTypes["default"].string,
353
+ disabled: _propTypes["default"].bool,
354
+ optional: _propTypes["default"].bool,
251
355
  onChange: _propTypes["default"].func,
252
356
  onBlur: _propTypes["default"].func,
253
- numRows: _propTypes["default"].number,
254
- size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
357
+ error: _propTypes["default"].string,
358
+ autocomplete: _propTypes["default"].string,
255
359
  margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
256
360
  top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
257
361
  bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
258
362
  left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
259
363
  right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
260
364
  }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
365
+ size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
261
366
  tabIndex: _propTypes["default"].number
262
367
  };
263
368
  var _default = DxcTextarea;
package/dist/{new-textarea → textarea}/index.d.ts RENAMED
@@ -114,4 +114,4 @@ type Props = {
114
114
  ref?: React.RefObject<HTMLDivElement>;
115
115
  };
116
116
 
117
- export default function DxcNewTextarea(props: Props): JSX.Element;
117
+ export default function DxcTextarea(props: Props): JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dxc-technology/halstack-react",
3
- "version": "0.0.0-0355f44",
3
+ "version": "0.0.0-05400ed",
4
4
  "description": "DXC Halstack React components library",
5
5
  "repository": "dxc-technology/halstack-react",
6
6
  "homepage": "http://developer.dxc.com/tools/react",
package/test/{NewTextarea.test.js → Textarea.test.js} RENAMED
@@ -1,21 +1,21 @@
1
1
  import React from "react";
2
2
  import { render, fireEvent } from "@testing-library/react";
3
3
  import userEvent from "@testing-library/user-event";
4
- import DxcNewTextarea from "../src/new-textarea/NewTextarea";
4
+ import DxcTextarea from "../src/textarea/Textarea";
5
5
 
6
- describe("NewTextarea component tests", () => {
6
+ describe("Textarea component tests", () => {
7
7
  test("Renders with correct label", () => {
8
- const { getByText } = render(<DxcNewTextarea label="Example label" />);
8
+ const { getByText } = render(<DxcTextarea label="Example label" />);
9
9
  expect(getByText("Example label")).toBeTruthy();
10
10
  });
11
11
  test("Renders with correct label and helper text", () => {
12
- const { getByText } = render(<DxcNewTextarea label="Example label" helperText="Example helper text" />);
12
+ const { getByText } = render(<DxcTextarea label="Example label" helperText="Example helper text" />);
13
13
  expect(getByText("Example label")).toBeTruthy();
14
14
  expect(getByText("Example helper text")).toBeTruthy();
15
15
  });
16
16
  test("Renders with correct label and optional", () => {
17
17
  const { getByText, getByRole } = render(
18
- <DxcNewTextarea label="Example label" helperText="Example helper text" optional />
18
+ <DxcTextarea label="Example label" helperText="Example helper text" optional />
19
19
  );
20
20
  const textarea = getByRole("textbox");
21
21
  expect(getByText("Example label")).toBeTruthy();
@@ -24,24 +24,24 @@ describe("NewTextarea component tests", () => {
24
24
  expect(textarea.getAttribute("aria-required")).toBe("false");
25
25
  });
26
26
  test("Renders with correct placeholder", () => {
27
- const { getByRole } = render(<DxcNewTextarea placeholder="Placeholder" />);
27
+ const { getByRole } = render(<DxcTextarea placeholder="Placeholder" />);
28
28
  const textarea = getByRole("textbox");
29
29
  expect(textarea.getAttribute("placeholder")).toBe("Placeholder");
30
30
  });
31
31
  test("Renders with error message", () => {
32
- const { getByText, getByRole } = render(<DxcNewTextarea error="Error message." />);
32
+ const { getByText, getByRole } = render(<DxcTextarea error="Error message." />);
33
33
  const textarea = getByRole("textbox");
34
34
  expect(getByText("Error message.")).toBeTruthy();
35
35
  expect(textarea.getAttribute("aria-invalid")).toBe("true");
36
36
  expect(textarea.getAttribute("aria-describedBy")).not.toBeNull();
37
37
  });
38
38
  test("Renders with correct default rows", () => {
39
- const { getByLabelText } = render(<DxcNewTextarea label="Example label" rows={10} />);
39
+ const { getByLabelText } = render(<DxcTextarea label="Example label" rows={10} />);
40
40
  const textarea = getByLabelText("Example label");
41
41
  expect(textarea.rows).toBe(10);
42
42
  });
43
43
  test("Renders with correct accesibility attributes", () => {
44
- const { getByLabelText } = render(<DxcNewTextarea label="Example label" />);
44
+ const { getByLabelText } = render(<DxcTextarea label="Example label" />);
45
45
  const textarea = getByLabelText("Example label");
46
46
  expect(textarea.getAttribute("aria-invalid")).toBe("false");
47
47
  expect(textarea.getAttribute("aria-describedBy")).toBeNull();
@@ -51,7 +51,7 @@ describe("NewTextarea component tests", () => {
51
51
  const onChange = jest.fn();
52
52
  const onBlur = jest.fn();
53
53
  const { getByLabelText } = render(
54
- <DxcNewTextarea label="Example label" placeholder="Placeholder" onChange={onChange} onBlur={onBlur} />
54
+ <DxcTextarea label="Example label" placeholder="Placeholder" onChange={onChange} onBlur={onBlur} />
55
55
  );
56
56
  const textarea = getByLabelText("Example label");
57
57
 
@@ -67,7 +67,7 @@ describe("NewTextarea component tests", () => {
67
67
  test("Not optional constraint (onChange)", () => {
68
68
  const onChange = jest.fn();
69
69
  const { getByLabelText } = render(
70
- <DxcNewTextarea label="Example label" placeholder="Placeholder" onChange={onChange} />
70
+ <DxcTextarea label="Example label" placeholder="Placeholder" onChange={onChange} />
71
71
  );
72
72
  const textarea = getByLabelText("Example label");
73
73
 
@@ -83,7 +83,7 @@ describe("NewTextarea component tests", () => {
83
83
  const onChange = jest.fn();
84
84
  const onBlur = jest.fn();
85
85
  const { getByLabelText } = render(
86
- <DxcNewTextarea
86
+ <DxcTextarea
87
87
  label="Example label"
88
88
  placeholder="Placeholder"
89
89
  onChange={onChange}
@@ -112,7 +112,7 @@ describe("NewTextarea component tests", () => {
112
112
  const onChange = jest.fn();
113
113
  const onBlur = jest.fn();
114
114
  const { getByLabelText } = render(
115
- <DxcNewTextarea
115
+ <DxcTextarea
116
116
  label="Example label"
117
117
  placeholder="Placeholder"
118
118
  onChange={onChange}
@@ -141,7 +141,7 @@ describe("NewTextarea component tests", () => {
141
141
  const onChange = jest.fn();
142
142
  const onBlur = jest.fn();
143
143
  const { getByLabelText, getByText, queryByText } = render(
144
- <DxcNewTextarea
144
+ <DxcTextarea
145
145
  label="Example label"
146
146
  placeholder="Placeholder"
147
147
  onChange={onChange}
@@ -174,7 +174,7 @@ describe("NewTextarea component tests", () => {
174
174
  });
175
175
  test("onBlur function is called correctly", () => {
176
176
  const onBlur = jest.fn();
177
- const { getByLabelText } = render(<DxcNewTextarea label="Example label" onBlur={onBlur} />);
177
+ const { getByLabelText } = render(<DxcTextarea label="Example label" onBlur={onBlur} />);
178
178
  const textarea = getByLabelText("Example label");
179
179
  fireEvent.change(textarea, { target: { value: "Blur test" } });
180
180
  fireEvent.blur(textarea);
@@ -183,9 +183,7 @@ describe("NewTextarea component tests", () => {
183
183
  });
184
184
  test("onChange function is called correctly", () => {
185
185
  const onChange = jest.fn();
186
- const { getByLabelText } = render(
187
- <DxcNewTextarea label="Example label" value="Test value" onChange={onChange} />
188
- );
186
+ const { getByLabelText } = render(<DxcTextarea label="Example label" value="Test value" onChange={onChange} />);
189
187
  const textarea = getByLabelText("Example label");
190
188
  fireEvent.change(textarea, { target: { value: "Controlled test" } });
191
189
  expect(onChange).toHaveBeenCalled();