@dxc-technology/halstack-react 0.0.0-6091a5a → 0.0.0-61a8ced

package/number-input/NumberInput.test.js

@@ -0,0 +1,506 @@
+"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

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

package/{dist/number/NumberContext.js → number-input/NumberInputContext.js}

@@ -9,8 +9,11 @@ exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-/* eslint-disable prefer-template */
-var NumberContext = _react["default"].createContext();
+var defaultState = {
+  stepNumber: 1
+};
 
-var _default = NumberContext;
+var NumberInputContext = /*#__PURE__*/_react["default"].createContext(defaultState);
+
+var _default = NumberInputContext;
 exports["default"] = _default;

package/number-input/numberInputContextTypes.d.ts

@@ -0,0 +1,19 @@
+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

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

package/number-input/types.d.ts

@@ -0,0 +1,124 @@
+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

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