@dxc-technology/halstack-react 0.0.0-bfdc357 → 0.0.0-bfeb2b0

package/number-input/NumberInput.test.js

@@ -0,0 +1,508 @@
+"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",
+      error: null
+    });
+    expect(number.value).toBe("");
+
+    _userEvent["default"].type(number, "1");
+
+    expect(onChange).toHaveBeenCalledWith({
+      value: "1",
+      error: null
+    });
+    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/number-input/NumberInputContext.js

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

@@ -14,6 +14,10 @@ declare type Props = {
      * 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.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxc-technology/halstack-react",
-  "version": "0.0.0-bfdc357",
+  "version": "0.0.0-bfeb2b0",
   "description": "DXC Halstack React components library",
   "repository": "dxc-technology/halstack-react",
   "homepage": "http://developer.dxc.com/tools/react",
@@ -24,11 +24,14 @@
     "@material-ui/lab": "4.0.0-alpha.17",
     "@material-ui/pickers": "3.2.2",
     "@material-ui/styles": "4.0.2",
+    "@types/styled-components": "^5.1.24",
+    "@types/uuid": "^8.3.4",
     "color": "^3.1.3",
     "date-fns": "^2.0.0-beta.4",
     "moment": "2.24.0",
     "prop-types": "^15.7.2",
     "rgb-hex": "^3.0.0",
+    "slugify": "^1.6.5",
     "uuid": "^8.3.2"
   },
   "scripts": {
@@ -52,8 +55,8 @@
     "@storybook/addon-essentials": "^6.4.9",
     "@storybook/addon-links": "^6.4.9",
     "@storybook/react": "^6.4.9",
-    "@testing-library/react": "^11.2.5",
     "@storybook/testing-library": "0.0.7",
+    "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.6.3",
     "babel-jest": "^24.8.0",
     "babel-loader": "^8.0.6",

package/paginator/Paginator.js

@@ -15,7 +15,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 
 var _Button = _interopRequireDefault(require("../button/Button"));
 
@@ -23,7 +23,7 @@ var _Select = _interopRequireDefault(require("../select/Select"));
 
 var _Icons = require("./Icons");
 
-var _BackgroundColorContext = require("../BackgroundColorContext.js");
+var _BackgroundColorContext = require("../BackgroundColorContext");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 
@@ -67,9 +67,6 @@ var DxcPaginator = function DxcPaginator(_ref) {
     },
     value: itemsPerPage.toString(),
     size: "fillParent",
-    margin: {
-      top: "xsmall"
-    },
     tabIndex: tabIndex
   }))), /*#__PURE__*/_react["default"].createElement(TotalItemsContainer, null, minItemsPerPage, " to ", maxItemsPerPage, " of ", totalItems), onPageChange && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     size: "small",
@@ -109,9 +106,6 @@ var DxcPaginator = function DxcPaginator(_ref) {
     },
     value: currentPage.toString(),
     size: "fillParent",
-    margin: {
-      top: "xsmall"
-    },
     tabIndex: tabIndex
   }))) || /*#__PURE__*/_react["default"].createElement(TextContainer, null, "Page: ", currentPageInternal, " of ", totalPages), onPageChange && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     size: "small",