@dxc-technology/halstack-react 0.0.0-ff5083e → 0.0.0-ff6c8bf

package/paragraph/Paragraph.js

@@ -1,38 +1,22 @@
 "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 _Typography = _interopRequireDefault(require("../typography/Typography"));
-
-var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
-
+var _react = _interopRequireDefault(require("react"));
 var _useTheme = _interopRequireDefault(require("../useTheme"));
-
-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; }
-
-function Paragraph(_ref) {
+var _BaseTypography = _interopRequireDefault(require("../utils/BaseTypography"));
+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(_Typography["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
+    color: colorsTheme.paragraph.fontColor
   }, children);
-}
-
-var _default = Paragraph;
-exports["default"] = _default;
+};
+var _default = exports["default"] = DxcParagraph;

package/paragraph/Paragraph.stories.tsx

@@ -1,9 +1,7 @@
 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",
@@ -13,7 +11,7 @@ export default {
 export const Chromatic = () => (
   <>
     <ExampleContainer>
-      <Title title="Default Paragraph" theme="light" level={4} />
+      <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
@@ -25,20 +23,5 @@ export const Chromatic = () => (
         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.accessibility.test.js

@@ -0,0 +1,153 @@
+"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 _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 _axeHelper = require("../../test/accessibility/axe-helper.js");
+var _PasswordInput = _interopRequireDefault(require("./PasswordInput.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;
+}();
+describe("Password input component accessibility tests", function () {
+  it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, container, results;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
+            label: "Password input label",
+            helperText: "Helper text",
+            margin: "medium",
+            name: "Password",
+            size: "medium",
+            value: "Password",
+            minLength: 5,
+            maxLength: 10,
+            clearable: true
+          })), container = _render.container;
+          _context.next = 3;
+          return (0, _axeHelper.axe)(container);
+        case 3:
+          results = _context.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  it("Should not have basic accessibility issues for pattern mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var _render2, container, results;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
+            label: "Password input label",
+            helperText: "Helper text",
+            margin: "medium",
+            name: "Password",
+            size: "medium",
+            value: "Password",
+            minLength: 5,
+            maxLength: 10,
+            autocomplete: "on",
+            pattern: "^.*(?=.*[a-zA-Z])(?=.*)(?=.*[!&$%&? \"]).*$"
+          })), container = _render2.container;
+          _context2.next = 3;
+          return (0, _axeHelper.axe)(container);
+        case 3:
+          results = _context2.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })));
+  it("Should not have basic accessibility issues for clearable mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+    var _render3, container, results;
+    return _regenerator["default"].wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
+            label: "Password input label",
+            helperText: "Helper text",
+            margin: "medium",
+            name: "Password",
+            size: "medium",
+            error: "Password error",
+            value: "Password",
+            minLength: 5,
+            maxLength: 10,
+            clearable: true
+          })), container = _render3.container;
+          _context3.next = 3;
+          return (0, _axeHelper.axe)(container);
+        case 3:
+          results = _context3.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  })));
+  it("Should not have basic accessibility issues for autocomplete mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+    var _render4, container, results;
+    return _regenerator["default"].wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_PasswordInput["default"], {
+            label: "Password input label",
+            helperText: "Helper text",
+            margin: "medium",
+            name: "Password",
+            size: "medium",
+            value: "Password",
+            minLength: 5,
+            maxLength: 10,
+            autocomplete: "on"
+          })), container = _render4.container;
+          _context4.next = 3;
+          return (0, _axeHelper.axe)(container);
+        case 3:
+          results = _context4.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee4);
+  })));
+});

package/password-input/PasswordInput.js

@@ -1,151 +1,84 @@
 "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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _TextInput = _interopRequireDefault(require("../text-input/TextInput"));
-
-var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
-
+var _useTranslatedLabels2 = _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); }
-
-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; }
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var setInputType = function setInputType(type, element) {
+  element === null || element === void 0 ? void 0 : element.getElementsByTagName("input")[0].setAttribute("type", type);
+};
+var setAriaAttributes = function setAriaAttributes(ariaExpanded, ariaLabel, element) {
+  var buttonElement = element === null || element === void 0 ? void 0 : element.getElementsByTagName("button")[0];
+  buttonElement === null || buttonElement === void 0 ? void 0 : buttonElement.setAttribute("aria-expanded", ariaExpanded);
+  buttonElement === null || buttonElement === void 0 ? void 0 : buttonElement.setAttribute("aria-label", ariaLabel);
+};
 var DxcPasswordInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var label = _ref.label,
-      _ref$name = _ref.name,
-      name = _ref$name === void 0 ? "" : _ref$name,
-      value = _ref.value,
-      helperText = _ref.helperText,
-      _ref$clearable = _ref.clearable,
-      clearable = _ref$clearable === void 0 ? false : _ref$clearable,
-      onChange = _ref.onChange,
-      onBlur = _ref.onBlur,
-      error = _ref.error,
-      pattern = _ref.pattern,
-      minLength = _ref.minLength,
-      maxLength = _ref.maxLength,
-      _ref$autocomplete = _ref.autocomplete,
-      autocomplete = _ref$autocomplete === void 0 ? "off" : _ref$autocomplete,
-      margin = _ref.margin,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? "medium" : _ref$size,
-      _ref$tabIndex = _ref.tabIndex,
-      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
-
+    _ref$name = _ref.name,
+    name = _ref$name === void 0 ? "" : _ref$name,
+    value = _ref.value,
+    helperText = _ref.helperText,
+    _ref$clearable = _ref.clearable,
+    clearable = _ref$clearable === void 0 ? false : _ref$clearable,
+    onChange = _ref.onChange,
+    onBlur = _ref.onBlur,
+    error = _ref.error,
+    pattern = _ref.pattern,
+    minLength = _ref.minLength,
+    maxLength = _ref.maxLength,
+    _ref$autocomplete = _ref.autocomplete,
+    autocomplete = _ref$autocomplete === void 0 ? "off" : _ref$autocomplete,
+    margin = _ref.margin,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "medium" : _ref$size,
+    _ref$tabIndex = _ref.tabIndex,
+    tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
   var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      isPasswordVisible = _useState2[0],
-      setIsPasswordVisible = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    isPasswordVisible = _useState2[0],
+    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[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[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[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[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 ? translatedLabels.passwordInput.inputHidePasswordTitle : translatedLabels.passwordInput.inputShowPasswordTitle;
-  };
-
+  var _useTranslatedLabels = (0, _useTranslatedLabels2["default"])(),
+    passwordInput = _useTranslatedLabels.passwordInput;
   (0, _react.useEffect)(function () {
-    setAriaAttributes(false, translatedLabels.passwordInput.inputShowPasswordTitle);
-
-    if (isPasswordVisible) {
-      setInputType("text");
-      setAriaAttributes(true, translatedLabels.passwordInput.inputHidePasswordTitle);
-    } else {
-      setInputType("password");
-      setAriaAttributes(false, translatedLabels.passwordInput.inputShowPasswordTitle);
-    }
-  }, [isPasswordVisible]);
-
-  var viewPassword = function viewPassword() {
-    setInputType("text");
-    setIsPasswordVisible(true);
-  };
-
-  var hidePassword = function hidePassword() {
-    setInputType("password");
-    setIsPasswordVisible(false);
-  };
-
-  var action = {
-    onClick: isPasswordVisible ? hidePassword : viewPassword,
-    icon: isPasswordVisible ? /*#__PURE__*/_react["default"].createElement("svg", {
-      xmlns: "http://www.w3.org/2000/svg",
-      height: "24px",
-      viewBox: "0 0 24 24",
-      width: "24px",
-      fill: "currentColor"
-    }, /*#__PURE__*/_react["default"].createElement("path", {
-      d: "M0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0zm0 0h24v24H0V0z",
-      fill: "none"
-    }), /*#__PURE__*/_react["default"].createElement("path", {
-      d: "M12 6c3.79 0 7.17 2.13 8.82 5.5-.59 1.22-1.42 2.27-2.41 3.12l1.41 1.41c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l1.65 1.65C10.66 6.09 11.32 6 12 6zm-1.07 1.14L13 9.21c.57.25 1.03.71 1.28 1.28l2.07 2.07c.08-.34.14-.7.14-1.07C16.5 9.01 14.48 7 12 7c-.37 0-.72.05-1.07.14zM2.01 3.87l2.68 2.68C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.98-.29 4.32-.82l3.42 3.42 1.41-1.41L3.42 2.45 2.01 3.87zm7.5 7.5l2.61 2.61c-.04.01-.08.02-.12.02-1.38 0-2.5-1.12-2.5-2.5 0-.05.01-.08.01-.13zm-3.4-3.4l1.75 1.75c-.23.55-.36 1.15-.36 1.78 0 2.48 2.02 4.5 4.5 4.5.63 0 1.23-.13 1.77-.36l.98.98c-.88.24-1.8.38-2.75.38-3.79 0-7.17-2.13-8.82-5.5.7-1.43 1.72-2.61 2.93-3.53z"
-    })) : /*#__PURE__*/_react["default"].createElement("svg", {
-      xmlns: "http://www.w3.org/2000/svg",
-      height: "24px",
-      viewBox: "0 0 24 24",
-      width: "24px",
-      fill: "currentColor"
-    }, /*#__PURE__*/_react["default"].createElement("path", {
-      d: "M0 0h24v24H0V0z",
-      fill: "none"
-    }), /*#__PURE__*/_react["default"].createElement("path", {
-      d: "M12 6c3.79 0 7.17 2.13 8.82 5.5C19.17 14.87 15.79 17 12 17s-7.17-2.13-8.82-5.5C4.83 8.13 8.21 6 12 6m0-2C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 5c1.38 0 2.5 1.12 2.5 2.5S13.38 14 12 14s-2.5-1.12-2.5-2.5S10.62 9 12 9m0-2c-2.48 0-4.5 2.02-4.5 4.5S9.52 16 12 16s4.5-2.02 4.5-4.5S14.48 7 12 7z"
-    })),
-    title: getIconTitle()
-  };
+    (function () {
+      if (isPasswordVisible) {
+        setInputType("text", inputRef.current);
+        setAriaAttributes("true", passwordInput.inputHidePasswordTitle, inputRef.current);
+      } else {
+        setInputType("password", inputRef.current);
+        setAriaAttributes("false", passwordInput.inputShowPasswordTitle, inputRef.current);
+      }
+    })();
+  }, [isPasswordVisible, passwordInput]);
   return /*#__PURE__*/_react["default"].createElement(PasswordInput, {
-    ref: ref
+    ref: ref,
+    role: "group"
   }, /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
-    ref: inputRef,
     label: label,
     name: name,
     value: value,
     helperText: helperText,
-    action: action,
+    action: {
+      onClick: function onClick() {
+        setIsPasswordVisible(function (isPasswordVisible) {
+          return !isPasswordVisible;
+        });
+      },
+      icon: isPasswordVisible ? 'Visibility_Off' : 'Visibility',
+      title: isPasswordVisible ? passwordInput.inputHidePasswordTitle : passwordInput.inputShowPasswordTitle
+    },
     error: error,
     clearable: clearable,
     onChange: onChange,
@@ -156,11 +89,9 @@ var DxcPasswordInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
     minLength: minLength,
     maxLength: maxLength,
     autocomplete: autocomplete,
+    ref: inputRef,
     tabIndex: tabIndex
   }));
 });
-
 var PasswordInput = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  & ::-ms-reveal {\n    display: none;\n  }\n"])));
-
-var _default = DxcPasswordInput;
-exports["default"] = _default;
+var _default = exports["default"] = DxcPasswordInput;

package/password-input/PasswordInput.stories.tsx

@@ -1,13 +1,11 @@
 import React from "react";
 import { userEvent, within } from "@storybook/testing-library";
 import DxcPasswordInput from "./PasswordInput";
-import { BackgroundColorProvider } from "../BackgroundColorContext";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
-import DarkContainer from "../../.storybook/components/DarkSection";
 
 export default {
-  title: "Password input",
+  title: "Password Input",
   component: DxcPasswordInput,
 };
 
@@ -37,19 +35,6 @@ export const Chromatic = () => (
       <Title title="Invalid" theme="light" level={4} />
       <DxcPasswordInput label="Error password input" error="Error message." />
     </ExampleContainer>
-    <BackgroundColorProvider color="#333333">
-      <DarkContainer>
-        <Title title="Dark" theme="dark" level={2} />
-        <ExampleContainer>
-          <Title title="With label, helper text and value" theme="dark" level={4} />
-          <DxcPasswordInput label="Password input" helperText="Help message" value="Password" />
-        </ExampleContainer>
-        <ExampleContainer>
-          <Title title="With label, helper text, value and error" theme="dark" level={4} />
-          <DxcPasswordInput label="Password input" helperText="Help message" error="Error message." value="Password" />
-        </ExampleContainer>
-      </DarkContainer>
-    </BackgroundColorProvider>
     <Title title="Margins" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Xxsmall margin" theme="light" level={4} />
@@ -105,16 +90,6 @@ const Password = () => (
     <DxcPasswordInput label="Password input" value="Password" />
   </ExampleContainer>
 );
-const PasswordDark = () => (
-  <BackgroundColorProvider color="#333333">
-    <DarkContainer>
-      <ExampleContainer expanded>
-        <Title title="Show password" theme="dark" level={4} />
-        <DxcPasswordInput label="Password input" value="Password" />
-      </ExampleContainer>
-    </DarkContainer>
-  </BackgroundColorProvider>
-);
 
 export const ShowPassword = Password.bind({});
 ShowPassword.play = async ({ canvasElement }) => {
@@ -122,10 +97,3 @@ ShowPassword.play = async ({ canvasElement }) => {
   const passwordBtn = canvas.getByRole("button");
   await userEvent.click(passwordBtn);
 };
-
-export const ShowPasswordDark = PasswordDark.bind({});
-ShowPasswordDark.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const passwordBtn = canvas.getByRole("button");
-  await userEvent.click(passwordBtn);
-};