@dxc-technology/halstack-react 0.0.0-da224ae → 0.0.0-da4b2be

package/paginator/Paginator.test.js

@@ -0,0 +1,318 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+var _Paginator = _interopRequireDefault(require("./Paginator.tsx"));
+
+// Mocking DOMRect for Radix Primitive Popover
+global.globalThis = global;
+global.DOMRect = {
+  fromRect: function fromRect() {
+    return {
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      width: 0,
+      height: 0
+    };
+  }
+};
+
+global.ResizeObserver = /*#__PURE__*/function () {
+  function ResizeObserver() {
+    (0, _classCallCheck2["default"])(this, ResizeObserver);
+  }
+
+  (0, _createClass2["default"])(ResizeObserver, [{
+    key: "observe",
+    value: function observe() {}
+  }, {
+    key: "unobserve",
+    value: function unobserve() {}
+  }, {
+    key: "disconnect",
+    value: function disconnect() {}
+  }]);
+  return ResizeObserver;
+}();
+
+global.DOMRect = {
+  fromRect: function fromRect() {
+    return {
+      top: 0,
+      left: 0,
+      bottom: 0,
+      right: 0,
+      width: 0,
+      height: 0
+    };
+  }
+};
+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();
+    expect(getByText("1 to 10 of 20")).toBeTruthy();
+    expect(getByText("Page: 1 of 2")).toBeTruthy();
+  });
+  test("Paginator renders with totalItems", function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
+      totalItems: 20
+    })),
+        getByText = _render4.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 _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
+      currentPage: 2,
+      itemsPerPage: 10,
+      totalItems: 20
+    })),
+        getByText = _render5.getByText;
+
+    expect(getByText("11 to 20 of 20")).toBeTruthy();
+    expect(getByText("Page: 2 of 2")).toBeTruthy();
+  });
+  test("Paginator renders goToPage select", function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
+      currentPage: 2,
+      showGoToPage: true,
+      itemsPerPage: 10,
+      totalItems: 20
+    })),
+        getByText = _render6.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 _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
+      currentPage: 1,
+      itemsPerPage: 10,
+      totalItems: 27,
+      showGoToPage: true,
+      onPageChange: onClick
+    })),
+        getByText = _render7.getByText,
+        getAllByRole = _render7.getAllByRole;
+
+    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 _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
+      onPageChange: onClick,
+      currentPage: 1,
+      itemsPerPage: 10,
+      totalItems: 20
+    })),
+        getAllByRole = _render8.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 _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
+      currentPage: 1,
+      itemsPerPage: 10,
+      itemsPerPageOptions: [10, 15],
+      itemsPerPageFunction: onClick,
+      totalItems: 20
+    })),
+        getAllByText = _render9.getAllByText,
+        getByText = _render9.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 _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
+      onPageChange: onClick,
+      currentPage: 2,
+      itemsPerPage: 10,
+      totalItems: 20
+    })),
+        getAllByRole = _render10.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 _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
+      onPageChange: onClick,
+      currentPage: 2,
+      itemsPerPage: 10,
+      totalItems: 20
+    })),
+        getAllByRole = _render11.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 _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
+      onPageChange: onClick,
+      currentPage: 1,
+      itemsPerPage: 10,
+      totalItems: 20
+    })),
+        getAllByRole = _render12.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 _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")[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 _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
+      onPageChange: onClick,
+      currentPage: 2,
+      itemsPerPage: 10,
+      totalItems: 20
+    })),
+        getAllByRole = _render14.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 _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
+      onPageChange: onClick,
+      currentPage: 1,
+      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")).toBeTruthy();
+    expect(prevButton.hasAttribute("disabled")).toBeTruthy();
+    expect(nextButton.hasAttribute("disabled")).toBeFalsy();
+    expect(lastButton.hasAttribute("disabled")).toBeFalsy();
+  });
+  test("itemsPerPage is 0 and showGoToPage is true", function () {
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Paginator["default"], {
+      itemsPerPage: 0,
+      itemsPerPageOptions: [5, 10, 15],
+      totalItems: 27,
+      showGoToPage: true
+    })),
+        getByText = _render16.getByText,
+        getAllByRole = _render16.getAllByRole;
+
+    expect(getByText("Items per page:")).toBeTruthy();
+    expect(getAllByRole("combobox")).toBeTruthy();
+  });
+});

package/paragraph/Paragraph.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+declare const DxcParagraph: ({ children }: {
+    children: React.ReactNode;
+}) => JSX.Element;
+export default DxcParagraph;

package/paragraph/Paragraph.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
+
+var _useTheme = _interopRequireDefault(require("../useTheme"));
+
+var _BaseTypography = _interopRequireDefault(require("../utils/BaseTypography"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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 DxcParagraph = function DxcParagraph(_ref) {
+  var children = _ref.children;
+  var colorsTheme = (0, _useTheme["default"])();
+  var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
+  return /*#__PURE__*/_react["default"].createElement(_BaseTypography["default"], {
+    as: "p",
+    display: colorsTheme.paragraph.display,
+    fontSize: colorsTheme.paragraph.fontSize,
+    fontWeight: colorsTheme.paragraph.fontWeight,
+    color: backgroundType && backgroundType === "dark" ? colorsTheme.paragraph.fontColorOnDark : colorsTheme.paragraph.fontColor
+  }, children);
+};
+
+var _default = DxcParagraph;
+exports["default"] = _default;

package/paragraph/Paragraph.stories.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import Title from "../../.storybook/components/Title";
+import DxcParagraph from "./Paragraph";
+import { BackgroundColorProvider } from "../BackgroundColorContext";
+import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import DarkContainer from "../../.storybook/components/DarkSection";
+
+export default {
+  title: "Paragraph",
+  component: DxcParagraph,
+};
+
+export const Chromatic = () => (
+  <>
+    <ExampleContainer>
+      <Title title="Default Paragraph" level={4} />
+      <DxcParagraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id tortor sit amet velit auctor cursus id eget
+        nisl. Vivamus luctus egestas eros, at mattis libero eleifend ac. Integer vel urna rutrum, pretium arcu
+        dignissim, fringilla turpis. Nullam luctus odio quis magna finibus, a pharetra magna euismod. Nullam efficitur
+        semper pellentesque. Nulla eget arcu ac diam fringilla vehicula. In imperdiet nisl hendrerit, elementum metus
+        eu, ornare risus. Aenean neque nibh, vestibulum vitae elit vel, imperdiet suscipit leo. Curabitur blandit
+        iaculis pretium. Fusce id imperdiet dui, ut laoreet justo. Sed maximus sollicitudin ipsum, et varius massa
+        condimentum eget. Vivamus id mauris et nisl mattis consequat et id lectus. Quisque mollis lacinia nisl.
+        Suspendisse sed quam tincidunt, commodo dolor vel, tincidunt nisl.
+      </DxcParagraph>
+    </ExampleContainer>
+    <BackgroundColorProvider color="#333333">
+      <DarkContainer>
+        <Title title="Default Paragraph" theme="dark" level={4} />
+        <DxcParagraph>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id tortor sit amet velit auctor cursus id eget
+          nisl. Vivamus luctus egestas eros, at mattis libero eleifend ac. Integer vel urna rutrum, pretium arcu
+          dignissim, fringilla turpis. Nullam luctus odio quis magna finibus, a pharetra magna euismod. Nullam efficitur
+          semper pellentesque. Nulla eget arcu ac diam fringilla vehicula. In imperdiet nisl hendrerit, elementum metus
+          eu, ornare risus. Aenean neque nibh, vestibulum vitae elit vel, imperdiet suscipit leo. Curabitur blandit
+          iaculis pretium. Fusce id imperdiet dui, ut laoreet justo. Sed maximus sollicitudin ipsum, et varius massa
+          condimentum eget. Vivamus id mauris et nisl mattis consequat et id lectus. Quisque mollis lacinia nisl.
+          Suspendisse sed quam tincidunt, commodo dolor vel, tincidunt nisl.
+        </DxcParagraph>
+      </DarkContainer>
+    </BackgroundColorProvider>
+  </>
+);

package/password-input/PasswordInput.js

@@ -19,6 +19,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _TextInput = _interopRequireDefault(require("../text-input/TextInput"));
 
+var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
+
 var _templateObject;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -26,21 +28,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,
@@ -55,45 +55,48 @@ var DxcPasswordInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
       setIsPasswordVisible = _useState2[1];
 
   var inputRef = (0, _react.useRef)(null);
+  var translatedLabels = (0, _useTranslatedLabels["default"])();
 
   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);
     }
   };
 
   var getIconTitle = function getIconTitle() {
-    return isPasswordVisible ? "Hide password" : "Show password";
+    return isPasswordVisible ? translatedLabels.passwordInput.inputHidePasswordTitle : translatedLabels.passwordInput.inputShowPasswordTitle;
   };
 
   (0, _react.useEffect)(function () {
-    setAriaAttributes(false, "Show");
+    setAriaAttributes(false, translatedLabels.passwordInput.inputShowPasswordTitle);
 
     if (isPasswordVisible) {
       setInputType("text");
-      setAriaAttributes(true, "Hide");
+      setAriaAttributes(true, translatedLabels.passwordInput.inputHidePasswordTitle);
     } else {
       setInputType("password");
-      setAriaAttributes(false, "Show");
+      setAriaAttributes(false, translatedLabels.passwordInput.inputShowPasswordTitle);
     }
   }, [isPasswordVisible]);
 
@@ -150,7 +153,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>