@dxc-technology/halstack-react 0.0.0-c680086 → 0.0.0-c713b1b

package/text-input/types.d.ts

@@ -30,6 +30,10 @@ declare type Props = {
      * Name attribute of the input element.
      */
     name?: string;
+    /**
+     * Initial value of the input, only when it is uncontrolled.
+     */
+    defaultValue?: string;
     /**
      * Value of the input. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
      */
@@ -74,26 +78,29 @@ declare type Props = {
      * This function will be called when the user types within the input
      * element of the component. An object including the current value and
      * the error (if the value entered is not valid) will be passed to this
-     * function. If there is no error, error will be null.
+     * function. If there is no error, error will not be defined.
      */
     onChange?: (val: {
         value: string;
-        error: string | null;
+        error?: string;
     }) => void;
     /**
      * This function will be called when the input element loses the focus.
      * An object including the input value and the error (if the value
      * entered is not valid) will be passed to this function. If there is no error,
-     * error will be null.
+     * error will not be defined.
      */
     onBlur?: (val: {
         value: string;
-        error: string | null;
+        error?: string;
     }) => void;
     /**
-     * If it is defined, the component will change its appearance, showing
-     * the error below the input component. If it is not defined, the error
-     * messages will be managed internally, but never displayed on its own.
+     * If it is a defined value and also a truthy string, the component will
+     * change its appearance, showing the error below the input component. If
+     * the defined value is an empty string, it will reserve a space below
+     * the component for a future error, but it would not change its look. In
+     * case of being undefined or null, both the appearance and the space for
+     * the error message would not be modified.
      */
     error?: string;
     /**
@@ -110,7 +117,7 @@ declare type Props = {
      * pattern, the onBlur and onChange functions will be called with the
      * current value and an internal error informing that this value does not
      * match the pattern. If the pattern is met, the error parameter of both
-     * events will be null.
+     * events will not be defined.
      */
     pattern?: string;
     /**
@@ -120,7 +127,7 @@ declare type Props = {
      * comply the minimum length, the onBlur and onChange functions will be called
      * with the current value and an internal error informing that the value
      * length does not comply the specified range. If a valid length is
-     * reached, the error parameter of both events will be null.
+     * reached, the error parameter of both events will not be defined.
      */
     minLength?: number;
     /**
@@ -130,7 +137,7 @@ declare type Props = {
      * comply the maximum length, the onBlur and onChange functions will be called
      * with the current value and an internal error informing that the value
      * length does not comply the specified range. If a valid length is
-     * reached, the error parameter of both events will be null.
+     * reached, the error parameter of both events will not be defined.
      */
     maxLength?: number;
     /**

package/textarea/Textarea.js

@@ -51,6 +51,8 @@ var DxcTextarea = /*#__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,
@@ -77,7 +79,7 @@ var DxcTextarea = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
       _ref$tabIndex = _ref.tabIndex,
       tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
 
-  var _useState = (0, _react.useState)(""),
+  var _useState = (0, _react.useState)(defaultValue),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
       innerValue = _useState2[0],
       setInnerValue = _useState2[1];
@@ -89,7 +91,7 @@ var DxcTextarea = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
   var colorsTheme = (0, _useTheme["default"])();
   var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
   var textareaRef = (0, _react.useRef)(null);
-  var errorId = "error-message-".concat(textareaId);
+  var errorId = "error-".concat(textareaId);
 
   var getLengthErrorMessage = function getLengthErrorMessage() {
     return "Min length ".concat(minLength, ", max length ").concat(maxLength, ".");
@@ -115,8 +117,7 @@ var DxcTextarea = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
       value: newValue,
       error: getPatternErrorMessage()
     });else onChange === null || onChange === void 0 ? void 0 : onChange({
-      value: newValue,
-      error: null
+      value: newValue
     });
   };
 
@@ -131,8 +132,7 @@ var DxcTextarea = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
       value: event.target.value,
       error: getPatternErrorMessage()
     });else onBlur === null || onBlur === void 0 ? void 0 : onBlur({
-      value: event.target.value,
-      error: null
+      value: event.target.value
     });
   };
 
@@ -180,12 +180,14 @@ var DxcTextarea = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref)
     backgroundType: backgroundType,
     ref: textareaRef,
     tabIndex: tabIndex,
+    "aria-disabled": disabled,
     "aria-invalid": error ? "true" : "false",
-    "aria-describedby": error ? errorId : undefined,
+    "aria-errormessage": error ? errorId : undefined,
     "aria-required": optional ? "false" : "true"
   }), !disabled && typeof error === "string" && /*#__PURE__*/_react["default"].createElement(Error, {
     id: errorId,
-    backgroundType: backgroundType
+    backgroundType: backgroundType,
+    "aria-live": error ? "assertive" : "off"
   }, error)));
 });
 

package/textarea/Textarea.stories.jsx

@@ -33,7 +33,7 @@ export const Chromatic = () => (
       </ExampleContainer>
       <ExampleContainer>
         <Title title="Disabled with value" theme="light" level={4} />
-        <DxcTextarea label="Disabled" value="Example text" disabled />
+        <DxcTextarea label="Disabled" defaultValue="Example text" disabled />
       </ExampleContainer>
       <ExampleContainer>
         <Title title="With error" theme="light" level={4} />
@@ -41,12 +41,21 @@ export const Chromatic = () => (
           label="Textarea with error"
           helperText="Helper text"
           placeholder="Enter your text here..."
-          error="Error message"
+          error="Error message."
+        />
+      </ExampleContainer>
+      <ExampleContainer pseudoState="pseudo-hover">
+        <Title title="Hovered with error" theme="light" level={4} />
+        <DxcTextarea
+          label="Hovered textarea with error"
+          helperText="Helper text"
+          placeholder="Enter your text here..."
+          error="Error message."
         />
       </ExampleContainer>
       <ExampleContainer>
         <Title title="Helper text and optional with value" theme="light" level={4} />
-        <DxcTextarea label="Helper & optional" value="Some text" helperText="Sample text" optional />
+        <DxcTextarea label="Helper & optional" defaultValue="Some text" helperText="Sample text" optional />
       </ExampleContainer>
       <ExampleContainer>
         <Title title="Resizable" theme="light" level={4} />
@@ -57,36 +66,48 @@ export const Chromatic = () => (
         <DxcTextarea
           label="Manual vertical grow"
           verticalGrow="manual"
-          value="Long textttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt"
+          defaultValue="Long textttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt"
         />
       </ExampleContainer>
     </>
     <BackgroundColorProvider color="#333333">
       <DarkContainer>
-        <>
+        <ExampleContainer>
           <Title title="Helper text and optional with value" theme="dark" level={4} />
-          <DxcTextarea label="Helper & optional" value="Some text" margin="medium" helperText="Sample text" optional />
-
+          <DxcTextarea label="Helper & optional" defaultValue="Some text" helperText="Sample text" optional />
+        </ExampleContainer>
+        <ExampleContainer>
           <Title title="Disabled" theme="dark" level={4} />
           <DxcTextarea
             label="Disabled"
-            margin="medium"
             optional
             helperText="Sample text"
             placeholder="Enter your text here..."
             disabled
           />
+        </ExampleContainer>
+        <ExampleContainer>
           <Title title="Disabled with value" theme="dark" level={4} />
-          <DxcTextarea label="Disabled" margin="medium" value="Example text" disabled />
+          <DxcTextarea label="Disabled" defaultValue="Example text" disabled />
+        </ExampleContainer>
+        <ExampleContainer>
           <Title title="With error" theme="dark" level={4} />
           <DxcTextarea
             label="Textarea with error"
-            margin="medium"
             helperText="Helper text"
             placeholder="Enter your text here..."
-            error="Error message"
+            error="Error message."
+          />
+        </ExampleContainer>
+        <ExampleContainer pseudoState="pseudo-hover">
+          <Title title="Hovered with error" theme="dark" level={4} />
+          <DxcTextarea
+            label="Hovered textarea with error"
+            helperText="Helper text"
+            placeholder="Enter your text here..."
+            error="Error message."
           />
-        </>
+        </ExampleContainer>
       </DarkContainer>
     </BackgroundColorProvider>
     <Title title="Sizes" theme="light" level={2} />

package/textarea/Textarea.test.js

@@ -0,0 +1,437 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+var _Textarea = _interopRequireDefault(require("./Textarea"));
+
+describe("Textarea component tests", function () {
+  test("Renders with correct label", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label"
+    })),
+        getByText = _render.getByText;
+
+    expect(getByText("Example label")).toBeTruthy();
+  });
+  test("Renders with correct label and helper text", function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label",
+      helperText: "Example helper text"
+    })),
+        getByText = _render2.getByText;
+
+    expect(getByText("Example label")).toBeTruthy();
+    expect(getByText("Example helper text")).toBeTruthy();
+  });
+  test("Renders with correct label and optional", function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label",
+      helperText: "Example helper text",
+      optional: true
+    })),
+        getByText = _render3.getByText,
+        getByRole = _render3.getByRole;
+
+    var textarea = getByRole("textbox");
+    expect(getByText("Example label")).toBeTruthy();
+    expect(getByText("(Optional)")).toBeTruthy();
+    expect(getByText("Example helper text")).toBeTruthy();
+    expect(textarea.getAttribute("aria-required")).toBe("false");
+  });
+  test("Renders with correct placeholder", function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      placeholder: "Placeholder"
+    })),
+        getByRole = _render4.getByRole;
+
+    var textarea = getByRole("textbox");
+    expect(textarea.getAttribute("placeholder")).toBe("Placeholder");
+  });
+  test("Renders with error message and correct aria attributes", function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label",
+      error: "Error message."
+    })),
+        getByText = _render5.getByText,
+        getByLabelText = _render5.getByLabelText;
+
+    var textarea = getByLabelText("Example label");
+    var errorMessage = getByText("Error message.");
+    expect(errorMessage).toBeTruthy();
+    expect(textarea.getAttribute("aria-errormessage")).toBe(errorMessage.id);
+    expect(textarea.getAttribute("aria-invalid")).toBe("true");
+    expect(errorMessage.getAttribute("aria-live")).toBe("assertive");
+  });
+  test("Renders with correct default rows", function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label",
+      rows: 10
+    })),
+        getByLabelText = _render6.getByLabelText;
+
+    var textarea = getByLabelText("Example label");
+    expect(textarea.rows).toBe(10);
+  });
+  test("Renders with correct accesibility attributes", function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label"
+    })),
+        getByLabelText = _render7.getByLabelText;
+
+    var textarea = getByLabelText("Example label");
+    expect(textarea.getAttribute("aria-disabled")).toBe("false");
+    expect(textarea.getAttribute("aria-invalid")).toBe("false");
+    expect(textarea.getAttribute("aria-describedBy")).toBeNull();
+    expect(textarea.getAttribute("aria-required")).toBe("true");
+  });
+  test("Renders with correct initial value", function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label",
+      placeholder: "Placeholder",
+      defaultValue: "Example text"
+    })),
+        getByLabelText = _render8.getByLabelText;
+
+    var textarea = getByLabelText("Example label");
+    expect(textarea.value).toBe("Example text");
+  });
+  test("Disabled textarea renders with correct aria and can not be modified", function () {
+    var onChange = jest.fn();
+
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label",
+      onChange: onChange,
+      disabled: true
+    })),
+        getByLabelText = _render9.getByLabelText;
+
+    var textarea = getByLabelText("Example label");
+    expect(textarea.getAttribute("aria-disabled")).toBe("true");
+
+    _userEvent["default"].type(textarea, "Test");
+
+    expect(onChange).not.toHaveBeenCalled();
+  });
+  test("Not optional constraint (onBlur)", function () {
+    var onChange = jest.fn();
+    var onBlur = jest.fn();
+
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label",
+      placeholder: "Placeholder",
+      onChange: onChange,
+      onBlur: onBlur
+    })),
+        getByLabelText = _render10.getByLabelText;
+
+    var textarea = getByLabelText("Example label");
+
+    _react2.fireEvent.focus(textarea);
+
+    _react2.fireEvent.blur(textarea);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "",
+      error: "This field is required. Please, enter a value."
+    });
+
+    _react2.fireEvent.change(textarea, {
+      target: {
+        value: "Test"
+      }
+    });
+
+    _react2.fireEvent.blur(textarea);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "Test"
+    });
+  });
+  test("Not optional constraint (onChange)", function () {
+    var onChange = jest.fn();
+
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label",
+      placeholder: "Placeholder",
+      onChange: onChange
+    })),
+        getByLabelText = _render11.getByLabelText;
+
+    var textarea = getByLabelText("Example label");
+
+    _react2.fireEvent.focus(textarea);
+
+    _react2.fireEvent.change(textarea, {
+      target: {
+        value: "Test"
+      }
+    });
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "Test"
+    });
+
+    _userEvent["default"].clear(textarea);
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "",
+      error: "This field is required. Please, enter a value."
+    });
+  });
+  test("Pattern constraint", function () {
+    var onChange = jest.fn();
+    var onBlur = jest.fn();
+
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label",
+      placeholder: "Placeholder",
+      onChange: onChange,
+      onBlur: onBlur,
+      margin: {
+        left: "medium",
+        right: "medium"
+      },
+      pattern: "^.*(?=.*[a-zA-Z])(?=.*\\d)(?=.*[!&$%&? \"]).*$"
+    })),
+        getByLabelText = _render12.getByLabelText;
+
+    var textarea = getByLabelText("Example label");
+
+    _react2.fireEvent.change(textarea, {
+      target: {
+        value: "pattern test"
+      }
+    });
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "pattern test",
+      error: "Please match the format requested."
+    });
+
+    _react2.fireEvent.blur(textarea);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "pattern test",
+      error: "Please match the format requested."
+    });
+
+    _userEvent["default"].clear(textarea);
+
+    _react2.fireEvent.change(textarea, {
+      target: {
+        value: "pattern4&"
+      }
+    });
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "pattern4&"
+    });
+
+    _react2.fireEvent.blur(textarea);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "pattern4&"
+    });
+  });
+  test("Length constraint", function () {
+    var onChange = jest.fn();
+    var onBlur = jest.fn();
+
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label",
+      placeholder: "Placeholder",
+      onChange: onChange,
+      onBlur: onBlur,
+      margin: {
+        left: "medium",
+        right: "medium"
+      },
+      minLength: 5,
+      maxLength: 10
+    })),
+        getByLabelText = _render13.getByLabelText;
+
+    var textarea = getByLabelText("Example label");
+
+    _react2.fireEvent.change(textarea, {
+      target: {
+        value: "test"
+      }
+    });
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "test",
+      error: "Min length 5, max length 10."
+    });
+
+    _react2.fireEvent.blur(textarea);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "test",
+      error: "Min length 5, max length 10."
+    });
+
+    _userEvent["default"].clear(textarea);
+
+    _react2.fireEvent.change(textarea, {
+      target: {
+        value: "length"
+      }
+    });
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "length"
+    });
+
+    _react2.fireEvent.blur(textarea);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "length"
+    });
+  });
+  test("Pattern and length constraints", function () {
+    var onChange = jest.fn();
+    var onBlur = jest.fn();
+
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label",
+      placeholder: "Placeholder",
+      onChange: onChange,
+      onBlur: onBlur,
+      margin: {
+        left: "medium",
+        right: "medium"
+      },
+      pattern: "^.*(?=.*[a-zA-Z])(?=.*\\d)(?=.*[!&$%&? \"]).*$",
+      minLength: 5,
+      maxLength: 10
+    })),
+        getByLabelText = _render14.getByLabelText;
+
+    var textarea = getByLabelText("Example label");
+
+    _react2.fireEvent.change(textarea, {
+      target: {
+        value: "test"
+      }
+    });
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "test",
+      error: "Min length 5, max length 10."
+    });
+
+    _react2.fireEvent.blur(textarea);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "test",
+      error: "Min length 5, max length 10."
+    });
+
+    _react2.fireEvent.change(textarea, {
+      target: {
+        value: "tests"
+      }
+    });
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "tests",
+      error: "Please match the format requested."
+    });
+
+    _react2.fireEvent.blur(textarea);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "tests",
+      error: "Please match the format requested."
+    });
+
+    _react2.fireEvent.change(textarea, {
+      target: {
+        value: "tests4&"
+      }
+    });
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "tests4&"
+    });
+
+    _react2.fireEvent.blur(textarea);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "tests4&"
+    });
+  });
+  test("onBlur function is called correctly", function () {
+    var onBlur = jest.fn();
+
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label",
+      onBlur: onBlur
+    })),
+        getByLabelText = _render15.getByLabelText;
+
+    var textarea = getByLabelText("Example label");
+
+    _react2.fireEvent.change(textarea, {
+      target: {
+        value: "Blur test"
+      }
+    });
+
+    _react2.fireEvent.blur(textarea);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "Blur test"
+    });
+  });
+  test("onChange function is called correctly", function () {
+    var onChange = jest.fn();
+
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label",
+      value: "Test value",
+      onChange: onChange
+    })),
+        getByLabelText = _render16.getByLabelText;
+
+    var textarea = getByLabelText("Example label");
+
+    _react2.fireEvent.change(textarea, {
+      target: {
+        value: "Controlled test"
+      }
+    });
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "Controlled test"
+    });
+    expect(textarea.value).toBe("Test value");
+  });
+});