passbolt-styleguide 3.6.2 → 3.7.0-alpha1

package/src/react-extension/components/Common/Error/NotifyError/NotifyError.js

@@ -49,7 +49,7 @@ class NotifyError extends Component {
    * @return {void}
    */
   componentDidMount() {
-    document.addEventListener("keydown", this.handleKeyDown);
+    document.addEventListener("keydown", this.handleKeyDown, {capture: true});
   }
 
   /**
@@ -58,7 +58,7 @@ class NotifyError extends Component {
    * @return {void}
    */
   componentWillUnmount() {
-    document.removeEventListener("keydown", this.handleKeyDown);
+    document.removeEventListener("keydown", this.handleKeyDown, {capture: true});
   }
 
   /**
@@ -68,7 +68,7 @@ class NotifyError extends Component {
   getTitle() {
     return this.props.title
       ? this.props.title
-      : this.translate("There was an unexpected error...");
+      : this.props.t("There was an unexpected error...");
   }
 
   /**
@@ -109,14 +109,6 @@ class NotifyError extends Component {
     return Boolean(this.props.error.data?.body) || Boolean(this.props.error.details);
   }
 
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Format the error details as a string.
    * @returns {string}

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

@@ -16,7 +16,7 @@ import React from "react";
 import NotifyError from "./NotifyError";
 
 export default {
-  title: 'Passbolt/Common/Error/NotifyError',
+  title: 'Passbolt Component/Common/Error/NotifyError',
   component: NotifyError
 };
 
@@ -24,3 +24,8 @@ const Template = args =>
   <NotifyError {...args}/>;
 
 export const Default = Template.bind({});
+Default.args = {
+  error: {
+    message: "The error message"
+  }
+};

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

@@ -14,7 +14,7 @@
 import React, {Component} from "react";
 import Icon from "../../../../shared/components/Icons/Icon";
 import PropTypes from "prop-types";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 import {withAppContext} from "../../../contexts/AppContext";
 import Tooltip from "../Tooltip/Tooltip";
 
@@ -79,14 +79,6 @@ class Footer extends Component {
     return debug || isHttpMode;
   }
 
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render the component
    * @return {JSX}
@@ -99,7 +91,6 @@ class Footer extends Component {
             {this.isUnsafeMode &&
             <li className="error-message">
               <a
-                title="terms of service"
                 href={this.unsafeUrl}
                 target="_blank" rel="noopener noreferrer">
                 <Trans>Unsafe mode</Trans>
@@ -159,8 +150,7 @@ class Footer extends Component {
 }
 
 Footer.propTypes = {
-  context: PropTypes.any, // The app context
-  t: PropTypes.func, // The translation function
+  context: PropTypes.any, // The app context‡
 };
 
-export default withAppContext(withTranslation('common')(Footer));
+export default withAppContext(Footer);

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

@@ -19,6 +19,8 @@ import AutocompleteItem from "./AutocompleteItem";
 import AutocompleteItemEmpty from "./AutocompleteItemEmpty";
 import AutocompleteItemLoading from "./AutocompleteItemLoading";
 
+const AUTOCOMPLETE_DISPLAY_LIMIT = 10;
+
 class Autocomplete extends Component {
   /**
    * Constructor
@@ -29,7 +31,6 @@ class Autocomplete extends Component {
     this.bindCallbacks();
     this.createInputRefs();
     this.state = this.getDefaultState();
-    this.getItemsDebounced = debounce(this.getItems, 150, {leading: true});
     this.cache = [];
     this.cacheExpiry = 10000; // in ms (aka 10s)
   }
@@ -62,7 +63,7 @@ class Autocomplete extends Component {
     this.setState({loading: false, name: ''}, () => {
       this.inputRef.current.focus();
     });
-    document.addEventListener("keydown", this.handleKeyDown);
+    document.addEventListener("keydown", this.handleKeyDown, {capture: true});
   }
 
   /**
@@ -82,7 +83,7 @@ class Autocomplete extends Component {
    * @return {void}
    */
   componentWillUnmount() {
-    document.removeEventListener("keydown", this.handleKeyDown);
+    document.removeEventListener("keydown", this.handleKeyDown, {capture: true});
   }
 
   /**
@@ -102,7 +103,7 @@ class Autocomplete extends Component {
     this.handleKeyDown = this.handleKeyDown.bind(this);
     this.selectNext = this.selectNext.bind(this);
     this.selectPrevious = this.selectPrevious.bind(this);
-    this.handleAutocompleteChange = this.handleAutocompleteChange.bind(this);
+    this.handleAutocompleteChangeDebounced = debounce(this.handleAutocompleteChange.bind(this), 150);
     this.handleSelect = this.handleSelect.bind(this);
     this.handleInputChange = this.handleInputChange.bind(this);
   }
@@ -125,7 +126,7 @@ class Autocomplete extends Component {
    */
   async autocompleteSearch(keyword) {
     if (!this.cache[keyword] || this.cache[keyword].cacheExpiry < (new Date()).getTime()) {
-      this.cache[keyword] = await this.getItemsDebounced(keyword);
+      this.cache[keyword] = await this.getItems(keyword);
       this.cache[keyword].cacheExpiry = (new Date()).getTime() + this.cacheExpiry;
     }
     return this.cache[keyword];
@@ -208,7 +209,7 @@ class Autocomplete extends Component {
   handleAfterNameUpdate() {
     if (this.state.name) {
       if (!this.state.name.endsWith(' ')) {
-        this.handleAutocompleteChange();
+        this.handleAutocompleteChangeDebounced();
       }
     } else {
       this.closeAutocomplete();
@@ -330,6 +331,14 @@ class Autocomplete extends Component {
     }
   }
 
+  /**
+   * Returns the maximum count of element the autocomplete list should display.
+   * @returns {integer}
+   */
+  static get DISPLAY_LIMIT() {
+    return AUTOCOMPLETE_DISPLAY_LIMIT;
+  }
+
   /**
    * Render
    * @returns {JSX}
@@ -338,7 +347,7 @@ class Autocomplete extends Component {
     return (
       <div>
         <div>
-          <div className="input text autocomplete">
+          <div className={`input text autocomplete ${this.isInputDisabled() ? 'disabled' : ''}`}>
             <label htmlFor={this.props.id}>{this.props.label}</label>
             <input id={this.props.id}
               name={this.props.name}

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

@@ -12,6 +12,7 @@
  * @since         2.13.0
  */
 import React, {Component} from "react";
+import Icon from "../../../../../shared/components/Icons/Icon";
 
 class AutocompleteItemLoading extends Component {
   /**
@@ -24,6 +25,9 @@ class AutocompleteItemLoading extends Component {
         <div className="row loading">
           <div className="main-cell-wrapper">
             <div className="main-cell">
+              <div className="loading">
+                <Icon name="spinner"/>
+              </div>
               <div className="info">
                 <span className="name">Loading...</span>
                 <span className="details">Please wait.</span>

package/src/react-extension/components/Common/Inputs/FormSubmitButton/FormCancelButton.js

@@ -13,7 +13,7 @@
  */
 import React, {Component} from "react";
 import PropTypes from "prop-types";
-import {withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 
 class FormCancelButton extends Component {
   /**
@@ -55,21 +55,13 @@ class FormCancelButton extends Component {
     return name;
   }
 
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render the component
    * @return {JSX}
    */
   render() {
     return (
-      <a className={this.getClassName()} role="button" onClick={this.handleClick}>{this.translate("Cancel")}</a>
+      <a className={this.getClassName()} role="button" onClick={this.handleClick}><Trans>Cancel</Trans></a>
     );
   }
 }
@@ -77,7 +69,6 @@ class FormCancelButton extends Component {
 FormCancelButton.propTypes = {
   disabled: PropTypes.bool,
   onClick: PropTypes.func,
-  t: PropTypes.func, // The translation function
 };
 
-export default withTranslation('common')(FormCancelButton);
+export default FormCancelButton;

package/src/react-extension/components/Common/Inputs/FormSubmitButton/FormSubmitButton.js

@@ -14,7 +14,7 @@
 import React, {Component} from "react";
 import PropTypes from "prop-types";
 import Icon from "../../../../../shared/components/Icons/Icon";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 
 class FormSubmitButton extends Component {
   /**
@@ -93,4 +93,4 @@ FormSubmitButton.propTypes = {
   fullWidth: PropTypes.bool
 };
 
-export default withTranslation('common')(FormSubmitButton);
+export default FormSubmitButton;

package/src/react-extension/components/Common/Internationalisation/TranslationProvider.js

@@ -75,7 +75,6 @@ class TranslationProvider extends Component {
         keySeparator: false, // don't use the dot for separator of nested json object
         nsSeparator: false, // allowed ':' in key to avoid namespace separator
         debug: false,
-        compatibilityJSON: "v3"
       });
     this.setState({ready: true});
   }

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

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

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

@@ -16,7 +16,7 @@ import LoadingBar from "./LoadingBar";
 
 
 export default {
-  title: 'Passbolt/Common/Loading',
+  title: 'Foundations/Loading',
   component: LoadingBar
 };
 

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

@@ -18,7 +18,7 @@ import MockTranslationProvider from "../../../../test/mock/components/Internatio
 import LoadingSpinner from "./LoadingSpinner";
 
 export default {
-  title: 'Passbolt/Common/LoadingSpinner',
+  title: 'Passbolt Component/Common/LoadingSpinner',
   component: LoadingSpinner
 };
 

package/src/react-extension/components/Common/Menu/DisplayMainMenu.js

@@ -15,7 +15,7 @@ import PropTypes from "prop-types";
 import {withRouter} from "react-router-dom";
 import {withAppContext} from "../../../contexts/AppContext";
 import {withNavigationContext} from "../../../contexts/NavigationContext";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 
 class DisplayMainMenu extends Component {
   /**
@@ -45,14 +45,6 @@ class DisplayMainMenu extends Component {
     return this.props.context.loggedInUser && this.props.context.loggedInUser.role.name === 'admin';
   }
 
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render the component
    * @return {JSX}
@@ -129,7 +121,6 @@ DisplayMainMenu.propTypes = {
   navigationContext: PropTypes.any, // The navigation context
   history: PropTypes.object, // The router history
   location: PropTypes.object, // Router location prop
-  t: PropTypes.func, // The translation function
 };
 
-export default withAppContext(withRouter(withNavigationContext(withTranslation('common')(DisplayMainMenu))));
+export default withAppContext(withRouter(withNavigationContext(DisplayMainMenu)));

package/src/react-extension/components/Common/Navigation/Search/SearchBar.js

@@ -14,7 +14,7 @@
 import React, {Component} from "react";
 import PropTypes from "prop-types";
 import Icon from "../../../../../shared/components/Icons/Icon";
-import {withTranslation} from "react-i18next";
+import {Trans, withTranslation} from "react-i18next";
 
 class SearchBar extends Component {
   /**
@@ -101,17 +101,17 @@ class SearchBar extends Component {
     return (
       <div className="col2 search-wrapper">
         <form className="search" onSubmit={this.handleOnSubmitEvent}>
-          <div className={`input search required ${this.state.hasSubmitButtonFocus ? "no-focus" : ""}`}>
-            <label>Search</label>
+          <div className={`input search required ${this.state.hasSubmitButtonFocus ? "no-focus" : ""} ${this.props.disabled ? 'disabled' : ''}`}>
+            <label><Trans>Search</Trans></label>
             <input ref={this.searchInputRef} className="required" type="search"
               disabled={this.props.disabled ? 'disabled' : ''}
               onChange={this.handleChangeEvent}
               placeholder={this.props.placeholder || this.props.t('Search')}
               value={this.props.value}/>
             <div className="search-button-wrapper">
-              <button className="button button-transparent" value="search" onBlur={this.handleSubmitButtonBlur} onFocus={this.handleSubmitButtonFocus} type="submit" disabled={this.props.disabled ? 'disabled' : ''}>
+              <button className="button button-transparent" value={this.props.t("Search")} onBlur={this.handleSubmitButtonBlur} onFocus={this.handleSubmitButtonFocus} type="submit" disabled={this.props.disabled ? 'disabled' : ''}>
                 <Icon name="search"/>
-                <span className="visuallyhidden">Search</span>
+                <span className="visuallyhidden"><Trans>Search</Trans></span>
               </button>
             </div>
           </div>
@@ -130,7 +130,7 @@ SearchBar.propTypes = {
 };
 
 SearchBar.defaultProps = {
-  disabled: false
+  disabled: false,
 };
 
-export default withTranslation('common')(SearchBar);
+export default withTranslation("common")(SearchBar);

package/src/react-extension/components/Common/Navigation/Search/SearchBar.test.stories.js

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

package/src/react-extension/components/Common/Progress/DisplayProgress/DisplayProgress.js

@@ -13,7 +13,7 @@
  */
 import React, {Component} from "react";
 import {withAppContext} from "../../../../contexts/AppContext";
-import {Trans, withTranslation} from "react-i18next";
+import {Trans} from "react-i18next";
 import PropTypes from "prop-types";
 import Icon from "../../../../../shared/components/Icons/Icon";
 
@@ -128,14 +128,6 @@ class DisplayProgress extends Component {
     return progress;
   }
 
-  /**
-   * Get the translate function
-   * @returns {function(...[*]=)}
-   */
-  get translate() {
-    return this.props.t;
-  }
-
   /**
    * Render
    * @returns {JSX.Element}
@@ -179,7 +171,6 @@ class DisplayProgress extends Component {
 
 DisplayProgress.propTypes = {
   context: PropTypes.any, // The application context
-  t: PropTypes.func, // The translation function
 };
 
-export default withAppContext(withTranslation('common')(DisplayProgress));
+export default withAppContext(DisplayProgress);

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

@@ -4,7 +4,7 @@ import DisplayProgress from "./DisplayProgress";
 
 
 export default {
-  title: 'Passbolt/Common/DisplayProgress',
+  title: 'Passbolt Component/Common/DisplayProgress',
   component: DisplayProgress
 };
 

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

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

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

@@ -101,6 +101,7 @@ class Select extends Component {
     this.handleItemClick = this.handleItemClick.bind(this);
     this.handleSelectKeyDown = this.handleSelectKeyDown.bind(this);
     this.handleItemKeyDown = this.handleItemKeyDown.bind(this);
+    this.handleBlur = this.handleBlur.bind(this);
   }
 
   /**
@@ -116,10 +117,10 @@ class Select extends Component {
    * Component did mount
    */
   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});
   }
 
   /**
@@ -128,10 +129,10 @@ class Select 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});
   }
 
   /**
@@ -194,22 +195,53 @@ class Select extends Component {
     }
   }
 
+  /**
+   * Get the first parent from this element that have a transfrom CSS property set.
+   * It's useful for calculation of a correction of an offset for the dropdown
+   */
+  getFirstParentWithTransform() {
+    let currentElement = this.selectedItemRef.current.parentElement;
+    while (currentElement !== null && currentElement.style.getPropertyValue("transform") === "") {
+      currentElement = currentElement.parentElement;
+    }
+    return currentElement;
+  }
+
   /**
    * Force the visibility of the select with fixed position
    */
   forceVisibilitySelect() {
-    const {left, top, width, height} = this.selectedItemRef.current.getBoundingClientRect();
+    const boundingRect = this.selectedItemRef.current.getBoundingClientRect();
+    const {width, height} = boundingRect;
+    let {top, left} = boundingRect;
+
+    const relativeParent = this.getFirstParentWithTransform();
+    if (relativeParent) {
+      const relativeParentPosition = relativeParent.getBoundingClientRect();
+      top -= relativeParentPosition.top;
+      left -= relativeParentPosition.left;
+    }
     const style = {
       position: 'fixed',
       zIndex: 1,
       width,
       height,
-      left,
-      top
+      top,
+      left
     };
     this.setState({style});
   }
 
+  /**
+   * Handle blur
+   * @param event
+   */
+  handleBlur(event) {
+    if (!event.currentTarget.contains(event.relatedTarget)) {
+      this.closeSelect();
+    }
+  }
+
   /**
    * Close select
    */
@@ -354,7 +386,7 @@ class Select extends Component {
   render() {
     return (
       <div className={`select-container ${this.props.className}`} style={{width: this.state.style?.width, height: this.state.style?.height}}>
-        <div onKeyDown={this.handleSelectKeyDown} id={this.props.id} className={`select ${this.props.direction} ${this.state.open ? 'open' : ''}`} style={this.state.style}>
+        <div onKeyDown={this.handleSelectKeyDown} onBlur={this.handleBlur} id={this.props.id} className={`select ${this.props.direction} ${this.state.open ? 'open' : ''}`} style={this.state.style}>
           <div ref={this.selectedItemRef}
             className={`selected-value ${this.props.disabled ? 'disabled' : ''}`}
             tabIndex={this.props.disabled ? -1 : 0}

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

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

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

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

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

@@ -18,7 +18,7 @@ import Password from "../../../../shared/components/Password/Password";
 import PasswordComplexity from "../../../../shared/components/PasswordComplexity/PasswordComplexity";
 
 export default {
-  title: 'Passbolt/Common/TextField',
+  title: 'Foundations/TextField',
   component: "TextField"
 };
 

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

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

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

@@ -20,7 +20,7 @@ import Icon from "../../../../shared/components/Icons/Icon";
 import Tooltip from "./Tooltip";
 
 export default {
-  title: 'Passbolt/Common/Tooltip',
+  title: 'Foundations/Tooltip',
   component: Tooltip
 };
 
@@ -28,7 +28,7 @@ export default {
 
 const Template = () =>
   <div style={{marginLeft: "auto", marginTop: "20rem", textAlign: "center"}}>
-    <p>Put the mouse below</p>
+    <div>Put the mouse below</div>
     <Tooltip message="Tool tip placeholder" direction="top">
       <Tooltip message="Tool tip placeholder" direction="right">
         <Tooltip message="Tool tip placeholder" direction="bottom">

package/src/react-extension/components/Internationalisation/ChangeLocale/ChangeLocale.test.page.js

@@ -74,7 +74,7 @@ export default class ChangeLocalePage {
   /** select the french language */
   async selectLanguageFr() {
     await this.click(this.locale);
-    await this.click(this.getLocaleList(2));
+    await this.click(this.getLocaleList(3));
   }
 }