password tooltip design updated

VAN-340

src/_style.scss

@@ -311,6 +311,38 @@ select.form-control {
 .pt-10 {
   padding-top: 10px;
 }
+.tooltip-shadow {
+  box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.3) !important;
+}
+#password-requirement-left {
+  .tooltip-inner {
+    @extend .tooltip-shadow;
+    background: white;
+    display: block;
+    color: #707070;
+  }
+  .arrow::before {
+    border-left-color: #fff;
+    @extend .tooltip-shadow;
+  }
+    
+}
+
+#password-requirement-top {
+  .tooltip-inner {
+    background: white;
+    max-width: 465px;
+    width: 465px;
+    display: block;
+    @extend .tooltip-shadow;
+    color: #707070;
+  }
+  .arrow::before {
+    border-top-color: #fff;
+    @extend .tooltip-shadow;
+  }
+    
+}
 
 @media (min-width: 1024px) {
   .mw-500 {

src/common-components/PasswordField.jsx

@@ -29,9 +29,9 @@ const PasswordField = (props) => {
   const ShowButton = (
     <IconButton icon={faEye} onClick={setHiddenFalse} alt={formatMessage(messages['show.password'])} aria-label={formatMessage(messages['show.password'])} />
   );
-
+  const placement = window.innerWidth < 768 ? 'top' : 'left';
   const tooltip = (
-    <Tooltip id="password-requirement">
+    <Tooltip id={`password-requirement-${placement}`}>
       <span id="letter-check" className="d-flex position-relative align-content-start">
         {LETTER_REGEX.test(props.value) ? <Icon className="text-success mr-1" src={Check} /> : <Icon className="mr-1" src={Remove} />}
         {formatMessage(messages['one.letter'])}
@@ -46,12 +46,11 @@ const PasswordField = (props) => {
       </span>
     </Tooltip>
   );
-
   return (
-    <OverlayTrigger key="tooltip" placement="left" overlay={tooltip} show={showTooltip}>
+    <OverlayTrigger key="tooltip" placement={placement} overlay={tooltip} show={showTooltip}>
       <FormGroup
         {...props}
-        handleFocus={() => setShowTooltip(props.showRequirements && true)}
+        handleFocus={() => setTimeout(() => setShowTooltip(props.showRequirements && true), 150)}
         handleBlur={handleBlur}
         type={isPasswordHidden ? 'password' : 'text'}
         trailingElement={isPasswordHidden ? ShowButton : HideButton}

src/common-components/tests/FormField.test.jsx

@@ -48,10 +48,14 @@ describe('PasswordField', () => {
 
   it('should show password requirement tooltip on focus', async () => {
     const passwordField = mount(<IntlProvider locale="en"><IntlPasswordField {...props} /></IntlProvider>);
-    await act(async () => { passwordField.find('input').simulate('focus'); });
+    jest.useFakeTimers();
+    await act(async () => {
+      passwordField.find('input').simulate('focus');
+      jest.runAllTimers();
+    });
     passwordField.update();
 
-    expect(passwordField.find('#password-requirement').exists()).toBeTruthy();
+    expect(passwordField.find('#password-requirement-left').exists()).toBeTruthy();
   });
 
   it('should show all password requirement checks as failed', async () => {
@@ -60,8 +64,12 @@ describe('PasswordField', () => {
       value: '',
     };
 
+    jest.useFakeTimers();
     const passwordField = mount(<IntlProvider locale="en"><IntlPasswordField {...props} /></IntlProvider>);
-    await act(async () => { passwordField.find('input').simulate('focus'); });
+    await act(async () => {
+      passwordField.find('input').simulate('focus');
+      jest.runAllTimers();
+    });
     passwordField.update();
 
     expect(passwordField.find('#letter-check span').prop('className')).toEqual('pgn__icon mr-1');
@@ -71,9 +79,10 @@ describe('PasswordField', () => {
 
   it('should update password requirement checks', async () => {
     const passwordField = mount(<IntlProvider locale="en"><IntlPasswordField {...props} /></IntlProvider>);
-
+    jest.useFakeTimers();
     await act(async () => {
       passwordField.find('input').simulate('focus');
+      jest.runAllTimers();
     });
     passwordField.update();