@dxc-technology/halstack-react 0.0.0-4b95ba0 → 0.0.0-4c3af14

package/tag/Tag.stories.tsx

@@ -39,7 +39,10 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="With label and icon" theme="light" level={4} />
-      <DxcTag label="Tag" icon="https://iconape.com/wp-content/files/yd/367773/svg/logo-linkedin-logo-icon-png-svg.png" />
+      <DxcTag
+        label="Tag"
+        icon="https://iconape.com/wp-content/files/yd/367773/svg/logo-linkedin-logo-icon-png-svg.png"
+      />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="With right icon" theme="light" level={4} />
@@ -95,32 +98,33 @@ export const Chromatic = () => (
     <Title title="Sizes" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Small size" theme="light" level={4} />
-      <DxcTag label="Small" size="small" />
+      <DxcTag label="Small" size="small" icon={icon} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Medium size" theme="light" level={4} />
-      <DxcTag label="Medium size medium s" size="medium" />
+      <DxcTag label="Medium size medium s" size="medium" icon={icon} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Medium size with ellipsis" theme="light" level={4} />
-      <DxcTag label="Medium size medium si medium" size="medium" />
+      <DxcTag label="Medium size medium si medium" size="medium" icon={icon} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Large size" theme="light" level={4} />
-      <DxcTag label="Large size large size large size large size large size" size="large" />
+      <DxcTag label="Large size large size large size large size large size" size="large" icon={icon} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Large size with ellipsis" theme="light" level={4} />
-      <DxcTag label="Large size large size large size large size large size large size" size="large" />
+      <DxcTag label="Large size large size large size large size large size large size" size="large" icon={icon} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="FillParent size" theme="light" level={4} />
-      <DxcTag label="FillParent" size="fillParent" />
+      <DxcTag label="FillParent" size="fillParent" icon={icon} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="FitContent size" theme="light" level={4} />
-      <DxcTag label="FitContent" size="fitContent" />
+      <DxcTag label="FitContent" size="fitContent" icon={icon} />
     </ExampleContainer>
+    <hr />
   </>
 );
 

package/tag/Tag.test.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Tag = _interopRequireDefault(require("./Tag"));
+
+describe("Tag component tests", function () {
+  test("Tag renders with correct label", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      label: "tag-test"
+    })),
+        getByText = _render.getByText;
+
+    expect(getByText("tag-test")).toBeTruthy();
+  });
+  test("Tag renders with correct label before", function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      label: "tag-test",
+      labelPosition: "before"
+    })),
+        getByText = _render2.getByText;
+
+    expect(getByText("tag-test")).toBeTruthy();
+  });
+  test("Tag renders with correct icon", function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      label: "tag-test",
+      icon: "/test-icon.jpg"
+    })),
+        getByRole = _render3.getByRole;
+
+    expect(getByRole("img").getAttribute("src")).toBe("/test-icon.jpg");
+  });
+  test("Tag renders with link href", function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      label: "tag-test",
+      linkHref: "/test/page"
+    })),
+        getByRole = _render4.getByRole;
+
+    expect(getByRole("link").getAttribute("href")).toBe("/test/page");
+  });
+  test("Call correct function on click", function () {
+    var onClick = jest.fn();
+
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      label: "tag-test",
+      onClick: onClick
+    })),
+        getByText = _render5.getByText;
+
+    _react2.fireEvent.click(getByText("tag-test"));
+
+    expect(onClick).toHaveBeenCalled();
+  });
+});

package/text-input/Suggestion.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { SuggestionProps } from "./types";
+declare const _default: React.MemoExoticComponent<({ id, value, onClick, suggestion, isLast, visuallyFocused, highlighted, }: SuggestionProps) => JSX.Element>;
+export default _default;

package/text-input/Suggestion.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject, _templateObject2;
+
+var Suggestion = function Suggestion(_ref) {
+  var id = _ref.id,
+      value = _ref.value,
+      onClick = _ref.onClick,
+      suggestion = _ref.suggestion,
+      isLast = _ref.isLast,
+      visuallyFocused = _ref.visuallyFocused,
+      highlighted = _ref.highlighted;
+  var regEx = new RegExp(value, "i");
+  var matchedWords = suggestion.match(regEx);
+  var noMatchedWords = suggestion.replace(regEx, "");
+  return /*#__PURE__*/_react["default"].createElement(SuggestionContainer, {
+    id: id,
+    onClick: onClick,
+    visuallyFocused: visuallyFocused,
+    role: "option",
+    "aria-selected": visuallyFocused ? "true" : undefined
+  }, /*#__PURE__*/_react["default"].createElement(StyledSuggestion, {
+    last: isLast,
+    visuallyFocused: visuallyFocused
+  }, highlighted ? suggestion : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("strong", null, matchedWords), noMatchedWords)));
+};
+
+var SuggestionContainer = _styledComponents["default"].li(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  padding: 0 0.5rem;\n  line-height: 1.715em;\n  cursor: pointer;\n\n  box-shadow: inset 0 0 0 2px\n    ", ";\n  &:hover {\n    background-color: ", ";\n  }\n  &:active {\n    background-color: ", ";\n  }\n"])), function (props) {
+  return props.visuallyFocused ? props.theme.focusListOptionBorderColor : "transparent";
+}, function (props) {
+  return props.theme.hoverListOptionBackgroundColor;
+}, function (props) {
+  return props.theme.activeListOptionBackgroundColor;
+});
+
+var StyledSuggestion = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  padding: 0.25rem 0.5rem 0.188rem 0.5rem;\n  ", ";\n"])), function (props) {
+  return props.last || props.visuallyFocused ? "border-bottom: 1px solid transparent" : "border-bottom: 1px solid ".concat(props.theme.listOptionDividerColor);
+});
+
+var _default = /*#__PURE__*/_react["default"].memo(Suggestion);
+
+exports["default"] = _default;

package/text-input/TextInput.js

@@ -21,6 +21,8 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
+var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
+
 var _variables = require("../common/variables.js");
 
 var _utils = require("../common/utils.js");
@@ -31,7 +33,9 @@ var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColor
 
 var _NumberInputContext = _interopRequireDefault(require("../number-input/NumberInputContext"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
+var _Suggestion = _interopRequireDefault(require("./Suggestion"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -135,6 +139,8 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
   var label = _ref.label,
       _ref$name = _ref.name,
       name = _ref$name === void 0 ? "" : _ref$name,
+      _ref$defaultValue = _ref.defaultValue,
+      defaultValue = _ref$defaultValue === void 0 ? "" : _ref$defaultValue,
       value = _ref.value,
       helperText = _ref.helperText,
       _ref$placeholder = _ref.placeholder,
@@ -169,7 +175,7 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
       _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
       inputId = _useState2[0];
 
-  var _useState3 = (0, _react.useState)(""),
+  var _useState3 = (0, _react.useState)(defaultValue),
       _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
       innerValue = _useState4[0],
       setInnerValue = _useState4[1];
@@ -203,6 +209,7 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
   var inputRef = (0, _react.useRef)(null);
   var actionRef = (0, _react.useRef)(null);
   var colorsTheme = (0, _useTheme["default"])();
+  var translatedLabels = (0, _useTranslatedLabels["default"])();
   var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
   var autosuggestId = "".concat(inputId, "-listBox");
   var errorId = "error-".concat(inputId);
@@ -219,10 +226,6 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     return value && minLength && maxLength && (value.length < minLength || value.length > maxLength);
   };
 
-  var getLengthErrorMessage = function getLengthErrorMessage() {
-    return "Min length ".concat(minLength, ", max length ").concat(maxLength, ".");
-  };
-
   var isNumberIncorrect = function isNumberIncorrect(value) {
     return (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber) && parseInt(value) < (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber) || (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber) && parseInt(value) > (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber);
   };
@@ -234,7 +237,7 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
   };
 
   var getNumberErrorMessage = function getNumberErrorMessage(value) {
-    if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.minNumber && parseInt(value) < (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber)) return "Value must be greater than or equal to ".concat(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber, ".");else if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.maxNumber && parseInt(value) > (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber)) return "Value must be less than or equal to ".concat(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber, ".");
+    if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.minNumber && parseInt(value) < (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber)) return translatedLabels.numberInput.valueGreaterThanOrEqualToErrorMessage(numberInputContext.minNumber);else if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.maxNumber && parseInt(value) > (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber)) return translatedLabels.numberInput.valueLessThanOrEqualToErrorMessage(numberInputContext.maxNumber);
   };
 
   var hasSuggestions = function hasSuggestions() {
@@ -255,19 +258,18 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     var changedValue = typeof newValue === "number" ? newValue.toString() : newValue;
     if (isNotOptional(newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
       value: changedValue,
-      error: getNotOptionalErrorMessage()
+      error: translatedLabels.formFields.requiredValueErrorMessage
     });else if (isLengthIncorrect(newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
       value: changedValue,
-      error: getLengthErrorMessage()
+      error: translatedLabels.formFields.lengthErrorMessage(minLength, maxLength)
     });else if (newValue && pattern && !patternMatch(pattern, newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
       value: changedValue,
-      error: getPatternErrorMessage()
+      error: translatedLabels.formFields.formatRequestedErrorMessage
     });else if (newValue && isNumberIncorrect(newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
       value: changedValue,
       error: getNumberErrorMessage(newValue)
     });else onChange === null || onChange === void 0 ? void 0 : onChange({
-      value: changedValue,
-      error: null
+      value: changedValue
     });
   };
 
@@ -289,19 +291,18 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     suggestions && closeSuggestions();
     if (isNotOptional(event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
       value: event.target.value,
-      error: getNotOptionalErrorMessage()
+      error: translatedLabels.formFields.requiredValueErrorMessage
     });else if (isLengthIncorrect(event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
       value: event.target.value,
-      error: getLengthErrorMessage()
+      error: translatedLabels.formFields.lengthErrorMessage(minLength, maxLength)
     });else if (event.target.value && pattern && !patternMatch(pattern, event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
       value: event.target.value,
-      error: getPatternErrorMessage()
+      error: translatedLabels.formFields.formatRequestedErrorMessage
     });else if (event.target.value && isNumberIncorrect(event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
       value: event.target.value,
       error: getNumberErrorMessage(event.target.value)
     });else onBlur === null || onBlur === void 0 ? void 0 : onBlur({
-      value: event.target.value,
-      error: null
+      value: event.target.value
     });
   };
 
@@ -468,45 +469,22 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
 
     (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.typeNumber) === "number" && setNumberProps(numberInputContext.typeNumber, numberInputContext.minNumber, numberInputContext.maxNumber, numberInputContext.stepNumber);
   }, [value, innerValue, suggestions, numberInputContext]);
-
-  var HighlightedSuggestion = function HighlightedSuggestion(_ref2) {
-    var suggestion = _ref2.suggestion,
-        index = _ref2.index;
-    var regEx = new RegExp(value !== null && value !== void 0 ? value : innerValue, "i");
-    var matchedWords = suggestion.match(regEx);
-    var noMatchedWords = suggestion.replace(regEx, "");
-    var isLastOption = index === lastOptionIndex;
-    return /*#__PURE__*/_react["default"].createElement(Suggestion, {
-      id: "suggestion-".concat(index),
-      onClick: function onClick() {
-        changeValue(suggestion);
-        closeSuggestions();
-      },
-      visualFocused: visualFocusedSuggIndex === index,
-      role: "option",
-      "aria-selected": visualFocusedSuggIndex === index && "true"
-    }, /*#__PURE__*/_react["default"].createElement(StyledSuggestion, {
-      last: isLastOption,
-      visualFocused: visualFocusedSuggIndex === index
-    }, typeof suggestions === "function" ? suggestion : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("strong", null, matchedWords), noMatchedWords)));
-  };
-
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.textInput
-  }, /*#__PURE__*/_react["default"].createElement(DxcInput, {
+  }, /*#__PURE__*/_react["default"].createElement(TextInputContainer, {
     margin: margin,
-    ref: ref,
-    size: size
+    size: size,
+    ref: ref
   }, label && /*#__PURE__*/_react["default"].createElement(Label, {
     htmlFor: inputId,
     disabled: disabled,
     backgroundType: backgroundType,
-    helperText: helperText
-  }, label, " ", optional && /*#__PURE__*/_react["default"].createElement(OptionalLabel, null, "(Optional)")), helperText && /*#__PURE__*/_react["default"].createElement(HelperText, {
+    hasHelperText: helperText ? true : false
+  }, label, " ", optional && /*#__PURE__*/_react["default"].createElement(OptionalLabel, null, translatedLabels.formFields.optionalLabel)), helperText && /*#__PURE__*/_react["default"].createElement(HelperText, {
     disabled: disabled,
     backgroundType: backgroundType
   }, helperText), /*#__PURE__*/_react["default"].createElement(InputContainer, {
-    error: error,
+    error: error ? true : false,
     disabled: disabled,
     backgroundType: backgroundType,
     onClick: handleInputContainerOnClick,
@@ -557,8 +535,8 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     },
     backgroundType: backgroundType,
     tabIndex: tabIndex,
-    title: "Clear field",
-    "aria-label": "Clear field"
+    title: translatedLabels.textInput.clearFieldActionTitle,
+    "aria-label": translatedLabels.textInput.clearFieldActionTitle
   }, textInputIcons.clear), (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.typeNumber) === "number" ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Action, {
     ref: actionRef,
     disabled: disabled,
@@ -570,8 +548,8 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     },
     backgroundType: backgroundType,
     tabIndex: tabIndex,
-    title: "Decrement value",
-    "aria-label": "Decrement value"
+    title: translatedLabels.numberInput.decrementValueTitle,
+    "aria-label": translatedLabels.numberInput.decrementValueTitle
   }, textInputIcons.decrement), /*#__PURE__*/_react["default"].createElement(Action, {
     ref: actionRef,
     disabled: disabled,
@@ -583,8 +561,8 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     },
     backgroundType: backgroundType,
     tabIndex: tabIndex,
-    title: "Increment value",
-    "aria-label": "Increment value"
+    title: translatedLabels.numberInput.incrementValueTitle,
+    "aria-label": translatedLabels.numberInput.incrementValueTitle
   }, textInputIcons.increment)) : action && /*#__PURE__*/_react["default"].createElement(Action, {
     ref: actionRef,
     disabled: disabled,
@@ -605,7 +583,7 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     backgroundType: backgroundType
   }, suffix), isOpen && (filteredSuggestions.length > 0 || isSearching || isAutosuggestError) && /*#__PURE__*/_react["default"].createElement(Suggestions, {
     id: autosuggestId,
-    isError: isAutosuggestError,
+    error: isAutosuggestError ? true : false,
     onMouseDown: function onMouseDown(event) {
       event.preventDefault();
     },
@@ -613,14 +591,22 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     role: "listbox",
     "aria-label": label
   }, !isSearching && !isAutosuggestError && filteredSuggestions.length > 0 && filteredSuggestions.map(function (suggestion, index) {
-    return /*#__PURE__*/_react["default"].createElement(HighlightedSuggestion, {
-      key: "suggestion-".concat((0, _uuid.v4)()),
+    return /*#__PURE__*/_react["default"].createElement(_Suggestion["default"], {
+      key: "suggestion-".concat(index),
+      id: "suggestion-".concat(index),
+      value: value !== null && value !== void 0 ? value : innerValue,
+      onClick: function onClick() {
+        changeValue(suggestion);
+        closeSuggestions();
+      },
       suggestion: suggestion,
-      index: index
+      isLast: index === lastOptionIndex,
+      visuallyFocused: visualFocusedSuggIndex === index,
+      highlighted: typeof suggestions === "function"
     });
-  }), isSearching && /*#__PURE__*/_react["default"].createElement(SuggestionsSystemMessage, null, "Searching..."), isAutosuggestError && /*#__PURE__*/_react["default"].createElement(SuggestionsError, null, /*#__PURE__*/_react["default"].createElement(SuggestionsErrorIcon, {
+  }), isSearching && /*#__PURE__*/_react["default"].createElement(SuggestionsSystemMessage, null, translatedLabels.textInput.searchingMessage), isAutosuggestError && /*#__PURE__*/_react["default"].createElement(SuggestionsError, null, /*#__PURE__*/_react["default"].createElement(SuggestionsErrorIcon, {
     backgroundType: backgroundType
-  }, textInputIcons.error), "Error fetching data"))), !disabled && typeof error === "string" && /*#__PURE__*/_react["default"].createElement(Error, {
+  }, textInputIcons.error), translatedLabels.textInput.fetchingDataErrorMessage))), !disabled && typeof error === "string" && /*#__PURE__*/_react["default"].createElement(Error, {
     id: errorId,
     backgroundType: backgroundType,
     "aria-live": error ? "assertive" : "off"
@@ -638,7 +624,7 @@ var calculateWidth = function calculateWidth(margin, size) {
   return size === "fillParent" ? "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")") : sizes[size];
 };
 
-var DxcInput = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n\n  width: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"])), function (props) {
+var TextInputContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n\n  width: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"])), function (props) {
   return calculateWidth(props.margin, props.size);
 }, function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
@@ -665,7 +651,7 @@ var Label = _styledComponents["default"].label(_templateObject2 || (_templateObj
 }, function (props) {
   return props.theme.labelLineHeight;
 }, function (props) {
-  return !props.helperText && "margin-bottom: 0.25rem";
+  return !props.hasHelperText && "margin-bottom: 0.25rem";
 });
 
 var OptionalLabel = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  font-weight: ", ";\n"])), function (props) {
@@ -753,9 +739,9 @@ var Error = _styledComponents["default"].span(_templateObject12 || (_templateObj
 });
 
 var Suggestions = _styledComponents["default"].ul(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  z-index: 1;\n  max-height: 304px;\n  overflow-y: auto;\n  top: calc(100% + 4px);\n  left: 0;\n  margin: 0;\n  padding: 0.25rem 0;\n  width: 100%;\n  background-color: ", ";\n  border: 1px solid\n    ", ";\n  border-radius: 0.25rem;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n  cursor: default;\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n"])), function (props) {
-  return props.isError ? props.theme.errorListDialogBackgroundColor : props.theme.listDialogBackgroundColor;
+  return props.error ? props.theme.errorListDialogBackgroundColor : props.theme.listDialogBackgroundColor;
 }, function (props) {
-  return props.isError ? props.theme.errorListDialogBorderColor : props.theme.listDialogBorderColor;
+  return props.error ? props.theme.errorListDialogBorderColor : props.theme.listDialogBorderColor;
 }, function (props) {
   return props.theme.listOptionFontColor;
 }, function (props) {
@@ -768,27 +754,15 @@ var Suggestions = _styledComponents["default"].ul(_templateObject13 || (_templat
   return props.theme.listOptionFontWeight;
 });
 
-var Suggestion = _styledComponents["default"].li(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  padding: 0 0.5rem;\n  line-height: 1.715em;\n  cursor: pointer;\n\n  box-shadow: inset 0 0 0 2px\n    ", ";\n  &:hover {\n    background-color: ", ";\n  }\n  &:active {\n    background-color: ", ";\n  }\n"])), function (props) {
-  return props.visualFocused ? props.theme.focusListOptionBorderColor : "transparent";
-}, function (props) {
-  return props.theme.hoverListOptionBackgroundColor;
-}, function (props) {
-  return props.theme.activeListOptionBackgroundColor;
-});
-
-var StyledSuggestion = _styledComponents["default"].span(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  padding: 0.25rem 0.5rem 0.188rem 0.5rem;\n  ", ";\n"])), function (props) {
-  return props.last || props.visualFocused ? "border-bottom: 1px solid transparent" : "border-bottom: 1px solid ".concat(props.theme.listOptionDividerColor);
-});
-
-var SuggestionsSystemMessage = _styledComponents["default"].span(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  padding: 0.25rem 1rem;\n  color: ", ";\n  line-height: 1.715em;\n"])), function (props) {
+var SuggestionsSystemMessage = _styledComponents["default"].span(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  padding: 0.25rem 1rem;\n  color: ", ";\n  line-height: 1.715em;\n"])), function (props) {
   return props.theme.systemMessageFontColor;
 });
 
-var SuggestionsErrorIcon = _styledComponents["default"].span(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  margin-right: 0.5rem;\n  height: 18px;\n  width: 18px;\n  color: ", ";\n"])), function (props) {
+var SuggestionsErrorIcon = _styledComponents["default"].span(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  margin-right: 0.5rem;\n  height: 18px;\n  width: 18px;\n  color: ", ";\n"])), function (props) {
   return props.backgroundType === "dark" ? props.theme.errorIconColorOnDark : props.theme.errorIconColor;
 });
 
-var SuggestionsError = _styledComponents["default"].span(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  padding: 0.25rem 1rem;\n  align-items: center;\n  line-height: 1.715em;\n  color: ", ";\n"])), function (props) {
+var SuggestionsError = _styledComponents["default"].span(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  padding: 0.25rem 1rem;\n  align-items: center;\n  line-height: 1.715em;\n  color: ", ";\n"])), function (props) {
   return props.theme.errorListDialogFontColor;
 });
 

package/text-input/TextInput.stories.tsx

@@ -70,7 +70,7 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-hover">
       <Title title="Hovered action" theme="light" level={4} />
-      <DxcTextInput label="Text input" value="Text" clearable />
+      <DxcTextInput label="Text input" defaultValue="Text" clearable />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Without label" theme="light" level={4} />
@@ -82,13 +82,13 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Helper text, optional, and clearable" theme="light" level={4} />
-      <DxcTextInput label="Text input" clearable value="Text" helperText="Help message" optional />
+      <DxcTextInput label="Text input" clearable defaultValue="Text" helperText="Help message" optional />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Clearable and large icon action" theme="light" level={4} />
       <DxcTextInput
         label="Text input"
-        value="Text text text text text text text text text text"
+        defaultValue="Text text text text text text text text text text"
         clearable
         action={actionLargeIcon}
       />
@@ -107,12 +107,21 @@ export const Chromatic = () => (
         label="Error text input"
         helperText="Help message"
         error="Error message."
-        value="Text"
+        defaultValue="Text"
         clearable
         optional
         action={action}
       />
     </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="Invalid and hovered" theme="light" level={4} />
+      <DxcTextInput
+        label="Error text input"
+        helperText="Help message"
+        placeholder="Placeholder"
+        error="Error message."
+      />
+    </ExampleContainer>
     <ExampleContainer>
       <Title title="Disabled and placeholder" theme="light" level={4} />
       <DxcTextInput label="Disabled text input" disabled placeholder="Placeholder" />
@@ -124,7 +133,7 @@ export const Chromatic = () => (
         helperText="Help message"
         disabled
         optional
-        value="Text"
+        defaultValue="Text"
         action={action}
       />
     </ExampleContainer>
@@ -137,7 +146,7 @@ export const Chromatic = () => (
         optional
         prefix="+34"
         suffix="USD"
-        value="Text"
+        defaultValue="Text"
         action={action}
       />
     </ExampleContainer>
@@ -154,7 +163,7 @@ export const Chromatic = () => (
         </ExampleContainer>
         <ExampleContainer pseudoState="pseudo-hover">
           <Title title="Hovered action" theme="dark" level={4} />
-          <DxcTextInput label="Text input" value="Text" clearable />
+          <DxcTextInput label="Text input" defaultValue="Text" clearable />
         </ExampleContainer>
         <ExampleContainer>
           <Title title="Helper text, placeholder, optional and action" theme="dark" level={4} />
@@ -168,16 +177,25 @@ export const Chromatic = () => (
           />
         </ExampleContainer>
         <ExampleContainer>
-          <Title title="Helper text, clearable value, error and action" theme="dark" level={4} />
+          <Title title="Invalid" theme="dark" level={4} />
           <DxcTextInput
-            label="Text input"
+            label="Error text input"
             helperText="Help message"
             error="Error message."
-            value="Text"
+            defaultValue="Text"
             clearable
             action={action}
           />
         </ExampleContainer>
+        <ExampleContainer pseudoState="pseudo-hover">
+          <Title title="Invalid and hovered" theme="dark" level={4} />
+          <DxcTextInput
+            label="Error text input"
+            helperText="Help message"
+            placeholder="Placeholder"
+            error="Error message."
+          />
+        </ExampleContainer>
         <ExampleContainer>
           <Title title="Prefix and suffix" theme="dark" level={4} />
           <DxcTextInput label="With prefix and suffix" prefix="+34" suffix="USD" />
@@ -193,7 +211,7 @@ export const Chromatic = () => (
             helperText="Help message"
             disabled
             optional
-            value="Text"
+            defaultValue="Text"
             action={action}
           />
         </ExampleContainer>
@@ -206,7 +224,7 @@ export const Chromatic = () => (
             optional
             prefix="+34"
             suffix="USD"
-            value="Text"
+            defaultValue="Text"
             action={action}
           />
         </ExampleContainer>