passbolt-styleguide 3.6.0 → 3.7.0-alpha1

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>

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>
@@ -132,14 +123,24 @@ class Footer extends Component {
               </a>
             </li>
             <li>
-              <Tooltip message={this.versions} direction="left">
+              {this.versions &&
+                <Tooltip message={this.versions} direction="left">
+                  <a
+                    href={this.creditsUrl}
+                    target="_blank"
+                    rel="noopener noreferrer">
+                    <Icon name="heart-o"/>
+                  </a>
+                </Tooltip>
+              }
+              {!this.versions &&
                 <a
                   href={this.creditsUrl}
                   target="_blank"
                   rel="noopener noreferrer">
                   <Icon name="heart-o"/>
                 </a>
-              </Tooltip>
+              }
             </li>
           </ul>
         </div>
@@ -149,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"
 };