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

package/paginator/Paginator.test.js

@@ -0,0 +1,266 @@
+"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 _Paginator = _interopRequireDefault(require("./Paginator"));
+
+describe("Paginator component tests", function () {
+  test("Paginator renders with default values", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], null)),
+        getByText = _render.getByText;
+
+    expect(getByText("1 to 1 of 1")).toBeTruthy();
+    expect(getByText("Page: 1 of 1")).toBeTruthy();
+  });
+  test("Paginator renders with currentPage", function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
+      currentPage: 2
+    })),
+        getByText = _render2.getByText;
+
+    expect(getByText("Page: 2 of 1")).toBeTruthy();
+  });
+  test("Paginator renders with itemsPerPageOptions", function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
+      currentPage: 1,
+      itemsPerPage: 10,
+      itemsPerPageOptions: [10, 15],
+      totalItems: 20
+    })),
+        getByText = _render3.getByText;
+
+    expect(getByText("Items per page")).toBeTruthy();
+  });
+  test("Paginator renders with itemsPerPageOptions", function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
+      currentPage: 1,
+      itemsPerPage: 10,
+      totalItems: 20
+    })),
+        getByText = _render4.getByText;
+
+    expect(getByText("1 to 10 of 20")).toBeTruthy();
+    expect(getByText("Page: 1 of 2")).toBeTruthy();
+  });
+  test("Paginator renders with totalItems", function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
+      totalItems: 20
+    })),
+        getByText = _render5.getByText;
+
+    expect(getByText("1 to 5 of 20")).toBeTruthy();
+    expect(getByText("Page: 1 of 4")).toBeTruthy();
+  });
+  test("Paginator renders with correct text in second page", function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
+      currentPage: 2,
+      itemsPerPage: 10,
+      totalItems: 20
+    })),
+        getByText = _render6.getByText;
+
+    expect(getByText("11 to 20 of 20")).toBeTruthy();
+    expect(getByText("Page: 2 of 2")).toBeTruthy();
+  });
+  test("Paginator renders goToPage select", function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
+      currentPage: 2,
+      showGoToPage: true,
+      itemsPerPage: 10,
+      totalItems: 20
+    })),
+        getByText = _render7.getByText;
+
+    expect(getByText("Go to page:")).toBeTruthy();
+  });
+  test("Paginator goToPage call correct function", function () {
+    var onClick = jest.fn();
+
+    window.HTMLElement.prototype.scrollIntoView = function () {};
+
+    window.HTMLElement.prototype.scrollTo = function () {};
+
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
+      currentPage: 1,
+      itemsPerPage: 10,
+      totalItems: 27,
+      showGoToPage: true,
+      onPageChange: onClick
+    })),
+        getByText = _render8.getByText,
+        getAllByRole = _render8.getAllByRole,
+        getByRole = _render8.getByRole;
+
+    var goToPageSelect = getAllByRole("combobox")[0];
+    (0, _react2.act)(function () {
+      _userEvent["default"].click(goToPageSelect);
+    });
+    var goToPageOption = getByText("2");
+    (0, _react2.act)(function () {
+      _userEvent["default"].click(goToPageOption);
+    });
+    expect(onClick).toHaveBeenCalledWith(2);
+  });
+  test("Call correct goToPageFunction", function () {
+    var onClick = jest.fn();
+
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
+      onPageChange: onClick,
+      currentPage: 1,
+      itemsPerPage: 10,
+      totalItems: 20
+    })),
+        getAllByRole = _render9.getAllByRole;
+
+    var nextButton = getAllByRole("button")[2];
+
+    _userEvent["default"].click(nextButton);
+
+    expect(onClick).toHaveBeenCalled();
+  });
+  test("Call correct itemsPerPageFunction", function () {
+    var onClick = jest.fn();
+
+    window.HTMLElement.prototype.scrollIntoView = function () {};
+
+    window.HTMLElement.prototype.scrollTo = function () {};
+
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
+      currentPage: 1,
+      itemsPerPage: 10,
+      itemsPerPageOptions: [10, 15],
+      itemsPerPageFunction: onClick,
+      totalItems: 20
+    })),
+        getAllByText = _render10.getAllByText,
+        getByText = _render10.getByText;
+
+    var select = getAllByText("10")[0];
+    (0, _react2.act)(function () {
+      _userEvent["default"].click(select);
+    });
+    var itemPerPageOption = getByText("15");
+    (0, _react2.act)(function () {
+      _userEvent["default"].click(itemPerPageOption);
+    });
+    expect(onClick).toHaveBeenCalledWith(15);
+  });
+  test("Next button is disable in last page", function () {
+    var onClick = jest.fn();
+
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
+      onPageChange: onClick,
+      currentPage: 2,
+      itemsPerPage: 10,
+      totalItems: 20
+    })),
+        getAllByRole = _render11.getAllByRole;
+
+    var nextButton = getAllByRole("button")[2];
+    expect(nextButton.hasAttribute("disabled")).toBeTruthy();
+
+    _userEvent["default"].click(nextButton);
+
+    expect(onClick).toHaveBeenCalledTimes(0);
+  });
+  test("Last button is disable in last page", function () {
+    var onClick = jest.fn();
+
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
+      onPageChange: onClick,
+      currentPage: 2,
+      itemsPerPage: 10,
+      totalItems: 20
+    })),
+        getAllByRole = _render12.getAllByRole;
+
+    var lastButton = getAllByRole("button")[3];
+    expect(lastButton.hasAttribute("disabled")).toBeTruthy();
+
+    _userEvent["default"].click(lastButton);
+
+    expect(onClick).toHaveBeenCalledTimes(0);
+  });
+  test("First button is disable in first page", function () {
+    var onClick = jest.fn();
+
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
+      onPageChange: onClick,
+      currentPage: 1,
+      itemsPerPage: 10,
+      totalItems: 20
+    })),
+        getAllByRole = _render13.getAllByRole;
+
+    var lastButton = getAllByRole("button")[0];
+    expect(lastButton.hasAttribute("disabled")).toBeTruthy();
+
+    _userEvent["default"].click(lastButton);
+
+    expect(onClick).toHaveBeenCalledTimes(0);
+  });
+  test("Previous button is disable in first page", function () {
+    var onClick = jest.fn();
+
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
+      onPageChange: onClick,
+      currentPage: 1,
+      itemsPerPage: 10,
+      totalItems: 20
+    })),
+        getAllByRole = _render14.getAllByRole;
+
+    var lastButton = getAllByRole("button")[1];
+    expect(lastButton.hasAttribute("disabled")).toBeTruthy();
+
+    _userEvent["default"].click(lastButton);
+
+    expect(onClick).toHaveBeenCalledTimes(0);
+  });
+  test("Last and next buttons are disable in last page", function () {
+    var onClick = jest.fn();
+
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
+      onPageChange: onClick,
+      currentPage: 2,
+      itemsPerPage: 10,
+      totalItems: 20
+    })),
+        getAllByRole = _render15.getAllByRole;
+
+    var firstButton = getAllByRole("button")[0];
+    var prevButton = getAllByRole("button")[1];
+    var nextButton = getAllByRole("button")[2];
+    var lastButton = getAllByRole("button")[3];
+    expect(firstButton.hasAttribute("disabled")).toBeFalsy();
+    expect(prevButton.hasAttribute("disabled")).toBeFalsy();
+    expect(nextButton.hasAttribute("disabled")).toBeTruthy();
+    expect(lastButton.hasAttribute("disabled")).toBeTruthy();
+  });
+  test("First and previous buttons are disable in first page", function () {
+    var onClick = jest.fn();
+
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
+      onPageChange: onClick,
+      currentPage: 1,
+      itemsPerPage: 10,
+      totalItems: 20
+    })),
+        getAllByRole = _render16.getAllByRole;
+
+    var firstButton = getAllByRole("button")[0];
+    var prevButton = getAllByRole("button")[1];
+    var nextButton = getAllByRole("button")[2];
+    var lastButton = getAllByRole("button")[3];
+    expect(firstButton.hasAttribute("disabled")).toBeTruthy();
+    expect(prevButton.hasAttribute("disabled")).toBeTruthy();
+    expect(nextButton.hasAttribute("disabled")).toBeFalsy();
+    expect(lastButton.hasAttribute("disabled")).toBeFalsy();
+  });
+});

package/password-input/PasswordInput.js

@@ -26,21 +26,19 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var DxcPasswordInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
-  var _ref$label = _ref.label,
-      label = _ref$label === void 0 ? "" : _ref$label,
+  var label = _ref.label,
       _ref$name = _ref.name,
       name = _ref$name === void 0 ? "" : _ref$name,
       value = _ref.value,
-      _ref$helperText = _ref.helperText,
-      helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
+      helperText = _ref.helperText,
       _ref$clearable = _ref.clearable,
       clearable = _ref$clearable === void 0 ? false : _ref$clearable,
       onChange = _ref.onChange,
       onBlur = _ref.onBlur,
-      _ref$error = _ref.error,
-      error = _ref$error === void 0 ? "" : _ref$error,
+      error = _ref.error,
       pattern = _ref.pattern,
-      length = _ref.length,
+      minLength = _ref.minLength,
+      maxLength = _ref.maxLength,
       _ref$autocomplete = _ref.autocomplete,
       autocomplete = _ref$autocomplete === void 0 ? "off" : _ref$autocomplete,
       margin = _ref.margin,
@@ -59,25 +57,27 @@ var DxcPasswordInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
   var setInputType = function setInputType(type) {
     var _inputRef$current, _inputRef$current$chi;
 
-    inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : (_inputRef$current$chi = _inputRef$current.children[2]) === null || _inputRef$current$chi === void 0 ? void 0 : _inputRef$current$chi.children[0].setAttribute("type", type);
+    inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : (_inputRef$current$chi = _inputRef$current.children[label && helperText ? 2 : label || helperText ? 1 : 0]) === null || _inputRef$current$chi === void 0 ? void 0 : _inputRef$current$chi.children[0].setAttribute("type", type);
   };
 
   var setAriaAttributes = function setAriaAttributes(ariaExpanded, ariaLabel) {
+    var inputIndex = label && helperText ? 2 : label || helperText ? 1 : 0;
+
     if (error && clearable && value) {
       var _inputRef$current2, _inputRef$current2$ch, _inputRef$current2$ch2, _inputRef$current3, _inputRef$current3$ch, _inputRef$current3$ch2;
 
-      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : (_inputRef$current2$ch = _inputRef$current2.children[2]) === null || _inputRef$current2$ch === void 0 ? void 0 : (_inputRef$current2$ch2 = _inputRef$current2$ch.children[3]) === null || _inputRef$current2$ch2 === void 0 ? void 0 : _inputRef$current2$ch2.setAttribute("aria-expanded", ariaExpanded);
-      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : (_inputRef$current3$ch = _inputRef$current3.children[2]) === null || _inputRef$current3$ch === void 0 ? void 0 : (_inputRef$current3$ch2 = _inputRef$current3$ch.children[3]) === null || _inputRef$current3$ch2 === void 0 ? void 0 : _inputRef$current3$ch2.setAttribute("aria-label", ariaLabel);
+      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : (_inputRef$current2$ch = _inputRef$current2.children[inputIndex]) === null || _inputRef$current2$ch === void 0 ? void 0 : (_inputRef$current2$ch2 = _inputRef$current2$ch.children[3]) === null || _inputRef$current2$ch2 === void 0 ? void 0 : _inputRef$current2$ch2.setAttribute("aria-expanded", ariaExpanded);
+      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : (_inputRef$current3$ch = _inputRef$current3.children[inputIndex]) === null || _inputRef$current3$ch === void 0 ? void 0 : (_inputRef$current3$ch2 = _inputRef$current3$ch.children[3]) === null || _inputRef$current3$ch2 === void 0 ? void 0 : _inputRef$current3$ch2.setAttribute("aria-label", ariaLabel);
     } else if (error || clearable && !value) {
       var _inputRef$current4, _inputRef$current4$ch, _inputRef$current4$ch2, _inputRef$current5, _inputRef$current5$ch, _inputRef$current5$ch2;
 
-      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : (_inputRef$current4$ch = _inputRef$current4.children[2]) === null || _inputRef$current4$ch === void 0 ? void 0 : (_inputRef$current4$ch2 = _inputRef$current4$ch.children[2]) === null || _inputRef$current4$ch2 === void 0 ? void 0 : _inputRef$current4$ch2.setAttribute("aria-expanded", ariaExpanded);
-      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current5 = inputRef.current) === null || _inputRef$current5 === void 0 ? void 0 : (_inputRef$current5$ch = _inputRef$current5.children[2]) === null || _inputRef$current5$ch === void 0 ? void 0 : (_inputRef$current5$ch2 = _inputRef$current5$ch.children[2]) === null || _inputRef$current5$ch2 === void 0 ? void 0 : _inputRef$current5$ch2.setAttribute("aria-label", ariaLabel);
+      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : (_inputRef$current4$ch = _inputRef$current4.children[inputIndex]) === null || _inputRef$current4$ch === void 0 ? void 0 : (_inputRef$current4$ch2 = _inputRef$current4$ch.children[2]) === null || _inputRef$current4$ch2 === void 0 ? void 0 : _inputRef$current4$ch2.setAttribute("aria-expanded", ariaExpanded);
+      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current5 = inputRef.current) === null || _inputRef$current5 === void 0 ? void 0 : (_inputRef$current5$ch = _inputRef$current5.children[inputIndex]) === null || _inputRef$current5$ch === void 0 ? void 0 : (_inputRef$current5$ch2 = _inputRef$current5$ch.children[2]) === null || _inputRef$current5$ch2 === void 0 ? void 0 : _inputRef$current5$ch2.setAttribute("aria-label", ariaLabel);
     } else {
       var _inputRef$current6, _inputRef$current6$ch, _inputRef$current6$ch2, _inputRef$current7, _inputRef$current7$ch, _inputRef$current7$ch2;
 
-      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current6 = inputRef.current) === null || _inputRef$current6 === void 0 ? void 0 : (_inputRef$current6$ch = _inputRef$current6.children[2]) === null || _inputRef$current6$ch === void 0 ? void 0 : (_inputRef$current6$ch2 = _inputRef$current6$ch.children[1]) === null || _inputRef$current6$ch2 === void 0 ? void 0 : _inputRef$current6$ch2.setAttribute("aria-expanded", ariaExpanded);
-      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current7 = inputRef.current) === null || _inputRef$current7 === void 0 ? void 0 : (_inputRef$current7$ch = _inputRef$current7.children[2]) === null || _inputRef$current7$ch === void 0 ? void 0 : (_inputRef$current7$ch2 = _inputRef$current7$ch.children[1]) === null || _inputRef$current7$ch2 === void 0 ? void 0 : _inputRef$current7$ch2.setAttribute("aria-label", ariaLabel);
+      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current6 = inputRef.current) === null || _inputRef$current6 === void 0 ? void 0 : (_inputRef$current6$ch = _inputRef$current6.children[inputIndex]) === null || _inputRef$current6$ch === void 0 ? void 0 : (_inputRef$current6$ch2 = _inputRef$current6$ch.children[1]) === null || _inputRef$current6$ch2 === void 0 ? void 0 : _inputRef$current6$ch2.setAttribute("aria-expanded", ariaExpanded);
+      inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current7 = inputRef.current) === null || _inputRef$current7 === void 0 ? void 0 : (_inputRef$current7$ch = _inputRef$current7.children[inputIndex]) === null || _inputRef$current7$ch === void 0 ? void 0 : (_inputRef$current7$ch2 = _inputRef$current7$ch.children[1]) === null || _inputRef$current7$ch2 === void 0 ? void 0 : _inputRef$current7$ch2.setAttribute("aria-label", ariaLabel);
     }
   };
 
@@ -86,14 +86,14 @@ var DxcPasswordInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
   };
 
   (0, _react.useEffect)(function () {
-    setAriaAttributes(false, "Show");
+    setAriaAttributes(false, "Show password");
 
     if (isPasswordVisible) {
       setInputType("text");
-      setAriaAttributes(true, "Hide");
+      setAriaAttributes(true, "Hide password");
     } else {
       setInputType("password");
-      setAriaAttributes(false, "Show");
+      setAriaAttributes(false, "Show password");
     }
   }, [isPasswordVisible]);
 
@@ -150,7 +150,8 @@ var DxcPasswordInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
     margin: margin,
     size: size,
     pattern: pattern,
-    length: length,
+    minLength: minLength,
+    maxLength: maxLength,
     autocomplete: autocomplete,
     tabIndex: tabIndex
   }));

package/password-input/PasswordInput.stories.tsx

@@ -53,7 +53,7 @@ export const Chromatic = () => (
     <Title title="Margins" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Xxsmall margin" theme="light" level={4} />
-      <DxcPasswordInput label="Xxsmmall" margin="xxsmall" />
+      <DxcPasswordInput label="Xxsmall" margin="xxsmall" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Xsmall margin" theme="light" level={4} />
@@ -100,7 +100,7 @@ export const Chromatic = () => (
 );
 
 const Password = () => (
-  <ExampleContainer>
+  <ExampleContainer expanded>
     <Title title="Show password" theme="light" level={4} />
     <DxcPasswordInput label="Password input" value="Password" />
   </ExampleContainer>
@@ -108,7 +108,7 @@ const Password = () => (
 const PasswordDark = () => (
   <BackgroundColorProvider color="#333333">
     <DarkContainer>
-      <ExampleContainer>
+      <ExampleContainer expanded>
         <Title title="Show password" theme="dark" level={4} />
         <DxcPasswordInput label="Password input" value="Password" />
       </ExampleContainer>

package/password-input/PasswordInput.test.js

@@ -0,0 +1,183 @@
+"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 _PasswordInput = _interopRequireDefault(require("./PasswordInput"));
+
+describe("Password input component tests", function () {
+  test("Password input renders with label", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
+      label: "Password input label"
+    })),
+        getByText = _render.getByText;
+
+    expect(getByText("Password input label")).toBeTruthy();
+  });
+  test("Password input renders with helper text", function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
+      helperText: "Helper text"
+    })),
+        getByText = _render2.getByText;
+
+    expect(getByText("Helper text")).toBeTruthy();
+  });
+  test("Password input renders error", function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
+      error: "Error message."
+    })),
+        getByText = _render3.getByText;
+
+    expect(getByText("Error message.")).toBeTruthy();
+  });
+  test("onChange function is called correctly", function () {
+    var onChange = jest.fn();
+
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
+      label: "Password input",
+      onChange: onChange
+    })),
+        getByRole = _render4.getByRole;
+
+    var passwordInput = getByRole("textbox");
+
+    _userEvent["default"].type(passwordInput, "Pa$$w0rd");
+
+    expect(onChange).toHaveBeenCalledWith({
+      value: "P",
+      error: null
+    });
+    expect(passwordInput.value).toBe("Pa$$w0rd");
+  });
+  test("onBlur function is called correctly", function () {
+    var onBlur = jest.fn();
+
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
+      label: "Password input",
+      onBlur: onBlur
+    })),
+        getByRole = _render5.getByRole;
+
+    var passwordInput = getByRole("textbox");
+
+    _userEvent["default"].type(passwordInput, "Pa$$w0rd");
+
+    _react2.fireEvent.blur(passwordInput);
+
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "Pa$$w0rd",
+      error: null
+    });
+    expect(passwordInput.value).toBe("Pa$$w0rd");
+  });
+  test("Clear password input value", function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
+      label: "Password input",
+      clearable: true
+    })),
+        getAllByRole = _render6.getAllByRole,
+        getByRole = _render6.getByRole;
+
+    var passwordInput = getByRole("textbox");
+
+    _userEvent["default"].type(passwordInput, "Pa$$w0rd");
+
+    expect(passwordInput.value).toBe("Pa$$w0rd");
+    var clearButton = getAllByRole("button")[0];
+
+    _userEvent["default"].click(clearButton);
+
+    expect(passwordInput.value).toBe("");
+  });
+  test("Non clearable password input has no clear icon", function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
+      label: "Password input"
+    })),
+        getAllByRole = _render7.getAllByRole,
+        getByRole = _render7.getByRole;
+
+    var passwordInput = getByRole("textbox");
+
+    _userEvent["default"].type(passwordInput, "Pa$$w0rd");
+
+    expect(passwordInput.value).toBe("Pa$$w0rd");
+    var buttons = getAllByRole("button");
+    expect(buttons.length).toBe(1);
+  });
+  test("Show/hide password input button works correctly", function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
+      label: "Password input",
+      clearable: true
+    })),
+        getAllByRole = _render8.getAllByRole,
+        getByRole = _render8.getByRole;
+
+    var passwordInput = getByRole("textbox");
+
+    _userEvent["default"].type(passwordInput, "Pa$$w0rd");
+
+    expect(passwordInput.value).toBe("Pa$$w0rd");
+    expect(passwordInput.type).toBe("password");
+    var showButton = getAllByRole("button")[1];
+
+    _userEvent["default"].click(showButton);
+
+    expect(passwordInput.type).toBe("text");
+  });
+  test("Password tooltip is correct", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render9, getAllByRole, getByTitle, queryByTitle, showButton;
+
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
+              label: "Password input",
+              clearable: true,
+              value: "Password"
+            })), getAllByRole = _render9.getAllByRole, getByTitle = _render9.getByTitle, queryByTitle = _render9.queryByTitle;
+            showButton = getAllByRole("button")[1];
+
+            _userEvent["default"].hover(showButton);
+
+            expect(getByTitle("Show password")).toBeTruthy();
+
+            _userEvent["default"].unhover(showButton);
+
+            expect(queryByTitle("Hide password")).toBeFalsy();
+
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  test("Password input has correct accesibility attributes", function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
+      label: "Password input"
+    })),
+        getByRole = _render10.getByRole;
+
+    var passwordInput = getByRole("textbox");
+    expect(passwordInput.getAttribute("aria-autocomplete")).toBeNull();
+    expect(passwordInput.getAttribute("aria-controls")).toBeNull();
+    var showButton = getByRole("button");
+    expect(showButton.getAttribute("aria-expanded")).toBe("false");
+    expect(showButton.getAttribute("aria-label")).toBe("Show password");
+
+    _userEvent["default"].click(showButton);
+
+    expect(showButton.getAttribute("aria-expanded")).toBe("true");
+    expect(showButton.getAttribute("aria-label")).toBe("Hide password");
+  });
+});

package/password-input/types.d.ts

@@ -37,10 +37,10 @@ declare type Props = {
         error: string | null;
     }) => 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 be null.
-    */
+     * 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 be null.
+     */
     onBlur?: (val: {
         value: string;
         error: string | null;
@@ -62,18 +62,25 @@ declare type Props = {
      */
     pattern?: string;
     /**
-     * Specifies the minimun and maximum length allowed by the password input.
+     * Specifies the minimun length allowed by the password input.
+     * This will be checked both when the input element 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 be null.
+     */
+    minLength?: number;
+    /**
+     * Specifies the maximum length allowed by the password input.
      * This will be checked both when the input element loses the
      * focus and while typing within it. If the string entered does not
-     * comply the length, the onBlur and onChange functions will be called
+     * 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 be null.
      */
-    length?: {
-        min?: number;
-        max?: number;
-    };
+    maxLength?: number;
     /**
      * 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', ...

package/progress-bar/ProgressBar.js

@@ -21,9 +21,9 @@ var _LinearProgress = _interopRequireDefault(require("@material-ui/core/LinearPr
 
 var _variables = require("../common/variables.js");
 
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 
-var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
+var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
@@ -59,9 +59,9 @@ var DxcProgressBar = function DxcProgressBar(_ref) {
     overlay: overlay,
     showValue: showValue,
     backgroundType: backgroundType
-  }, value === null ? 0 : value >= 0 && value <= 100 ? value : value < 0 ? 0 : 100, " %")), /*#__PURE__*/_react["default"].createElement(_LinearProgress["default"], {
+  }, value === null || value === undefined ? 0 : value >= 0 && value <= 100 ? value : value < 0 ? 0 : 100, " %")), /*#__PURE__*/_react["default"].createElement(_LinearProgress["default"], {
     variant: showValue ? "determinate" : "indeterminate",
-    value: value === null ? 0 : value >= 0 && value <= 100 ? value : value < 0 ? 0 : 100
+    value: value === null || value === undefined ? 0 : value >= 0 && value <= 100 ? value : value < 0 ? 0 : 100
   }), helperText && /*#__PURE__*/_react["default"].createElement(HelperText, {
     overlay: overlay,
     backgroundType: backgroundType