@dxc-technology/halstack-react 0.0.0-b39a1d2 → 0.0.0-b3b8a35

package/textarea/Textarea.stories.tsx

@@ -0,0 +1,175 @@
+import React from "react";
+import DxcTextarea from "./Textarea";
+import Title from "../../.storybook/components/Title";
+import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import { BackgroundColorProvider } from "../BackgroundColorContext";
+import { HalstackProvider } from "../HalstackContext";
+
+export default {
+  title: "Textarea",
+  component: DxcTextarea,
+};
+
+const opinionatedTheme = {
+  textarea: {
+    fontColor: "#000000",
+    hoverBorderColor: "#a46ede",
+  },
+};
+
+export const Chromatic = () => (
+  <>
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="Hovered" theme="light" level={4} />
+      <DxcTextarea label="Hovered" />
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="Focused" theme="light" level={4} />
+      <DxcTextarea label="Focused" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled" theme="light" level={4} />
+      <DxcTextarea label="Disabled" optional helperText="Sample text" placeholder="Enter your text here..." disabled />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled with value" theme="light" level={4} />
+      <DxcTextarea label="Disabled" defaultValue="Example text" disabled />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Read only" theme="light" level={4} />
+      <DxcTextarea label="Label" readOnly defaultValue="Example text" verticalGrow="manual" />
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="Hovered read only" theme="light" level={4} />
+      <DxcTextarea label="Label" readOnly defaultValue="Example text" verticalGrow="manual" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="With error" theme="light" level={4} />
+      <DxcTextarea
+        label="Textarea with error"
+        helperText="Helper text"
+        placeholder="Enter your text here..."
+        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" defaultValue="Some text" helperText="Sample text" optional />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Resizable" theme="light" level={4} />
+      <DxcTextarea label="With resizer" helperText="Helper text" verticalGrow="manual" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Grow manual" theme="light" level={4} />
+      <DxcTextarea
+        label="Manual vertical grow"
+        verticalGrow="manual"
+        defaultValue="Long textttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt"
+      />
+    </ExampleContainer>
+    <Title title="Sizes" theme="light" level={2} />
+    <ExampleContainer>
+      <DxcTextarea label="Small" size="small" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <DxcTextarea label="Medium" size="medium" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <DxcTextarea label="Large" size="large" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <DxcTextarea label="Fill parent" size="fillParent" />
+    </ExampleContainer>
+    <Title title="Margins" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Xxsmall margin" theme="light" level={4} />
+      <DxcTextarea label="Xxsmall" margin="xxsmall" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xsmall margin" theme="light" level={4} />
+      <DxcTextarea label="xsmall" margin="xsmall" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Small margin" theme="light" level={4} />
+      <DxcTextarea label="small" margin="small" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium margin" theme="light" level={4} />
+      <DxcTextarea label="medium" margin="medium" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large margin" theme="light" level={4} />
+      <DxcTextarea label="Large" margin="large" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xlarge margin" theme="light" level={4} />
+      <DxcTextarea label="Xlarge" margin="xlarge" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xxlarge margin" theme="light" level={4} />
+      <DxcTextarea label="Xxlarge" margin="xxlarge" />
+    </ExampleContainer>
+    <Title title="Opinionated theme" theme="light" level={2} />
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="Hovered" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcTextarea label="Hovered" helperText="Sample text" placeholder="Placeholder" />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="Focused" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcTextarea label="Focused" helperText="Sample text" />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcTextarea
+          label="Disabled"
+          optional
+          helperText="Sample text"
+          placeholder="Enter your text here..."
+          disabled
+        />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled with value" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcTextarea label="Disabled" helperText="Sample text" defaultValue="Example text" disabled />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="With error" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcTextarea
+          label="Textarea with error"
+          helperText="Helper text"
+          placeholder="Enter your text here..."
+          error="Error message."
+        />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Grow manual" theme="light" level={4} />{" "}
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcTextarea
+          label="Manual vertical grow"
+          verticalGrow="manual"
+          defaultValue="Long textttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt"
+        />
+      </HalstackProvider>
+    </ExampleContainer>
+  </>
+);

package/textarea/Textarea.test.js

@@ -0,0 +1,406 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _Textarea = _interopRequireDefault(require("./Textarea.tsx"));
+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 accessibility 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-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 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");
+    _userEvent["default"].type(textarea, "Test");
+    expect(onChange).not.toHaveBeenCalled();
+  });
+  test("Read-only textarea does not trigger onChange function", function () {
+    var onChange = jest.fn();
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+        label: "Example label",
+        onChange: onChange,
+        readOnly: true
+      })),
+      getByLabelText = _render10.getByLabelText;
+    var textarea = getByLabelText("Example label");
+    _userEvent["default"].type(textarea, "Test");
+    expect(onChange).not.toHaveBeenCalled();
+  });
+  test("Read-only textarea sends its value on submit", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var handlerOnSubmit, _render11, getByText, submit;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          handlerOnSubmit = jest.fn(function (e) {
+            e.preventDefault();
+            var formData = new FormData(e.target);
+            var formProps = Object.fromEntries(formData);
+            expect(formProps).toStrictEqual({
+              data: "Comments"
+            });
+          });
+          _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement("form", {
+            onSubmit: handlerOnSubmit
+          }, /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+            label: "Example label",
+            name: "data",
+            defaultValue: "Comments",
+            readOnly: true
+          }), /*#__PURE__*/_react["default"].createElement("button", {
+            type: "submit"
+          }, "Submit"))), getByText = _render11.getByText;
+          submit = getByText("Submit");
+          _context.next = 5;
+          return _userEvent["default"].click(submit);
+        case 5:
+          expect(handlerOnSubmit).toHaveBeenCalled();
+        case 6:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  test("Not optional constraint (onBlur)", 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
+      })),
+      getByLabelText = _render12.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 _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+        label: "Example label",
+        placeholder: "Placeholder",
+        onChange: onChange
+      })),
+      getByLabelText = _render13.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 _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)(?=.*[!&$%&? \"]).*$"
+      })),
+      getByLabelText = _render14.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 _render15 = (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 = _render15.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 _render16 = (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 = _render16.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 _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+        label: "Example label",
+        onBlur: onBlur
+      })),
+      getByLabelText = _render17.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 _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+        label: "Example label",
+        value: "Test value",
+        onChange: onChange
+      })),
+      getByLabelText = _render18.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");
+  });
+});