passbolt-styleguide 3.6.2 → 3.7.0-alpha1

package/src/react-extension/components/Authentication/IntroduceExtension/IntroduceExtension.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 {detectBrowserName} from "../../../../shared/lib/Browser/detectBrowserName";
 
 class IntroduceExtension extends Component {
@@ -93,4 +93,4 @@ class IntroduceExtension extends Component {
 IntroduceExtension.propTypes = {
   onComplete: PropTypes.func.isRequired, // The callback to trigger when the user complete the step.
 };
-export default withTranslation('common')(IntroduceExtension);
+export default IntroduceExtension;

package/src/react-extension/components/Authentication/IntroduceExtension/IntroduceExtension.test.stories.js

@@ -17,7 +17,7 @@ import {MemoryRouter, Route} from "react-router-dom";
 import IntroduceExtension from "./IntroduceExtension";
 
 export default {
-  title: 'Passbolt/Authentication/IntroduceExtension',
+  title: 'Passbolt Component/Authentication/IntroduceExtension',
   component: IntroduceExtension
 };
 

package/src/react-extension/components/Authentication/NotifyExpiredSession/NotifyExpiredSession.js

@@ -63,18 +63,10 @@ class NotifyExpiredSession extends Component {
     return `${baseUrl}/auth/login`;
   }
 
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   render() {
     return (
       <DialogWrapper
-        title={this.translate("Session Expired")}
+        title={this.props.t("Session Expired")}
         onClose={this.handleCloseClick}
         className="session-expired-dialog">
         <div className="form-content">

package/src/react-extension/components/Authentication/NotifyExpiredSession/NotifyExpiredSession.test.stories.js

@@ -18,7 +18,7 @@ import NotifyExpiredSession from "./NotifyExpiredSession";
 import {defaultProps} from "./NotifyExpiredSession.test.data";
 
 export default {
-  title: 'Passbolt/Authentication/NotifyExpiredSession',
+  title: 'Passbolt Component/Authentication/NotifyExpiredSession',
   component: NotifyExpiredSession
 };
 

package/src/react-extension/components/Authentication/RequestAccountRecovery/RequestAccountRecovery.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";
 
 /**
  * The component display variations.
@@ -67,4 +67,4 @@ RequestAccountRecovery.propTypes = {
   onPrimaryActionClick: PropTypes.func.isRequired, // The callback to trigger clicks on the primary action
   onSecondaryActionClick: PropTypes.func.isRequired, // The callback to trigger clicks on the secondary action
 };
-export default withTranslation('common')(RequestAccountRecovery);
+export default RequestAccountRecovery;

package/src/react-extension/components/Authentication/RequestAccountRecovery/RequestAccountRecovery.test.stories.js

@@ -19,7 +19,7 @@ import RequestAccountRecovery from "./RequestAccountRecovery";
 import {defaultProps} from "./RequestAccountRecovery.test.data";
 
 export default {
-  title: 'Passbolt/Authentication/InitiateRecoverAccount',
+  title: 'Passbolt Component/Authentication/InitiateRecoverAccount',
   component: RequestAccountRecovery
 };
 
@@ -36,5 +36,10 @@ const Template = args =>
     </div>
   </MockTranslationProvider>;
 
+const defaultParameters = {
+  css: "ext_authentication"
+};
+
 export const Initial = Template.bind({});
 Initial.args = defaultProps();
+Initial.parameters = defaultParameters;

package/src/react-extension/components/AuthenticationAccountRecovery/DisplayExpiredTokenError/DisplayExpiredTokenError.js

@@ -15,7 +15,7 @@
 import React, {Component} from "react";
 import {withAppContext} from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 
 class DisplayExpiredTokenError extends Component {
   /**
@@ -43,4 +43,4 @@ class DisplayExpiredTokenError extends Component {
 DisplayExpiredTokenError.propTypes = {
   context: PropTypes.any, // The application context
 };
-export default withAppContext(withTranslation('common')(DisplayExpiredTokenError));
+export default withAppContext(DisplayExpiredTokenError);

package/src/react-extension/components/AuthenticationAccountRecovery/DisplayExpiredTokenError/DisplayExpiredTokenError.test.stories.js

@@ -18,7 +18,7 @@ import DisplayExpiredTokenError from "./DisplayExpiredTokenError";
 import {defaultProps} from "./DisplayExpiredTokenError.test.data";
 
 export default {
-  title: 'Passbolt/AuthenticationAccountRecovery/DisplayExpiredTokenError',
+  title: 'Passbolt Component/AuthenticationAccountRecovery/DisplayExpiredTokenError',
   component: DisplayExpiredTokenError
 };
 

package/src/react-extension/components/AuthenticationAccountRecovery/DisplayRestartFromScratchError/DisplayRestartFromScratchError.js

@@ -15,7 +15,7 @@
 import React, {Component} from "react";
 import {withAppContext} from "../../../contexts/AppContext";
 import PropTypes from "prop-types";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 
 class DisplayRestartFromScratchError extends Component {
   /**
@@ -44,4 +44,4 @@ class DisplayRestartFromScratchError extends Component {
 DisplayRestartFromScratchError.propTypes = {
   context: PropTypes.any, // The application context
 };
-export default withAppContext(withTranslation('common')(DisplayRestartFromScratchError));
+export default withAppContext(DisplayRestartFromScratchError);

package/src/react-extension/components/AuthenticationAccountRecovery/DisplayRestartFromScratchError/DisplayRestartFromScratchError.test.stories.js

@@ -18,7 +18,7 @@ import DisplayRequireInvitationError from "./DisplayRestartFromScratchError";
 import DisplayRestartFromScratchError from "./DisplayRestartFromScratchError";
 
 export default {
-  title: 'Passbolt/AuthenticationAccountRecovery/DisplayRestartFromScratchError',
+  title: 'Passbolt Component/AuthenticationAccountRecovery/DisplayRestartFromScratchError',
   component: DisplayRequireInvitationError
 };
 

package/src/react-extension/components/AuthenticationAccountRecovery/OrchestrateAccountRecovery/OrchestrateAccountRecovery.js

@@ -14,7 +14,7 @@
 
 import React, {Component} from "react";
 import PropTypes from "prop-types";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 import {withAppContext} from "../../../contexts/AppContext";
 import {
   AuthenticationAccountRecoveryWorkflowStates,
@@ -81,4 +81,4 @@ OrchestrateAccountRecovery.propTypes = {
   authenticationAccountRecoveryContext: PropTypes.any.isRequired, // The authentication account recovery context
 };
 
-export default withAppContext(withAuthenticationAccountRecoveryContext(withTranslation('common')(OrchestrateAccountRecovery)));
+export default withAppContext(withAuthenticationAccountRecoveryContext(OrchestrateAccountRecovery));

package/src/react-extension/components/AuthenticationLogin/AcceptLoginServerKeyChange/AcceptLoginServerKeyChange.js

@@ -12,7 +12,7 @@
  * @since         3.0.0
  */
 import React, {Component} from "react";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 import PropTypes from "prop-types";
 
 /**
@@ -181,4 +181,4 @@ AcceptLoginServerKeyChange.propTypes = {
   onAccept: PropTypes.func.isRequired, // Callback to trigger when the user accepts the new key
 };
 
-export default withTranslation('common')(AcceptLoginServerKeyChange);
+export default AcceptLoginServerKeyChange;

package/src/react-extension/components/AuthenticationLogin/AcceptLoginServerKeyChange/AcceptLoginServerKeyChange.test.stories.js

@@ -18,7 +18,7 @@ import AcceptLoginServerKeyChange from "./AcceptLoginServerKeyChange";
 import {defaultProps} from "./AcceptLoginServerKeyChange.test.data";
 
 export default {
-  title: 'Passbolt/AuthenticationLogin/AcceptLoginServerKeyChange',
+  title: 'Passbolt Component/AuthenticationLogin/AcceptLoginServerKeyChange',
   component: AcceptLoginServerKeyChange
 };
 

package/src/react-extension/components/AuthenticationLogin/Login/Login.js

@@ -255,14 +255,6 @@ class Login extends Component {
     await this.setState({actions: {processing: true}});
   }
 
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render the component
    */
@@ -288,7 +280,7 @@ class Login extends Component {
               autoComplete="off"
               inputRef={this.passphraseInputRef}
               name="passphrase"
-              placeholder={this.translate('Passphrase')}
+              placeholder={this.props.t('Passphrase')}
               value={this.state.passphrase}
               onChange={this.handleChangePassphrase}
               disabled={!this.areActionsAllowed}

package/src/react-extension/components/AuthenticationLogin/Login/Login.test.stories.js

@@ -18,7 +18,7 @@ import Login, {LoginVariations} from "./Login";
 import {defaultProps, defaultPropsWithAccount} from "./Login.test.data";
 
 export default {
-  title: 'Passbolt/AuthenticationLogin/Login',
+  title: 'Passbolt Component/AuthenticationLogin/Login',
   component: Login
 };
 

package/src/react-extension/components/AuthenticationLogin/OrchestrateLogin/OrchestrateLoginBoxFooter.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 {withAppContext} from "../../../contexts/AppContext";
 import {
   AuthenticationLoginWorkflowStates,
@@ -45,4 +45,4 @@ OrchestrateLoginBoxFooter.propTypes = {
   context: PropTypes.any.isRequired, // The application context
   authenticationLoginContext: PropTypes.any.isRequired, // The authentication login context
 };
-export default withAppContext(withAuthenticationLoginContext(withTranslation('common')(OrchestrateLoginBoxFooter)));
+export default withAppContext(withAuthenticationLoginContext(OrchestrateLoginBoxFooter));

package/src/react-extension/components/AuthenticationLogin/OrchestrateLogin/OrchestrateLoginBoxMain.js

@@ -14,7 +14,7 @@
 import React, {Component} from "react";
 import Login from "../Login/Login";
 import PropTypes from "prop-types";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 import {withAppContext} from "../../../contexts/AppContext";
 import {
   AuthenticationLoginWorkflowStates,
@@ -88,4 +88,4 @@ OrchestrateLoginBoxMain.propTypes = {
   context: PropTypes.any.isRequired, // The application context
   authenticationLoginContext: PropTypes.any.isRequired, // The authentication login context
 };
-export default withAppContext(withAuthenticationLoginContext(withTranslation('common')(OrchestrateLoginBoxMain)));
+export default withAppContext(withAuthenticationLoginContext(OrchestrateLoginBoxMain));

package/src/react-extension/components/AuthenticationPassphrase/InputPassphrase/InputPassphrase.js

@@ -264,7 +264,7 @@ class InputPassphrase extends Component {
             </div>
             <div className="submit-wrapper clearfix">
               <a className="cancel" onClick={this.handleCloseClick}><Trans>Cancel</Trans></a>
-              <button type="submit" className="button primary" role="button"><Trans>OK</Trans></button>
+              <button type="submit" className="button primary" role="button"><Trans>Ok</Trans></button>
             </div>
           </form>
         }

package/src/react-extension/components/AuthenticationPassphrase/InputPassphrase/InputPassphrase.test.stories.js

@@ -7,7 +7,7 @@ import siteSettingsFixture from "../../../test/fixture/Settings/siteSettings";
 
 
 export default {
-  title: 'Passbolt/AuthenticationPassphrase/InputPassphrase',
+  title: 'Passbolt Component/AuthenticationPassphrase/InputPassphrase',
   component: InputPassphrase
 };
 

package/src/react-extension/components/AuthenticationRecover/RecoverAuthentication/RecoverAuthentication.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 {withAppContext} from "../../../contexts/AppContext";
 import {
   AuthenticationRecoverWorkflowStates,
@@ -50,6 +50,7 @@ class RecoverAuthentication extends Component {
           onComplete={this.props.authenticationRecoverContext.importGpgKey.bind(this)}
           onSecondaryActionClick={this.props.authenticationRecoverContext.needHelpCredentialsLost.bind(this)}
           validatePrivateGpgKey={this.props.authenticationRecoverContext.validatePrivateKey.bind(this)}
+          hasKeyExpirationDate={this.props.authenticationRecoverContext.hasKeyExpirationDate.bind(this)}
         />;
       case AuthenticationRecoverWorkflowStates.VALIDATE_PASSPHRASE:
         return <CheckPassphrase
@@ -115,4 +116,4 @@ RecoverAuthentication.propTypes = {
   authenticationRecoverContext: PropTypes.any.isRequired, // The authentication recover context
 };
 
-export default withAppContext(withAuthenticationRecoverContext(withTranslation('common')(RecoverAuthentication)));
+export default withAppContext(withAuthenticationRecoverContext(RecoverAuthentication));

package/src/react-extension/components/AuthenticationSetup/SetupAuthentication/SetupAuthentication.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 {withAppContext} from "../../../contexts/AppContext";
 import {
   AuthenticationSetupWorkflowStates,
@@ -85,7 +85,7 @@ class SetupAuthentication extends Component {
         />;
       case AuthenticationSetupWorkflowStates.SIGNING_IN:
         return <LoadingSpinner
-          title={<Trans>Signing in, please wait...</Trans>}
+          title={<Trans>Signing in, please wait.</Trans>}
         />;
       case AuthenticationSetupWorkflowStates.UNEXPECTED_ERROR:
         return <DisplayUnexpectedError
@@ -102,4 +102,4 @@ SetupAuthentication.propTypes = {
   authenticationSetupContext: PropTypes.any.isRequired, // The authentication setup context
 };
 
-export default withAppContext(withAuthenticationSetupContext(withTranslation('common')(SetupAuthentication)));
+export default withAppContext(withAuthenticationSetupContext(SetupAuthentication));

package/src/react-extension/components/Common/ActionFeedback/DisplayActionFeedbacks.test.stories.js

@@ -16,7 +16,7 @@ import {propsWithOneErrorMessage, propsWithOneSuccessMessage} from "./DisplayAct
 import DisplayActionFeedbacks from "./DisplayActionFeedbacks";
 
 export default {
-  title: 'Passbolt/Common/ActionFeedback',
+  title: 'Passbolt Component/Common/ActionFeedback',
   component: "DisplayActionFeedbacks"
 };
 

package/src/react-extension/components/Common/ActionFeedback/ShareActionFeedback.js

@@ -14,7 +14,7 @@
 
 import React from "react";
 import PropTypes from "prop-types";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 
 /**
  * Child component that displays a single action feedback
@@ -169,4 +169,4 @@ ShareActionFeedback.propTypes = {
   displayTimeInMs: PropTypes.number, // The time the feedback should be displayed
 };
 
-export default withTranslation('common')(ShareActionFeedback);
+export default ShareActionFeedback;

package/src/react-extension/components/Common/Autocomplete/Autocomplete.js

@@ -15,6 +15,7 @@ import React, {Component} from "react";
 import PropTypes from "prop-types";
 
 import AutocompleteItem from "./AutocompleteItem";
+import Icon from "../../../../shared/components/Icons/Icon";
 
 class Autocomplete extends Component {
   /**
@@ -45,11 +46,11 @@ class Autocomplete extends Component {
    * @return {void}
    */
   componentDidMount() {
-    document.addEventListener("keydown", this.handleKeyDown);
+    document.addEventListener("keydown", this.handleKeyDown, {capture: true});
   }
 
   componentWillUnmount() {
-    document.removeEventListener("keydown", this.handleKeyDown);
+    document.removeEventListener("keydown", this.handleKeyDown, {capture: true});
   }
 
   createInputRefs() {
@@ -207,6 +208,11 @@ class Autocomplete extends Component {
               <AutocompleteItem key={key} id={key} slug={tag.slug} selected={this.isItemSelected(key)}
                 onClick={this.handleSelect}/>
             )}
+            {this.state.processing &&
+              <li className="autocomplete-suggestion row">
+                <Icon name="spinner"/>
+              </li>
+            }
           </ul>
         </div>
       </div>

package/src/react-extension/components/Common/Avatar/UserAvatar.test.data.js

@@ -13,15 +13,17 @@
  */
 
 /**
- * Default props
- * @returns {{baseUrl: string, user: {last_name: string, first_name: string}}}
+ * Default props.
+ * @param {Object} props The props to override
+ * @returns {object}
  */
-export function defaultProps() {
-  return {
+export function defaultProps(props = {}) {
+  const _props = {
     user: {
       "first_name": "Dame Steve",
       "last_name": "Shirley",
     },
     baseUrl: (new URL(window.location.href)).origin,
   };
+  return Object.assign(_props, props);
 }

package/src/react-extension/components/Common/Avatar/UserAvatar.test.stories.js

@@ -20,7 +20,7 @@ import UserAvatar from "./UserAvatar";
 import {defaultProps} from "./UserAvatar.test.data";
 
 export default {
-  title: 'Passbolt/Common/UserAvatar',
+  title: 'Passbolt Component/Common/UserAvatar',
   component: UserAvatar
 };
 
@@ -51,4 +51,5 @@ const Template = args =>
   </div>;
 
 export const Initial = Template.bind({});
-Initial.args = defaultProps();
+// eslint-disable-next-line no-undef
+Initial.args = defaultProps({baseUrl: process.env.ORIGIN_URL});

package/src/react-extension/components/Common/Button/Button.test.stories.js

@@ -16,7 +16,7 @@ import Icon from "../../../../shared/components/Icons/Icon";
 import {Trans} from "react-i18next";
 
 export default {
-  title: 'Passbolt/Common/Button',
+  title: 'Foundations/Button',
   component: "Button"
 };
 
@@ -63,20 +63,20 @@ const Template = () =>
     </div>
     <span style={{width: "100%", marginTop: "3rem"}}>Secondary button</span>
     <div style={{width: "25%", marginTop: ".5rem"}}>
-      <button className="button" type="button">Learn More</button>
+      <button className="button" type="button">Learn more</button>
     </div>
     <div style={{width: "25%", marginTop: ".5rem"}}>
-      <button className="button" disabled={true} type="button">Learn More</button>
+      <button className="button" disabled={true} type="button">Learn more</button>
     </div>
     <div style={{width: "25%", marginTop: ".5rem"}}>
       <button className="button processing" type="button">
-        Learn More
+        Learn more
         <Icon name="spinner"/>
       </button>
     </div>
     <div style={{width: "25%", marginTop: ".5rem"}}>
       <button className="button processing disabled" type="button">
-        Learn More
+        Learn more
         <Icon name="spinner"/>
       </button>
     </div>

package/src/react-extension/components/Common/Checkbox/Checkbox.test.stories.js

@@ -14,7 +14,7 @@
 import React from "react";
 
 export default {
-  title: 'Passbolt/Common/Checkbox',
+  title: 'Foundations/Checkbox',
   component: "Checkbox"
 };
 

package/src/react-extension/components/Common/ContextualMenu/ContextualMenu.test.stories.js

@@ -16,7 +16,7 @@ import {Trans} from "react-i18next";
 import ContextualMenuWrapper from "./ContextualMenuWrapper";
 
 export default {
-  title: 'Passbolt/Common/ContextualMenu',
+  title: 'Passbolt Component/Common/ContextualMenu',
   component: "ContextualMenu"
 };
 

package/src/react-extension/components/Common/ContextualMenu/ContextualMenuWrapper.js

@@ -61,10 +61,10 @@ class ContextualMenuWrapper extends Component {
    * @return {void}
    */
   componentDidMount() {
-    document.addEventListener('click', this.handleDocumentClickEvent);
-    document.addEventListener('contextmenu', this.handleDocumentContextualMenuEvent);
-    document.addEventListener('dragstart', this.handleDocumentDragStartEvent);
-    document.addEventListener('scroll', this.handleDocumentScrollEvent, true);
+    document.addEventListener('click', this.handleDocumentClickEvent, {capture: true});
+    document.addEventListener('contextmenu', this.handleDocumentContextualMenuEvent, {capture: true});
+    document.addEventListener('dragstart', this.handleDocumentDragStartEvent, {capture: true});
+    document.addEventListener('scroll', this.handleDocumentScrollEvent, {capture: true});
   }
 
   /**
@@ -73,10 +73,10 @@ class ContextualMenuWrapper extends Component {
    * @return {void}
    */
   componentWillUnmount() {
-    document.removeEventListener('click', this.handleDocumentClickEvent);
-    document.removeEventListener('contextmenu', this.handleDocumentContextualMenuEvent);
-    document.removeEventListener('dragstart', this.handleDocumentDragStartEvent);
-    document.removeEventListener('scroll', this.handleDocumentScrollEvent, true);
+    document.removeEventListener('click', this.handleDocumentClickEvent, {capture: true});
+    document.removeEventListener('contextmenu', this.handleDocumentContextualMenuEvent, {capture: true});
+    document.removeEventListener('dragstart', this.handleDocumentDragStartEvent, {capture: true});
+    document.removeEventListener('scroll', this.handleDocumentScrollEvent, {capture: true});
   }
 
   /**
@@ -95,6 +95,8 @@ class ContextualMenuWrapper extends Component {
     if (this.elementRef.current.contains(event.target)) {
       return;
     }
+    // Avoid side effect if the click is on the button to open the contextual menu
+    event.stopPropagation();
     this.props.hide();
   }
 

package/src/react-extension/components/Common/Dialog/DialogCloseButton/DialogCloseButton.js

@@ -12,6 +12,7 @@
  * @since         2.13.0
  */
 import React, {Component} from "react";
+import {Trans} from "react-i18next";
 import PropTypes from "prop-types";
 import Icon from "../../../../../shared/components/Icons/Icon";
 
@@ -61,7 +62,7 @@ class DialogCloseButton extends Component {
     return (
       <a className={this.getClassName()} onClick={this.handleCloseClick} role="button">
         <Icon name='close'/>
-        <span className="visually-hidden">Close</span>
+        <span className="visually-hidden"><Trans>Close</Trans></span>
       </a>
     );
   }

package/src/react-extension/components/Common/Dialog/DialogWrapper/DialogFooter.test.stories.js

@@ -16,7 +16,7 @@ import FormSubmitButton from "../../Inputs/FormSubmitButton/FormSubmitButton";
 import {Trans} from "react-i18next";
 
 export default {
-  title: 'Passbolt/Common/DialogFooter',
+  title: 'Passbolt Component/Common/DialogFooter',
   component: "DialogFooter"
 };
 
@@ -26,7 +26,7 @@ const Template = args =>
     <div className="dialog">
       <div className="dialog-content">
         <div className="dialog-footer">
-          <button className="button button-left" disabled={args.disabled} type="button"><Trans>Learn More</Trans></button>
+          <button className="button button-left" disabled={args.disabled} type="button"><Trans>Learn more</Trans></button>
           <a className={`cancel ${args.disabled ? 'disabled' : ''}`}>
             <Trans>Cancel</Trans>
           </a>

package/src/react-extension/components/Common/Dialog/DialogWrapper/DialogWrapper.js

@@ -62,7 +62,7 @@ class DialogWrapper extends Component {
    * @return {void}
    */
   componentDidMount() {
-    document.addEventListener("keydown", this.handleKeyDown);
+    document.addEventListener("keydown", this.handleKeyDown, {capture: true});
   }
 
   /**
@@ -71,7 +71,7 @@ class DialogWrapper extends Component {
    * @return {void}
    */
   componentWillUnmount() {
-    document.removeEventListener("keydown", this.handleKeyDown);
+    document.removeEventListener("keydown", this.handleKeyDown, {capture: true});
   }
 
   /**

package/src/react-extension/components/Common/Dialog/DialogWrapper/DialogWrapper.test.stories.js

@@ -15,7 +15,7 @@ import React from "react";
 import DialogWrapper from "./DialogWrapper";
 
 export default {
-  title: 'Passbolt/Common/DialogWrapper',
+  title: 'Passbolt Component/Common/DialogWrapper',
   component: "DialogWrapper"
 };
 

package/src/react-extension/components/Common/DragInfo/DragInfo.test.stories.js

@@ -15,21 +15,21 @@ import React from "react";
 import Icon from "../../../../shared/components/Icons/Icon";
 
 export default {
-  title: 'Passbolt/Common/DragInfo',
+  title: 'Foundations/DragInfo',
   component: "DragInfo"
 };
 
 
 const Template = () =>
   <div style={{display: "flex", flexWrap: "wrap"}}>
-    <div style={{width: "25%"}}>
+    <div style={{width: "50%"}}>
       <div className="drag-and-drop-wrapper" draggable={true} style={{top: "1%"}}>
         <div className="drag-and-drop item-1">
           <span className="message">First name of the resource/folder/user</span>
         </div>
       </div>
     </div>
-    <div style={{width: "25%"}}>
+    <div style={{width: "50%"}}>
       <div className="drag-and-drop-wrapper" draggable={true} style={{top: "1%"}}>
         <div className="drag-and-drop item-2">
           <span className="message">First name of the resource/folder/user</span>
@@ -37,16 +37,18 @@ const Template = () =>
         </div>
       </div>
     </div>
-    <div style={{width: "25%"}}>
-      <div className="drag-and-drop-wrapper" draggable={true} style={{top: "1%"}}>
+    <br/>
+    <br/>
+    <div style={{width: "50%"}}>
+      <div className="drag-and-drop-wrapper" draggable={true} style={{top: "8%"}}>
         <div className="drag-and-drop item-n">
           <span className="message">First name of the resource/folder/user</span>
           <span className="count">3</span>
         </div>
       </div>
     </div>
-    <div style={{width: "25%"}}>
-      <div className="drag-and-drop-wrapper" draggable={true} style={{top: "1%"}}>
+    <div style={{width: "50%"}}>
+      <div className="drag-and-drop-wrapper" draggable={true} style={{top: "8%"}}>
         <div className="drag-and-drop item-n">
           <span className="message">First name of the resource/folder/user</span>
           <span className="count">99+</span>
@@ -56,7 +58,7 @@ const Template = () =>
     <br/>
     <br/>
     <div style={{width: "25%"}}>
-      <div className="drag-and-drop-wrapper" draggable={true} style={{top: "8%"}}>
+      <div className="drag-and-drop-wrapper" draggable={true} style={{top: "15%"}}>
         <div className="drag-and-drop item-1">
           <Icon name="ban"/>
           <span className="message not-allowed">You are not allowed to move this content</span>