@dxc-technology/halstack-react 0.0.0-a799608 → 0.0.0-a88c0fe

package/number-input/NumberInput.test.js

@@ -1,506 +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 _NumberInput = _interopRequireDefault(require("./NumberInput"));
-
-describe("Number input component tests", function () {
-  test("Number input renders with label", function () {
-    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number input label"
-    })),
-        getByText = _render.getByText;
-
-    expect(getByText("Number input label")).toBeTruthy();
-  });
-  test("Number input renders with helper text", function () {
-    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      helperText: "Helper text"
-    })),
-        getByText = _render2.getByText;
-
-    expect(getByText("Helper text")).toBeTruthy();
-  });
-  test("Number input renders with placeholder", function () {
-    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number label",
-      placeholder: "Placeholder"
-    })),
-        getByLabelText = _render3.getByLabelText;
-
-    var number = getByLabelText("Number label");
-    expect(number.getAttribute("placeholder")).toBe("Placeholder");
-  });
-  test("Number input renders increment and decrement buttons", function () {
-    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number label"
-    })),
-        queryAllByRole = _render4.queryAllByRole;
-
-    expect(queryAllByRole("button").length).toBe(2);
-  });
-  test("Number input buttons' tooltip is correct", function () {
-    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number label"
-    })),
-        getByTitle = _render5.getByTitle;
-
-    expect(getByTitle("Decrement value")).toBeTruthy();
-    expect(getByTitle("Increment value")).toBeTruthy();
-  });
-  test("Number input is disabled", function () {
-    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number label",
-      disabled: true
-    })),
-        getByLabelText = _render6.getByLabelText;
-
-    var number = getByLabelText("Number label");
-    expect(number.disabled).toBeTruthy();
-  });
-  test("Number input is optional", function () {
-    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number label",
-      optional: true
-    })),
-        getByText = _render7.getByText;
-
-    expect(getByText("(Optional)")).toBeTruthy();
-  });
-  test("Number input is not optional: required field, displays error if not filled in", function () {
-    var onBlur = jest.fn();
-    var onChange = jest.fn();
-
-    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      onBlur: onBlur,
-      onChange: onChange
-    })),
-        getByRole = _render8.getByRole;
-
-    var input = getByRole("textbox");
-
-    _userEvent["default"].type(input, "1");
-
-    _userEvent["default"].clear(input);
-
-    _react2.fireEvent.blur(input);
-
-    expect(onBlur).toHaveBeenCalled();
-    expect(onBlur).toHaveBeenCalledWith({
-      value: "",
-      error: "This field is required. Please, enter a value."
-    });
-    expect(onChange).toHaveBeenCalled();
-    expect(onChange).toHaveBeenCalledWith({
-      value: "",
-      error: "This field is required. Please, enter a value."
-    });
-  });
-  test("Suffix and prefix must be shown)", function () {
-    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number input label",
-      prefix: "+34",
-      suffix: "USD"
-    })),
-        getByText = _render9.getByText;
-
-    expect(getByText("+34")).toBeTruthy();
-    expect(getByText("USD")).toBeTruthy();
-  });
-  test("Invalid number input renders error", function () {
-    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      error: "Error message."
-    })),
-        getByText = _render10.getByText;
-
-    expect(getByText("Error message.")).toBeTruthy();
-  });
-  test("onChange function is called correctly", function () {
-    var onChange = jest.fn();
-
-    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number input label",
-      onChange: onChange
-    })),
-        getByLabelText = _render11.getByLabelText;
-
-    var number = getByLabelText("Number input label");
-
-    _userEvent["default"].type(number, "t");
-
-    expect(onChange).not.toHaveBeenCalledWith({
-      value: "t"
-    });
-    expect(number.value).toBe("");
-
-    _userEvent["default"].type(number, "1");
-
-    expect(onChange).toHaveBeenCalledWith({
-      value: "1"
-    });
-    expect(number.value).toBe("1");
-  });
-  test("Error message is shown if the value is less than the min value", function () {
-    var onChange = jest.fn(function (_ref) {
-      var value = _ref.value,
-          error = _ref.error;
-      expect(value).toBe("1");
-      expect(error).toBe("Value must be greater than or equal to 5.");
-    });
-    var onBlur = jest.fn(function (_ref2) {
-      var value = _ref2.value,
-          error = _ref2.error;
-      expect(value).toBe("1");
-      expect(error).toBe("Value must be greater than or equal to 5.");
-    });
-
-    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number input label",
-      min: 5,
-      onBlur: onBlur,
-      onChange: onChange
-    })),
-        getByLabelText = _render12.getByLabelText;
-
-    var number = getByLabelText("Number input label");
-
-    _userEvent["default"].type(number, "1");
-
-    _react2.fireEvent.blur(number);
-  });
-  test("Cannot decrement the value if it is less than the min value", function () {
-    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number input label",
-      min: 5
-    })),
-        getByLabelText = _render13.getByLabelText,
-        getAllByRole = _render13.getAllByRole;
-
-    var number = getByLabelText("Number input label");
-
-    _userEvent["default"].type(number, "1");
-
-    _react2.fireEvent.blur(number);
-
-    expect(number.value).toBe("1");
-    var decrement = getAllByRole("button")[0];
-
-    _userEvent["default"].click(decrement);
-
-    expect(number.value).toBe("1");
-  });
-  test("Increment the value when it is less than the min value", function () {
-    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number input label",
-      min: 5
-    })),
-        getByLabelText = _render14.getByLabelText,
-        getAllByRole = _render14.getAllByRole;
-
-    var number = getByLabelText("Number input label");
-
-    _userEvent["default"].type(number, "1");
-
-    _react2.fireEvent.blur(number);
-
-    expect(number.value).toBe("1");
-    var increment = getAllByRole("button")[1];
-
-    _userEvent["default"].click(increment);
-
-    expect(number.value).toBe("5");
-  });
-  test("Error message is shown if the value is greater than the max value", function () {
-    var onChange = jest.fn();
-    var onBlur = jest.fn();
-
-    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number input label",
-      max: 10,
-      onBlur: onBlur,
-      onChange: onChange
-    })),
-        getByLabelText = _render15.getByLabelText;
-
-    var number = getByLabelText("Number input label");
-
-    _userEvent["default"].type(number, "12");
-
-    expect(onChange).toHaveBeenCalledTimes(2);
-    expect(onChange).toHaveBeenCalledWith({
-      value: "12",
-      error: "Value must be less than or equal to 10."
-    });
-
-    _react2.fireEvent.blur(number);
-
-    expect(onBlur).toHaveBeenCalled();
-    expect(onBlur).toHaveBeenCalledWith({
-      value: "12",
-      error: "Value must be less than or equal to 10."
-    });
-  });
-  test("Cannot increment the value if it is greater than the max value", function () {
-    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number input label",
-      max: 10
-    })),
-        getByLabelText = _render16.getByLabelText,
-        getAllByRole = _render16.getAllByRole;
-
-    var number = getByLabelText("Number input label");
-
-    _userEvent["default"].type(number, "12");
-
-    _react2.fireEvent.blur(number);
-
-    expect(number.value).toBe("12");
-    var decrement = getAllByRole("button")[1];
-
-    _userEvent["default"].click(decrement);
-
-    expect(number.value).toBe("12");
-  });
-  test("Decrement the value when it is greater than the max value", function () {
-    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number input label",
-      max: 10
-    })),
-        getByLabelText = _render17.getByLabelText,
-        getAllByRole = _render17.getAllByRole;
-
-    var number = getByLabelText("Number input label");
-
-    _userEvent["default"].type(number, "12");
-
-    _react2.fireEvent.blur(number);
-
-    expect(number.value).toBe("12");
-    var decrement = getAllByRole("button")[0];
-
-    _userEvent["default"].click(decrement);
-
-    expect(number.value).toBe("10");
-  });
-  test("Increment and decrement the value with min and max values", function () {
-    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number input label",
-      min: 5,
-      max: 10
-    })),
-        getByLabelText = _render18.getByLabelText,
-        getAllByRole = _render18.getAllByRole;
-
-    var number = getByLabelText("Number input label");
-
-    _userEvent["default"].type(number, "1");
-
-    _react2.fireEvent.blur(number);
-
-    expect(number.value).toBe("1");
-    var decrement = getAllByRole("button")[0];
-
-    _userEvent["default"].click(decrement);
-
-    expect(number.value).toBe("1");
-    var increment = getAllByRole("button")[1];
-
-    _userEvent["default"].click(increment);
-
-    expect(number.value).toBe("5");
-
-    _userEvent["default"].click(increment);
-
-    _userEvent["default"].click(increment);
-
-    _userEvent["default"].click(increment);
-
-    _userEvent["default"].click(increment);
-
-    _userEvent["default"].click(increment);
-
-    expect(number.value).toBe("10");
-
-    _userEvent["default"].click(increment);
-
-    expect(number.value).toBe("10");
-  });
-  test("Increment and decrement the value with step", function () {
-    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number input label",
-      step: 5
-    })),
-        getByLabelText = _render19.getByLabelText,
-        getAllByRole = _render19.getAllByRole;
-
-    var number = getByLabelText("Number input label");
-
-    _userEvent["default"].type(number, "10");
-
-    _react2.fireEvent.blur(number);
-
-    expect(number.value).toBe("10");
-    var increment = getAllByRole("button")[1];
-
-    _userEvent["default"].click(increment);
-
-    expect(number.value).toBe("15");
-
-    _userEvent["default"].click(increment);
-
-    expect(number.value).toBe("20");
-    var decrement = getAllByRole("button")[0];
-
-    _userEvent["default"].click(decrement);
-
-    expect(number.value).toBe("15");
-
-    _userEvent["default"].click(decrement);
-
-    expect(number.value).toBe("10");
-  });
-  test("Increment and decrement the value with min, max and step", function () {
-    var onBlur = jest.fn(function (_ref3) {
-      var value = _ref3.value,
-          error = _ref3.error;
-      expect(value).toBe("1");
-      expect(error).toBe("Value must be greater than or equal to 5.");
-    });
-
-    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number input label",
-      min: 5,
-      max: 20,
-      step: 8,
-      onBlur: onBlur
-    })),
-        getByLabelText = _render20.getByLabelText,
-        getAllByRole = _render20.getAllByRole;
-
-    var number = getByLabelText("Number input label");
-
-    _userEvent["default"].type(number, "1");
-
-    _react2.fireEvent.blur(number);
-
-    var increment = getAllByRole("button")[1];
-
-    _userEvent["default"].click(increment);
-
-    expect(number.value).toBe("5");
-
-    _userEvent["default"].click(increment);
-
-    expect(number.value).toBe("13");
-
-    _userEvent["default"].click(increment);
-
-    expect(number.value).toBe("20");
-
-    _userEvent["default"].click(increment);
-
-    expect(number.value).toBe("20");
-    var decrement = getAllByRole("button")[0];
-
-    _userEvent["default"].click(decrement);
-
-    expect(number.value).toBe("12");
-
-    _userEvent["default"].click(decrement);
-
-    expect(number.value).toBe("5");
-
-    _userEvent["default"].click(decrement);
-
-    expect(number.value).toBe("5");
-  });
-  test("Increment and decrement the value with min, max and step using the arrows in keyboard", function () {
-    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number input label",
-      min: 5,
-      max: 20,
-      step: 5
-    })),
-        getByLabelText = _render21.getByLabelText;
-
-    var number = getByLabelText("Number input label");
-
-    _userEvent["default"].type(number, "1");
-
-    _react2.fireEvent.keyDown(number, {
-      keyCode: 38
-    });
-
-    expect(number.value).toBe("5");
-
-    _react2.fireEvent.keyDown(number, {
-      keyCode: 38
-    });
-
-    expect(number.value).toBe("10");
-
-    _react2.fireEvent.keyDown(number, {
-      keyCode: 38
-    });
-
-    expect(number.value).toBe("15");
-
-    _react2.fireEvent.keyDown(number, {
-      keyCode: 38
-    });
-
-    expect(number.value).toBe("20");
-
-    _react2.fireEvent.keyDown(number, {
-      keyCode: 38
-    });
-
-    expect(number.value).toBe("20");
-
-    _react2.fireEvent.keyDown(number, {
-      keyCode: 40
-    });
-
-    expect(number.value).toBe("15");
-
-    _react2.fireEvent.keyDown(number, {
-      keyCode: 40
-    });
-
-    expect(number.value).toBe("10");
-
-    _react2.fireEvent.keyDown(number, {
-      keyCode: 40
-    });
-
-    expect(number.value).toBe("5");
-
-    _react2.fireEvent.keyDown(number, {
-      keyCode: 40
-    });
-
-    expect(number.value).toBe("5");
-  });
-  test("Number has correct accesibility attributes", function () {
-    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_NumberInput["default"], {
-      label: "Number input label"
-    })),
-        getByLabelText = _render22.getByLabelText,
-        getAllByRole = _render22.getAllByRole;
-
-    var number = getByLabelText("Number input label");
-    expect(number.getAttribute("aria-autocomplete")).toBeNull();
-    expect(number.getAttribute("aria-controls")).toBeNull();
-    expect(number.getAttribute("aria-expanded")).toBeNull();
-    var decrement = getAllByRole("button")[0];
-    expect(decrement.getAttribute("aria-label")).toBe("Decrement value");
-    var increment = getAllByRole("button")[1];
-    expect(increment.getAttribute("aria-label")).toBe("Increment value");
-  });
-});

package/number-input/NumberInputContext.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import NumberInputContextPropsType from "./numberInputContextTypes";
-declare const NumberInputContext: React.Context<NumberInputContextPropsType>;
-export default NumberInputContext;

package/number-input/NumberInputContext.js

@@ -1,19 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var defaultState = {
-  stepNumber: 1
-};
-
-var NumberInputContext = /*#__PURE__*/_react["default"].createContext(defaultState);
-
-var _default = NumberInputContext;
-exports["default"] = _default;

package/number-input/numberInputContextTypes.d.ts

@@ -1,19 +0,0 @@
-declare type Props = {
-    /**
-     * Type of the input.
-     */
-    typeNumber?: string;
-    /**
-     * Minimum value allowed by the number input.
-     */
-    minNumber?: number;
-    /**
-     * Maximum value allowed by the number input.
-     */
-    maxNumber?: number;
-    /**
-     * The step interval to use when using the up and down arrows to adjust the value.
-     */
-    stepNumber?: number;
-};
-export default Props;

package/number-input/numberInputContextTypes.js

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

package/number-input/types.d.ts

@@ -1,124 +0,0 @@
-declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-declare type Margin = {
-    top?: Space;
-    bottom?: Space;
-    left?: Space;
-    right?: Space;
-};
-declare type Props = {
-    /**
-     * Text to be placed above the number.
-     */
-    label?: string;
-    /**
-     * Name attribute of the input element.
-     */
-    name?: string;
-    /**
-     * Initial value of the input element, only when it is uncontrolled.
-     */
-    defaultValue?: string;
-    /**
-     * Value of the input element. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
-     */
-    value?: string;
-    /**
-     * Helper text to be placed above the number.
-     */
-    helperText?: string;
-    /**
-     * Text to be put as placeholder of the number.
-     */
-    placeholder?: string;
-    /**
-     * If true, the component will be disabled.
-     */
-    disabled?: boolean;
-    /**
-     * If true, the number 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;
-    /**
-     * Prefix to be placed before the number value.
-     */
-    prefix?: string;
-    /**
-     * Suffix to be placed after the number value.
-     */
-    suffix?: string;
-    /**
-     * Minimum value allowed by the number input. If the typed value by the user is
-     * lower than min, the onBlur and onChange functions will be called with
-     * the current value and an internal error informing that the current
-     * value is not correct. If a valid state is reached, the error parameter
-     * will not be defined in both events.
-     */
-    min?: number;
-    /**
-     * Maximum value allowed by the number input. If the typed value by the user
-     * surpasses max, the onBlur and onChange functions will be called with
-     * the current value and an internal error informing that the current
-     * value is not correct. If a valid state is reached, the error parameter
-     * will not be defined in both events.
-     */
-    max?: number;
-    /**
-     * The step interval to use when using the up and down arrows to adjust the value.
-     */
-    step?: number;
-    /**
-     * 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 not be defined.
-     */
-    onChange?: (val: {
-        value: string;
-        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 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 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;
-    /**
-     * HTML autocomplete attribute. Lets the user specify if any permission the user agent has to provide automated assistance in filling out the input 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 declare type RefType = HTMLDivElement;
-export default Props;

package/number-input/types.js

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