passbolt-styleguide 3.6.2 → 3.7.0-alpha1

package/src/react-web-integration/lib/InForm/InformManager.test.js

@@ -19,19 +19,19 @@
 import {
   domElementLoginOnlyPasswordWithSubmitButton,
   domElementLoginWithAutocompleteAttributeEmail,
-  domElementLoginWithAutocompleteAttributeUsername,
+  domElementLoginWithAutocompleteAttributeUsername, domElementLoginWithClassCreateAccount,
   domElementLoginWithClassEmail,
-  domElementLoginWithClassUsername,
+  domElementLoginWithClassUsername, domElementLoginWithIdAttributeBenutzerkennung,
   domElementLoginWithIdAttributeEmail, domElementLoginWithIdAttributeLogin,
-  domElementLoginWithIdAttributeUsername,
+  domElementLoginWithIdAttributeUsername, domElementLoginWithNameAttributeBenutzerkennung,
   domElementLoginWithNameAttributeEmail, domElementLoginWithNameAttributeLogin,
   domElementLoginWithNameAttributeUsername,
   domElementLoginWithNoTypeAndAutocompleteAttributeEmail,
-  domElementLoginWithNoTypeAndAutocompleteAttributeUsername,
+  domElementLoginWithNoTypeAndAutocompleteAttributeUsername, domElementLoginWithNoTypeAndClassCreateAccount,
   domElementLoginWithNoTypeAndClassEmail,
-  domElementLoginWithNoTypeAndClassUsername,
+  domElementLoginWithNoTypeAndClassUsername, domElementLoginWithNoTypeAndIdAttributeBenutzerkennung,
   domElementLoginWithNoTypeAndIdAttributeEmail, domElementLoginWithNoTypeAndIdAttributeLogin,
-  domElementLoginWithNoTypeAndIdAttributeUsername,
+  domElementLoginWithNoTypeAndIdAttributeUsername, domElementLoginWithNoTypeAndNameAttributeBenutzerkennung,
   domElementLoginWithNoTypeAndNameAttributeEmail, domElementLoginWithNoTypeAndNameAttributeLogin,
   domElementLoginWithNoTypeAndNameAttributeUsername, domElementLoginWithNoTypeAndPlaceHolderAttributeE_mail,
   domElementLoginWithNoTypeAndPlaceHolderAttributeEmail,
@@ -46,6 +46,7 @@ import {
 } from "./InformManager.test.data";
 import InformManagerPage from "./InformManager.test.page";
 import InFormManager from "./InFormManager";
+import DomUtils from "../Dom/DomUtils";
 
 beforeEach(() => {
   jest.resetModules();
@@ -119,6 +120,26 @@ describe("InformManager", () => {
     expect(informManager.iframesLength).toBe(2);
   });
 
+  it("As LU I should see the inform call to action on form with name attribute benutzerkennung", async() => {
+    // Set up document body
+    // eslint-disable-next-line no-unsanitized/property
+    document.body.innerHTML = domElementLoginWithNameAttributeBenutzerkennung; // The Dom
+    const informManager = new InformManagerPage();
+    expect(informManager.iframesLength).toBe(0);
+    await informManager.focusOnUsername();
+    expect(informManager.iframesLength).toBe(1);
+    await informManager.mouseOverOnPassword();
+    expect(informManager.iframesLength).toBe(2);
+    await informManager.blurOnUsername();
+    expect(informManager.iframesLength).toBe(1);
+    await informManager.blurOnPassword();
+    expect(informManager.iframesLength).toBe(0);
+    await informManager.focusOnPassword();
+    expect(informManager.iframesLength).toBe(1);
+    await informManager.mouseOverOnUsername();
+    expect(informManager.iframesLength).toBe(2);
+  });
+
   it("As LU I should see the inform call to action on form with no type and name attribute username", async() => {
     // Set up document body
     // eslint-disable-next-line no-unsanitized/property
@@ -179,6 +200,26 @@ describe("InformManager", () => {
     expect(informManager.iframesLength).toBe(2);
   });
 
+  it("As LU I should see the inform call to action on form with no type name attribute benutzerkennung", async() => {
+    // Set up document body
+    // eslint-disable-next-line no-unsanitized/property
+    document.body.innerHTML = domElementLoginWithNoTypeAndNameAttributeBenutzerkennung; // The Dom
+    const informManager = new InformManagerPage();
+    expect(informManager.iframesLength).toBe(0);
+    await informManager.focusOnUsername();
+    expect(informManager.iframesLength).toBe(1);
+    await informManager.mouseOverOnPassword();
+    expect(informManager.iframesLength).toBe(2);
+    await informManager.blurOnUsername();
+    expect(informManager.iframesLength).toBe(1);
+    await informManager.blurOnPassword();
+    expect(informManager.iframesLength).toBe(0);
+    await informManager.focusOnPassword();
+    expect(informManager.iframesLength).toBe(1);
+    await informManager.mouseOverOnUsername();
+    expect(informManager.iframesLength).toBe(2);
+  });
+
   it("As LU I should see the inform call to action on form with id attribute username", async() => {
     // Set up document body
     // eslint-disable-next-line no-unsanitized/property
@@ -239,6 +280,26 @@ describe("InformManager", () => {
     expect(informManager.iframesLength).toBe(2);
   });
 
+  it("As LU I should see the inform call to action on form with id attribute benutzerkennung", async() => {
+    // Set up document body
+    // eslint-disable-next-line no-unsanitized/property
+    document.body.innerHTML = domElementLoginWithIdAttributeBenutzerkennung; // The Dom
+    const informManager = new InformManagerPage();
+    expect(informManager.iframesLength).toBe(0);
+    await informManager.focusOnUsername();
+    expect(informManager.iframesLength).toBe(1);
+    await informManager.mouseOverOnPassword();
+    expect(informManager.iframesLength).toBe(2);
+    await informManager.blurOnUsername();
+    expect(informManager.iframesLength).toBe(1);
+    await informManager.blurOnPassword();
+    expect(informManager.iframesLength).toBe(0);
+    await informManager.focusOnPassword();
+    expect(informManager.iframesLength).toBe(1);
+    await informManager.mouseOverOnUsername();
+    expect(informManager.iframesLength).toBe(2);
+  });
+
   it("As LU I should see the inform call to action on form with no type and id attribute username", async() => {
     // Set up document body
     // eslint-disable-next-line no-unsanitized/property
@@ -299,6 +360,26 @@ describe("InformManager", () => {
     expect(informManager.iframesLength).toBe(2);
   });
 
+  it("As LU I should see the inform call to action on form with no type and id attribute benutzerkennung", async() => {
+    // Set up document body
+    // eslint-disable-next-line no-unsanitized/property
+    document.body.innerHTML = domElementLoginWithNoTypeAndIdAttributeBenutzerkennung; // The Dom
+    const informManager = new InformManagerPage();
+    expect(informManager.iframesLength).toBe(0);
+    await informManager.focusOnUsername();
+    expect(informManager.iframesLength).toBe(1);
+    await informManager.mouseOverOnPassword();
+    expect(informManager.iframesLength).toBe(2);
+    await informManager.blurOnUsername();
+    expect(informManager.iframesLength).toBe(1);
+    await informManager.blurOnPassword();
+    expect(informManager.iframesLength).toBe(0);
+    await informManager.focusOnPassword();
+    expect(informManager.iframesLength).toBe(1);
+    await informManager.mouseOverOnUsername();
+    expect(informManager.iframesLength).toBe(2);
+  });
+
   it("As LU I should see the inform call to action on form with autocomplete attribute username", async() => {
     // Set up document body
     // eslint-disable-next-line no-unsanitized/property
@@ -539,6 +620,26 @@ describe("InformManager", () => {
     expect(informManager.iframesLength).toBe(2);
   });
 
+  it("As LU I should see the inform call to action on form with class create-account-input", async() => {
+    // Set up document body
+    // eslint-disable-next-line no-unsanitized/property
+    document.body.innerHTML = domElementLoginWithClassCreateAccount; // The Dom
+    const informManager = new InformManagerPage();
+    expect(informManager.iframesLength).toBe(0);
+    await informManager.focusOnUsername();
+    expect(informManager.iframesLength).toBe(1);
+    await informManager.mouseOverOnPassword();
+    expect(informManager.iframesLength).toBe(2);
+    await informManager.blurOnUsername();
+    expect(informManager.iframesLength).toBe(1);
+    await informManager.blurOnPassword();
+    expect(informManager.iframesLength).toBe(0);
+    await informManager.focusOnPassword();
+    expect(informManager.iframesLength).toBe(1);
+    await informManager.mouseOverOnUsername();
+    expect(informManager.iframesLength).toBe(2);
+  });
+
   it("As LU I should see the inform call to action on form with no type and class username", async() => {
     // Set up document body
     // eslint-disable-next-line no-unsanitized/property
@@ -579,6 +680,26 @@ describe("InformManager", () => {
     expect(informManager.iframesLength).toBe(2);
   });
 
+  it("As LU I should see the inform call to action on form with no type class create-account-input", async() => {
+    // Set up document body
+    // eslint-disable-next-line no-unsanitized/property
+    document.body.innerHTML = domElementLoginWithNoTypeAndClassCreateAccount; // The Dom
+    const informManager = new InformManagerPage();
+    expect(informManager.iframesLength).toBe(0);
+    await informManager.focusOnUsername();
+    expect(informManager.iframesLength).toBe(1);
+    await informManager.mouseOverOnPassword();
+    expect(informManager.iframesLength).toBe(2);
+    await informManager.blurOnUsername();
+    expect(informManager.iframesLength).toBe(1);
+    await informManager.blurOnPassword();
+    expect(informManager.iframesLength).toBe(0);
+    await informManager.focusOnPassword();
+    expect(informManager.iframesLength).toBe(1);
+    await informManager.mouseOverOnUsername();
+    expect(informManager.iframesLength).toBe(2);
+  });
+
   it("As LU I should see the inform call to action when I clicked on it and autofill fields", async() => {
     // Set up document body
     // eslint-disable-next-line no-unsanitized/property
@@ -702,5 +823,29 @@ describe("InformManager", () => {
     await informManager.focusOnSearch();
     expect(informManager.iframesLength).toBe(0);
   });
+
+  it("As LU I should see the inform call to action in iframe", async() => {
+    jest.spyOn(DomUtils, "isRequestInitiatedFromSameOrigin").mockImplementation(() => true);
+    // Set up document body
+    const iframe = document.createElement('iframe');
+    iframe.srcdoc = domElementLoginWithIdAttributeLogin;
+    document.body.appendChild(iframe);
+    // eslint-disable-next-line no-unsanitized/property
+    iframe.contentDocument.body.innerHTML = domElementLoginWithIdAttributeLogin;
+    const informManager = new InformManagerPage();
+    expect(informManager.iframesLength).toBe(1);
+    await informManager.focusOnUsernameIframe();
+    expect(informManager.iframesLength).toBe(2);
+    await informManager.clickOnInformCallToAction();
+    expect(informManager.iframesLength).toBe(2);
+    await informManager.blurOnUsernameIframe();
+    expect(informManager.iframesLength).toBe(1);
+    await informManager.focusOnPasswordIframe();
+    expect(informManager.iframesLength).toBe(2);
+    await informManager.clickOnInformCallToAction(2);
+    expect(informManager.iframesLength).toBe(2);
+    await informManager.blurOnPasswordIframe();
+    expect(informManager.iframesLength).toBe(1);
+  });
 });
 

package/src/react-web-integration/lib/InForm/InformManager.test.page.js

@@ -39,6 +39,14 @@ export default class InformManagerPage {
     return document.querySelector(InFormFieldSelector.USERNAME_FIELD_SELECTOR);
   }
 
+  /**
+   * Returns the username in iframe element
+   */
+  get usernameIframe() {
+    return document.querySelector('iframe').contentDocument.querySelector(InFormFieldSelector.USERNAME_FIELD_SELECTOR);
+  }
+
+
   /**
    * Returns the usernames element
    */
@@ -53,6 +61,13 @@ export default class InformManagerPage {
     return document.querySelector(InFormFieldSelector.PASSWORD_FIELD_SELECTOR);
   }
 
+  /**
+   * Returns the password in iframe element
+   */
+  get passwordIframe() {
+    return document.querySelector('iframe').contentDocument.querySelector(InFormFieldSelector.PASSWORD_FIELD_SELECTOR);
+  }
+
   /**
    * Returns the passwords element
    */
@@ -94,24 +109,48 @@ export default class InformManagerPage {
     await waitFor(() => {});
   }
 
+  /** Blur on the username iframe element */
+  async blurOnUsernameIframe()  {
+    fireEvent.blur(this.usernameIframe);
+    await waitFor(() => {});
+  }
+
   /** Blur on the password element */
   async blurOnPassword()  {
     fireEvent.blur(this.password);
     await waitFor(() => {});
   }
 
+  /** Blur on the password iframe element */
+  async blurOnPasswordIframe()  {
+    fireEvent.blur(this.passwordIframe);
+    await waitFor(() => {});
+  }
+
   /** Focus on the username element */
   async focusOnUsername()  {
     fireEvent.focus(this.username);
     await waitFor(() => {});
   }
 
+  /** Focus on the username iframe element */
+  async focusOnUsernameIframe()  {
+    fireEvent.focus(this.usernameIframe);
+    await waitFor(() => {});
+  }
+
   /** Focus on the password element */
   async focusOnPassword()  {
     fireEvent.focus(this.password);
     await waitFor(() => {});
   }
 
+  /** Focus on the password iframe element */
+  async focusOnPasswordIframe()  {
+    fireEvent.focus(this.passwordIframe);
+    await waitFor(() => {});
+  }
+
   /** Focus on the search element */
   async focusOnSearch()  {
     fireEvent.focus(this.search);

package/src/shared/components/Icons/Icon.test.stories.js

@@ -5,7 +5,7 @@ import "../../../css/themes/default/api_main.css";
 
 
 export default {
-  title: 'Passbolt/Shared/Icon'
+  title: 'Foundations/Icon'
 };
 
 const iconsNames = [

package/src/shared/components/Password/Password.js

@@ -14,6 +14,7 @@
 import React, {Component} from "react";
 import PropTypes from "prop-types";
 import Icon from "../Icons/Icon";
+import {Trans} from "react-i18next";
 
 /**
  * This component represent a password input field with some additional properties
@@ -135,7 +136,7 @@ class Password extends Component {
               {this.state.viewPassword &&
                 <Icon name='eye-close'/>
               }
-              <span className="visually-hidden">view</span>
+              <span className="visually-hidden"><Trans>View</Trans></span>
             </a>
           </div>
         }

package/src/shared/components/Password/Password.test.page.js

@@ -14,6 +14,7 @@
  */
 import {fireEvent, render, waitFor} from "@testing-library/react";
 import React from "react";
+import MockTranslationProvider from "../../../react-extension/test/mock/components/Internationalisation/MockTranslationProvider";
 import Password from "./Password";
 
 /**
@@ -26,7 +27,9 @@ export default class PasswordPage {
    */
   constructor(props) {
     this._page = render(
-      <Password {...props}/>
+      <MockTranslationProvider>
+        <Password {...props}/>
+      </MockTranslationProvider>
     );
   }
 

package/src/shared/components/Password/Password.test.stories.js

@@ -16,7 +16,7 @@ import Password from "./Password";
 import {defaultProps} from "./Password.test.data";
 
 export default {
-  title: 'Passbolt/Shared/Password',
+  title: 'Foundations/Password',
   component: "Password"
 };
 

package/src/shared/components/PasswordComplexity/PasswordComplexity.js

@@ -13,7 +13,7 @@
  */
 import React, {Component} from "react";
 import PropTypes from "prop-types";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 import {SecretGeneratorComplexity} from "../../lib/SecretGenerator/SecretGeneratorComplexity";
 
 /**
@@ -145,4 +145,4 @@ PasswordComplexity.propTypes = {
   error: PropTypes.bool, // The error
 };
 
-export default withTranslation('common')(PasswordComplexity);
+export default PasswordComplexity;

package/src/shared/components/PasswordComplexity/PasswordComplexity.test.stories.js

@@ -15,7 +15,7 @@ import React from "react";
 import PasswordComplexity from "./PasswordComplexity";
 
 export default {
-  title: 'Passbolt/Shared/PasswordComplexity',
+  title: 'Foundations/PasswordComplexity',
   component: "PasswordComplexity"
 };
 
@@ -26,16 +26,16 @@ const Template = () =>
       <PasswordComplexity/>
     </div>
     <div style={{width: "49%", marginRight: "1%"}}>
-      <PasswordComplexity entropy={0}/>
+      <PasswordComplexity error={true}/>
     </div>
     <div style={{width: "49%", marginRight: "1%"}}>
-      <PasswordComplexity entropy={0} error={true}/>
+      <PasswordComplexity entropy={29.9}/>
     </div>
     <div style={{width: "49%", marginRight: "1%"}}>
-      <PasswordComplexity entropy={29.9}/>
+      <PasswordComplexity entropy={65.9} error={true}/>
     </div>
     <div style={{width: "49%", marginRight: "1%"}}>
-      <PasswordComplexity entropy={49.9} error={true}/>
+      <PasswordComplexity entropy={87.9} error={true}/>
     </div>
     <div style={{width: "49%", marginRight: "1%"}}>
       <PasswordComplexity entropy={117.98}/>

package/src/stories/assets/intro/intro.css

@@ -0,0 +1,47 @@
+.sbdocs-content {
+    width: 100%;
+    max-width: none;
+    padding: 0;
+    margin: 0;
+    border: 0;
+}
+.storybook-intro-hero {
+    height: 90vh;
+    width: 98vw;
+    display: flex;
+    position: relative;
+    align-items: center;
+    padding: 0 12% 0 14%;
+    box-sizing: border-box;
+}
+.storybook-intro-hero .storybook-intro-hero-left {
+    width: 45%;
+    display: flex;
+    flex-direction: column;
+}
+
+.storybook-intro-hero .storybook-intro-hero-left .storybook-intro-hero-subtitle {
+    font-size: 3rem;
+    line-height: 3.6rem;
+    max-width: 80%;
+    padding: 1.6rem 0 5.2rem 0;
+    color: #000000;
+}
+
+.storybook-intro-hero .storybook-intro-hero-left img {
+    width: 35rem;
+}
+.storybook-intro-hero .storybook-intro-hero-left .storybook-intro-hero-actions {
+    display: flex;
+}
+.storybook-intro-hero .storybook-intro-hero-left .storybook-intro-hero-actions a {
+    margin-right: 1.6rem;
+}
+.storybook-intro-hero .storybook-intro-hero-right  {
+    width: 55%;
+    align-items: center;
+    justify-content: center;
+}
+.storybook-intro-hero .storybook-intro-hero-right img {
+    width: 95%;
+}

package/test/jest.setup.js

@@ -7,6 +7,8 @@ global.console = {
   warning: jest.fn()
 };
 
+global.scrollTo = jest.fn();
+
 /*
  * Fix jest-webextension-mock after upgrading webextension-polyfill to 0.9.0
  * @see https://github.com/clarkbw/jest-webextension-mock/issues/149#issuecomment-1116558554