@dxc-technology/halstack-react 0.0.0-b061aa1 → 0.0.0-b0ab1e3

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/tag/types.d.ts

@@ -6,20 +6,8 @@ declare type Margin = {
     left?: Space;
     right?: Space;
 };
-declare type SVG = React.SVGProps<SVGSVGElement> | React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
-declare type Props = {
-    /**
-     * Element used as the icon that will be placed next to the label.
-     */
-    icon?: SVG;
-    /**
-     * @deprecated URL of the icon.
-     */
-    iconSrc?: string;
-    /**
-     * Text to be placed next inside the tag.
-     */
-    label?: string;
+declare type SVG = React.SVGProps<SVGSVGElement>;
+declare type TagCommonProps = {
     /**
      * If defined, the tag will be displayed as an anchor, using this prop as "href".
      * Component will show some visual feedback on hover.
@@ -57,4 +45,25 @@ declare type Props = {
      */
     tabIndex?: number;
 };
+declare type TagLabelProps = TagCommonProps & {
+    /**
+     * Element or path used as the icon that will be placed next to the label.
+     */
+    icon?: string | SVG;
+    /**
+     * Text to be placed next inside the tag.
+     */
+    label: string;
+};
+declare type TagIconProps = TagCommonProps & {
+    /**
+     * Element or path used as the icon that will be placed next to the label.
+     */
+    icon: string | SVG;
+    /**
+     * Text to be placed next inside the tag.
+     */
+    label?: string;
+};
+declare type Props = TagLabelProps | TagIconProps;
 export default Props;

package/text/Text.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare type TextProps = {
+    as?: "p" | "span";
+    children: React.ReactNode;
+};
+declare function Text({ as, children }: TextProps): JSX.Element;
+export default Text;

package/text/Text.js

@@ -0,0 +1,30 @@
+"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;
+
+function Text(_ref) {
+  var _ref$as = _ref.as,
+      as = _ref$as === void 0 ? "span" : _ref$as,
+      children = _ref.children;
+  return /*#__PURE__*/_react["default"].createElement(StyledText, {
+    as: as
+  }, children);
+}
+
+var StyledText = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  margin: 0px;\n  font-family: Open Sans, sans-serif;\n  line-height: 1.5em;\n"])));
+
+var _default = Text;
+exports["default"] = _default;

package/text/Text.stories.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import Title from "../../.storybook/components/Title";
+import DxcText from "./Text";
+
+export default {
+  title: "Text",
+  component: DxcText,
+};
+
+export const Chromatic = () => (
+  <>
+    <Title title="Two texts as span" theme="light" level={4} />
+    <DxcText>Text 1.</DxcText>
+    <DxcText>Text 2.</DxcText>
+    <Title title="Two texts as p" theme="light" level={4} />
+    <DxcText as="p">Text 1.</DxcText>
+    <DxcText as="p">Text 2.</DxcText>
+  </>
+);

package/text-input/TextInput.js

@@ -19,7 +19,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 
 var _variables = require("../common/variables.js");
 
@@ -27,7 +27,7 @@ var _utils = require("../common/utils.js");
 
 var _uuid = require("uuid");
 
-var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
+var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
 
 var _NumberInputContext = _interopRequireDefault(require("../number-input/NumberInputContext"));
 
@@ -132,13 +132,13 @@ var getLastOptionIndex = function getLastOptionIndex(filteredSuggestions) {
 };
 
 var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
-  var _ref$label = _ref.label,
-      label = _ref$label === void 0 ? "" : _ref$label,
+  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,
-      _ref$helperText = _ref.helperText,
-      helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
+      helperText = _ref.helperText,
       _ref$placeholder = _ref.placeholder,
       placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
       action = _ref.action,
@@ -154,8 +154,7 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
       suffix = _ref$suffix === void 0 ? "" : _ref$suffix,
       onChange = _ref.onChange,
       onBlur = _ref.onBlur,
-      _ref$error = _ref.error,
-      error = _ref$error === void 0 ? "" : _ref$error,
+      error = _ref.error,
       suggestions = _ref.suggestions,
       pattern = _ref.pattern,
       minLength = _ref.minLength,
@@ -172,7 +171,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];
@@ -208,7 +207,7 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
   var colorsTheme = (0, _useTheme["default"])();
   var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
   var autosuggestId = "".concat(inputId, "-listBox");
-  var errorId = "error-message-".concat(inputId);
+  var errorId = "error-".concat(inputId);
   var numberInputContext = (0, _react.useContext)(_NumberInputContext["default"]);
   var lastOptionIndex = (0, _react.useMemo)(function () {
     return getLastOptionIndex(filteredSuggestions);
@@ -269,8 +268,7 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
       value: changedValue,
       error: getNumberErrorMessage(newValue)
     });else onChange === null || onChange === void 0 ? void 0 : onChange({
-      value: changedValue,
-      error: null
+      value: changedValue
     });
   };
 
@@ -303,8 +301,7 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
       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
     });
   };
 
@@ -500,11 +497,12 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     margin: margin,
     ref: ref,
     size: size
-  }, /*#__PURE__*/_react["default"].createElement(Label, {
+  }, label && /*#__PURE__*/_react["default"].createElement(Label, {
     htmlFor: inputId,
     disabled: disabled,
-    backgroundType: backgroundType
-  }, label, " ", optional && /*#__PURE__*/_react["default"].createElement(OptionalLabel, null, "(Optional)")), /*#__PURE__*/_react["default"].createElement(HelperText, {
+    backgroundType: backgroundType,
+    helperText: helperText
+  }, label, " ", optional && /*#__PURE__*/_react["default"].createElement(OptionalLabel, null, "(Optional)")), helperText && /*#__PURE__*/_react["default"].createElement(HelperText, {
     disabled: disabled,
     backgroundType: backgroundType
   }, helperText), /*#__PURE__*/_react["default"].createElement(InputContainer, {
@@ -541,16 +539,19 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     role: isTextInputType() && hasSuggestions() ? "combobox" : "textbox",
     "aria-autocomplete": isTextInputType() && hasSuggestions() ? "list" : undefined,
     "aria-controls": isTextInputType() && hasSuggestions() ? autosuggestId : undefined,
+    "aria-disabled": disabled,
     "aria-expanded": isTextInputType() && hasSuggestions() ? isOpen ? "true" : "false" : undefined,
     "aria-activedescendant": isTextInputType() && hasSuggestions() && isOpen && visualFocusedSuggIndex !== -1 ? "suggestion-".concat(visualFocusedSuggIndex) : undefined,
     "aria-invalid": error ? "true" : "false",
-    "aria-describedby": error ? errorId : undefined,
+    "aria-errormessage": error ? errorId : undefined,
     "aria-required": optional ? "false" : "true"
   }), !disabled && error && /*#__PURE__*/_react["default"].createElement(ErrorIcon, {
     backgroundType: backgroundType,
     "aria-label": "Error"
   }, textInputIcons.error), !disabled && clearable && (value !== null && value !== void 0 ? value : innerValue).length > 0 && /*#__PURE__*/_react["default"].createElement(Action, {
-    onClick: handleClearActionOnClick,
+    onClick: function onClick() {
+      return handleClearActionOnClick();
+    },
     onMouseDown: function onMouseDown(event) {
       event.stopPropagation();
     },
@@ -561,7 +562,9 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
   }, 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,
-    onClick: handleDecrementActionOnClick,
+    onClick: function onClick() {
+      return handleDecrementActionOnClick();
+    },
     onMouseDown: function onMouseDown(event) {
       event.stopPropagation();
     },
@@ -572,7 +575,9 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
   }, textInputIcons.decrement), /*#__PURE__*/_react["default"].createElement(Action, {
     ref: actionRef,
     disabled: disabled,
-    onClick: handleIncrementActionOnClick,
+    onClick: function onClick() {
+      return handleIncrementActionOnClick();
+    },
     onMouseDown: function onMouseDown(event) {
       event.stopPropagation();
     },
@@ -583,7 +588,9 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
   }, textInputIcons.increment)) : action && /*#__PURE__*/_react["default"].createElement(Action, {
     ref: actionRef,
     disabled: disabled,
-    onClick: action.onClick,
+    onClick: function onClick() {
+      return action.onClick();
+    },
     onMouseDown: function onMouseDown(event) {
       event.stopPropagation();
     },
@@ -613,9 +620,10 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
     });
   }), isSearching && /*#__PURE__*/_react["default"].createElement(SuggestionsSystemMessage, null, "Searching..."), isAutosuggestError && /*#__PURE__*/_react["default"].createElement(SuggestionsError, null, /*#__PURE__*/_react["default"].createElement(SuggestionsErrorIcon, {
     backgroundType: backgroundType
-  }, textInputIcons.error), "Error fetching data"))), !disabled && /*#__PURE__*/_react["default"].createElement(Error, {
+  }, textInputIcons.error), "Error fetching data"))), !disabled && typeof error === "string" && /*#__PURE__*/_react["default"].createElement(Error, {
     id: errorId,
-    backgroundType: backgroundType
+    backgroundType: backgroundType,
+    "aria-live": error ? "assertive" : "off"
   }, error)));
 });
 
@@ -644,7 +652,7 @@ var DxcInput = _styledComponents["default"].div(_templateObject || (_templateObj
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
 });
 
-var Label = _styledComponents["default"].label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (props) {
+var Label = _styledComponents["default"].label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  ", "\n"])), function (props) {
   return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledLabelFontColorOnDark : props.theme.disabledLabelFontColor : props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
 }, function (props) {
   return props.theme.fontFamily;
@@ -656,13 +664,15 @@ var Label = _styledComponents["default"].label(_templateObject2 || (_templateObj
   return props.theme.labelFontWeight;
 }, function (props) {
   return props.theme.labelLineHeight;
+}, function (props) {
+  return !props.helperText && "margin-bottom: 0.25rem";
 });
 
 var OptionalLabel = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  font-weight: ", ";\n"])), function (props) {
   return props.theme.optionalLabelFontWeight;
 });
 
-var HelperText = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (props) {
+var HelperText = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  margin-bottom: 0.25rem;\n"])), function (props) {
   return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledHelperTextFontColorOnDark : props.theme.disabledHelperTextFontColor : props.backgroundType === "dark" ? props.theme.helperTextFontColorOnDark : props.theme.helperTextFontColor;
 }, function (props) {
   return props.theme.fontFamily;
@@ -676,9 +686,7 @@ var HelperText = _styledComponents["default"].span(_templateObject4 || (_templat
   return props.theme.helperTextLineHeight;
 });
 
-var InputContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  position: relative;\n  align-items: center;\n  height: calc(2.5rem - 2px);\n  margin: ", ";\n  padding: 0 0.5rem;\n\n  ", "\n  box-shadow: 0 0 0 2px transparent;\n  border-radius: 4px;\n  border: 1px solid\n    ", ";\n  ", "\n  ", ";\n\n  ", ";\n"])), function (props) {
-  return "".concat(props.theme.inputMarginTop, " 0 ").concat(props.theme.inputMarginBottom, " 0");
-}, function (props) {
+var InputContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  position: relative;\n  align-items: center;\n  height: calc(2.5rem - 2px);\n  padding: 0 0.5rem;\n\n  ", "\n  box-shadow: 0 0 0 2px transparent;\n  border-radius: 4px;\n  border: 1px solid\n    ", ";\n  ", "\n  ", ";\n\n  ", ";\n"])), function (props) {
   if (props.disabled) return props.backgroundType === "dark" ? "background-color: ".concat(props.theme.disabledContainerFillColorOnDark, ";") : "background-color: ".concat(props.theme.disabledContainerFillColor, ";");
 }, function (props) {
   if (props.disabled) return props.backgroundType === "dark" ? props.theme.disabledBorderColorOnDark : props.theme.disabledBorderColor;else return props.backgroundType === "dark" ? props.theme.enabledBorderColorOnDark : props.theme.enabledBorderColor;
@@ -738,7 +746,7 @@ var ErrorIcon = _styledComponents["default"].span(_templateObject11 || (_templat
   return props.backgroundType === "dark" ? props.theme.errorIconColorOnDark : props.theme.errorIconColor;
 });
 
-var Error = _styledComponents["default"].span(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n  min-height: 1.5em;\n  color: ", ";\n  font-family: ", ";\n  font-size: 0.75rem;\n  font-weight: 400;\n  line-height: 1.5em;\n"])), function (props) {
+var Error = _styledComponents["default"].span(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n  min-height: 1.5em;\n  color: ", ";\n  font-family: ", ";\n  font-size: 0.75rem;\n  font-weight: 400;\n  line-height: 1.5em;\n  margin-top: 0.25rem;\n"])), function (props) {
   return props.backgroundType === "dark" ? props.theme.errorMessageColorOnDark : props.theme.errorMessageColor;
 }, function (props) {
   return props.theme.fontFamily;

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>
@@ -262,14 +280,14 @@ export const Chromatic = () => (
 );
 
 const FocusedActionTextInput = () => (
-  <ExampleContainer>
+  <ExampleContainer expanded>
     <Title title="Focused action" theme="light" level={4} />
     <DxcTextInput label="Text input" action={action} clearable />
   </ExampleContainer>
 );
 
 const ActivedActionTextInput = () => (
-  <ExampleContainer pseudoState="pseudo-active">
+  <ExampleContainer pseudoState="pseudo-active" expanded>
     <Title title="Actived action" theme="light" level={4} />
     <DxcTextInput label="Text input" action={action} clearable />
   </ExampleContainer>
@@ -306,7 +324,7 @@ const ActivedOptionAutosuggest = () => (
 const FocusedActionTextInputOnDark = () => (
   <BackgroundColorProvider color="#333333">
     <DarkContainer>
-      <ExampleContainer>
+      <ExampleContainer expanded>
         <Title title="Focused action" theme="dark" level={4} />
         <DxcTextInput label="Text input" action={action} clearable />
       </ExampleContainer>
@@ -317,7 +335,7 @@ const FocusedActionTextInputOnDark = () => (
 const ActivedActionTextInputOnDark = () => (
   <BackgroundColorProvider color="#333333">
     <DarkContainer>
-      <ExampleContainer pseudoState="pseudo-active">
+      <ExampleContainer pseudoState="pseudo-active" expanded>
         <Title title="Actived action" theme="dark" level={4} />
         <DxcTextInput label="Text input" action={action} clearable />
       </ExampleContainer>