@dxc-technology/halstack-react 0.0.0-52b2977 → 0.0.0-52f9f99

package/textarea/Textarea.stories.jsx

@@ -1,216 +0,0 @@
-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 DarkContainer from "../../.storybook/components/DarkSection";
-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="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>
-    </>
-    <BackgroundColorProvider color="#333333">
-      <DarkContainer>
-        <ExampleContainer>
-          <Title title="Helper text and optional with value" theme="dark" level={4} />
-          <DxcTextarea label="Helper & optional" defaultValue="Some text" helperText="Sample text" optional />
-        </ExampleContainer>
-        <ExampleContainer>
-          <Title title="Disabled" theme="dark" level={4} />
-          <DxcTextarea
-            label="Disabled"
-            optional
-            helperText="Sample text"
-            placeholder="Enter your text here..."
-            disabled
-          />
-        </ExampleContainer>
-        <ExampleContainer>
-          <Title title="Disabled with value" theme="dark" level={4} />
-          <DxcTextarea label="Disabled" defaultValue="Example text" disabled />
-        </ExampleContainer>
-        <ExampleContainer>
-          <Title title="With error" theme="dark" 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="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} />
-    <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

@@ -1,437 +0,0 @@
-"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.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 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");
-  });
-});