@dxc-technology/halstack-react 0.0.0-397893c → 0.0.0-39aec5e

package/textarea/Textarea.test.js

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

package/textarea/types.d.ts

@@ -1,141 +0,0 @@
-type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin = {
-    top?: Space;
-    bottom?: Space;
-    left?: Space;
-    right?: Space;
-};
-type Props = {
-    /**
-     * Text to be placed above the textarea.
-     */
-    label?: string;
-    /**
-     * Name attribute of the textarea element.
-     */
-    name?: string;
-    /**
-     * Initial value of the textarea, only when it is uncontrolled.
-     */
-    defaultValue?: string;
-    /**
-     * Value of the textarea. If undefined, the component will be uncontrolled and the value will be managed internally.
-     */
-    value?: string;
-    /**
-     * Helper text to be placed above the textarea.
-     */
-    helperText?: string;
-    /**
-     * Text to be put as placeholder of the textarea.
-     */
-    placeholder?: string;
-    /**
-     * If true, the component will be disabled.
-     */
-    disabled?: boolean;
-    /**
-     * If true, the component will not be mutable, meaning the user can not edit the control.
-     */
-    readOnly?: boolean;
-    /**
-     * If true, the textarea will be optional, showing '(Optional)'
-     * next to the label. Otherwise, the field will be considered required
-     * and an error will be passed as a parameter to the OnBlur and onChange functions
-     * when it has not been filled.
-     */
-    optional?: boolean;
-    /**
-     * Defines the textarea's ability to resize vertically. It can be:
-     *    - 'auto': The textarea grows or shrinks automatically in order to fit the content.
-     *    - 'manual': The height of the textarea is enabled to be manually modified.
-     *    - 'none': The textarea has a fixed height and can't be modified.
-     */
-    verticalGrow?: "auto" | "manual" | "none";
-    /**
-     * Number of rows of the textarea.
-     */
-    rows?: number;
-    /**
-     * This function will be called when the user types within the textarea.
-     * 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 not be defined.
-     */
-    onChange?: (val: {
-        value: string;
-        error?: string;
-    }) => void;
-    /**
-     * This function will be called when the textarea loses the focus. An
-     * object including the textarea value and the error (if the value entered
-     * is not valid) will be passed to this function. If there is no error,
-     * error will not be defined.
-     */
-    onBlur?: (val: {
-        value: string;
-        error?: string;
-    }) => void;
-    /**
-     * If it is a defined value and also a truthy string, the component will
-     * change its appearance, showing the error below the textarea. 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;
-    /**
-     * Regular expression that defines the valid format allowed by the
-     * textarea. This will be checked both when the textarea loses the focus
-     * and while typing within it. If the string entered does not match the
-     * 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 not be defined.
-     */
-    pattern?: string;
-    /**
-     * Specifies the minimum length allowed by the textarea.
-     * This will be checked both when the textarea loses the
-     * focus and while typing within it. If the string entered does not
-     * 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 not be defined.
-     */
-    minLength?: number;
-    /**
-     * Specifies the maximum length allowed by the textarea.
-     * This will be checked both when the textarea loses the
-     * focus and while typing within it. If the string entered does not
-     * 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 not be defined.
-     */
-    maxLength?: number;
-    /**
-     * HTML autocomplete attribute. Lets the user specify if any permission the user agent has to provide automated assistance in filling out the textarea value.
-     * Its value must be one of all the possible values of the HTML autocomplete attribute: 'on', 'off', 'email', 'username', 'new-password', ...
-     */
-    autocomplete?: string;
-    /**
-     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
-     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
-     */
-    margin?: Space | Margin;
-    /**
-     * Size of the component.
-     */
-    size?: "small" | "medium" | "large" | "fillParent";
-    /**
-     * Value of the tabindex attribute.
-     */
-    tabIndex?: number;
-};
-/**
- * Reference to the component.
- */
-export type RefType = HTMLDivElement;
-export default Props;

package/textarea/types.js

@@ -1,5 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});

package/toggle-group/ToggleGroup.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import ToggleGroupPropsType from "./types";
-declare const DxcToggleGroup: ({ label, helperText, defaultValue, value, onChange, disabled, options, margin, multiple, tabIndex, }: ToggleGroupPropsType) => JSX.Element;
-export default DxcToggleGroup;