passbolt-styleguide 3.3.3 → 3.4.0-alpha2

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

@@ -1,4 +1,3 @@
-
 /**
  * Passbolt ~ Open source password manager for teams
  * Copyright (c) 2020 Passbolt SA (https://www.passbolt.com)

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

@@ -61,7 +61,8 @@ class UserAvatar extends Component {
    * @returns {boolean}
    */
   propsUrlHasProtocol() {
-    return this.props.user.profile.avatar.url.medium.startsWith('https://');
+    return this.props.user.profile.avatar.url.medium.startsWith('https://')
+      || this.props.user.profile.avatar.url.medium.startsWith('http://');
   }
 
   /**

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

@@ -0,0 +1,126 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2021 Passbolt SA (https://www.passbolt.com)
+ *
+ * Licensed under GNU Affero General Public License version 3 of the or any later version.
+ * For full copyright and license information, please see the LICENSE.txt
+ * Redistributions of files must retain the above copyright notice.
+ *
+ * @copyright     Copyright (c) 2021 Passbolt SA (https://www.passbolt.com)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         3.3.0
+ */
+import React, {Component} from "react";
+import PropTypes from "prop-types";
+import Icon from "../../Icons/Icon";
+import {Trans} from "react-i18next";
+
+class ShowErrorDetails extends Component {
+  /**
+   * Constructor
+   * @param {Object} props
+   */
+  constructor(props) {
+    super(props);
+    this.state = this.defaultState;
+    this.bindHandlers();
+  }
+
+  /**
+   * Returns the component default state
+   */
+  get defaultState() {
+    return {
+      showErrorDetails: false
+    };
+  }
+
+  /**
+   * Binds the component handlers
+   */
+  bindHandlers() {
+    this.handleErrorDetailsToggle = this.handleErrorDetailsToggle.bind(this);
+  }
+
+  /**
+   * Get error data
+   * @returns {string}
+   */
+  get errorData() {
+    let msg = 'No data available.';
+    if (!this.props.error) {
+      return msg;
+    }
+
+    msg += "Message \n----------------------\n";
+    msg += this.props.error.message;
+    msg += "\n\n";
+
+    if (this.props.error.data) {
+      msg += "Data \n----------------------\n";
+      msg += JSON.stringify(this.props.error.data);
+      msg += "\n\n";
+    }
+
+    msg += "Stack \n----------------------\n";
+    msg += this.props.error.stack;
+
+    return msg;
+  }
+
+  /**
+   * Handle the toggle display of error details
+   */
+  handleErrorDetailsToggle() {
+    this.toggleErrorDetails();
+  }
+
+  /**
+   * Toggle the display of the error details
+   */
+  toggleErrorDetails() {
+    this.setState({showErrorDetails: !this.state.showErrorDetails});
+  }
+
+  /**
+   * Get the error main message
+   * @returns {String|string} return default if string is empty
+   */
+  get message() {
+    return this.props.error.message || 'No message.';
+  }
+
+  /**
+   * Render the component
+   * @return {JSX}
+   */
+  render() {
+    return (
+      <div className="accordion error-details">
+        <div className="accordion-header">
+          <a onClick={this.handleErrorDetailsToggle}>
+            <Icon baseline={true} name={this.state.showErrorDetails ? "caret-down" : "caret-right"}/>
+            <Trans>Error details</Trans>
+          </a>
+        </div>
+        {this.state.showErrorDetails &&
+        <div className="accordion-content">
+          <div className="input text">
+            <label htmlFor="show-error-details" className="visuallyhidden">
+              {this.props.error.message}
+            </label>
+            <textarea id="show-error-details" defaultValue={`${this.errorData}`} readOnly/>
+          </div>
+        </div>
+        }
+      </div>
+    );
+  }
+}
+
+ShowErrorDetails.propTypes = {
+  error: PropTypes.object,
+};
+
+export default ShowErrorDetails;

package/src/react-extension/components/Common/Icons/AnimatedFeedback.js

@@ -0,0 +1,58 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2021 Passbolt SA (https://www.passbolt.com)
+ *
+ * Licensed under GNU Affero General Public License version 3 of the or any later version.
+ * For full copyright and license information, please see the LICENSE.txt
+ * Redistributions of files must retain the above copyright notice.
+ *
+ * @copyright     Copyright (c) 2021 Passbolt SA (https://www.passbolt.com)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         3.3.0
+ */
+import React, {Component} from "react";
+import PropTypes from "prop-types";
+
+class AnimatedFeedback extends Component {
+  /**
+   * Render the component
+   * @return {JSX}
+   */
+  render() {
+    return (
+      <div className="illustration icon-feedback">
+        {this.props.name === 'success' &&
+        <svg id="icon-feedback-success" className="animated" xmlns="http://www.w3.org/2000/svg" width="170" height="170" viewBox="0 0 70 70">
+          <circle className="success-animation-circle" cx="35" cy="35" r="24" stroke="#000" strokeWidth="3" strokeLinecap="round" fill="transparent"/>
+          <polyline className="success-animation-line" stroke="#000" strokeWidth="3" points="23 34 34 43 47 27" linecap="round" fill="transparent"/>
+        </svg>
+        }
+        {this.props.name === 'warning' &&
+        <svg id="icon-feedback-warning" className="animated"  width="160" height="160" xmlns="http://www.w3.org/2000/svg" viewBox="-16 -16 100 100">
+          <g transform="translate(1.285714 1.857143)" fill="none" fillRule="evenodd">
+            <path className="warning-animation-line" d="M.71428571 70.1428571H70.7142857c-23.3333333-46.6666666-35-69.99999996-35-69.99999996L.71428571 70.1428571z" stroke="#000" strokeWidth="4" strokeLinejoin="round"/>
+            <path className="warning-animation-line" stroke="#000" strokeWidth="5" fill="#000" fillRule="nonzero" strokeLinecap="round" d="M36.3214286 28.2244898v19.4285714"/>
+            <circle className="warning-animation-circle" fill="#000" cx="36.2142857" cy="57.6428571" r="3.5"/>
+          </g>
+        </svg>
+        }
+        {this.props.name === 'error' &&
+        <svg id="icon-feedback-error" className="animated" xmlns="http://www.w3.org/2000/svg" width="170" height="170" viewBox="0 0 70 70">
+          <circle className="error-animation-circle" cx="35" cy="35" r="24" stroke="#000000" strokeWidth="3" strokeLinecap="round" fill="transparent"/>
+          <polyline className="error-animation-line" stroke="#000" strokeWidth="3" points="26 26 44 44" linecap="round" fill="transparent"/>
+          <polyline className="error-animation-line" stroke="#000" strokeWidth="3" points="44 26 26 44" linecap="round" fill="transparent"/>
+        </svg>
+        }
+      </div>
+    );
+  }
+}
+
+AnimatedFeedback.defaultProps = {};
+
+AnimatedFeedback.propTypes = {
+  name: PropTypes.string,
+};
+
+export default AnimatedFeedback;

package/src/react-extension/components/Common/Icons/Icon.js

@@ -38,6 +38,9 @@ class Icon extends Component {
     if (this.props.baseline) {
       className += ' baseline';
     }
+    if (this.props.dim) {
+      className += ' dim';
+    }
     return className;
   }
 
@@ -48,6 +51,12 @@ class Icon extends Component {
   render() {
     return (
       <span className={this.getClassName()} onClick={this.props.onClick}>
+        {this.props.name === 'add' &&
+        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-prefix="fas"
+          data-icon="plus-circle"  role="img" viewBox="0 0 512 512">
+          <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"/>
+        </svg>
+        }
         {this.props.name === 'ban' &&
         <svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
           <path d="M1440 893q0-161-87-295l-754 753q137 89 297 89 111 0 211.5-43.5t173.5-116.5 116-174.5 43-212.5zm-999 299l755-754q-135-91-300-91-148 0-273 73t-198 199-73 274q0 162 89 299zm1223-299q0 157-61 300t-163.5 246-245 164-298.5 61-298.5-61-245-164-163.5-246-61-300 61-299.5 163.5-245.5 245-164 298.5-61 298.5 61 245 164 163.5 245.5 61 299.5z"/>
@@ -94,6 +103,11 @@ class Icon extends Component {
           <path d="M1277 1122q0-26-19-45l-181-181 181-181q19-19 19-45 0-27-19-46l-90-90q-19-19-46-19-26 0-45 19l-181 181-181-181q-19-19-45-19-27 0-46 19l-90 90q-19 19-19 46 0 26 19 45l181 181-181 181q-19 19-19 45 0 27 19 46l90 90q19 19 46 19 26 0 45-19l181-181 181 181q19 19 45 19 27 0 46-19l90-90q19-19 19-46zm387-226q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"/>
         </svg>
         }
+        {this.props.name === 'cog' &&
+        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="cog" viewBox="0 0 512 512">
+          <path fill="currentColor" d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"/>
+        </svg>
+        }
         {this.props.name === 'copy-to-clipboard' &&
         <svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
           <path d="M768 1664h896v-640h-416q-40 0-68-28t-28-68v-416h-384v1152zm256-1440v-64q0-13-9.5-22.5t-22.5-9.5h-704q-13 0-22.5 9.5t-9.5 22.5v64q0 13 9.5 22.5t22.5 9.5h704q13 0 22.5-9.5t9.5-22.5zm256 672h299l-299-299v299zm512 128v672q0 40-28 68t-68 28h-960q-40 0-68-28t-28-68v-160h-544q-40 0-68-28t-28-68v-1344q0-40 28-68t68-28h1088q40 0 68 28t28 68v328q21 13 36 28l408 408q28 28 48 76t20 88z"/>
@@ -286,6 +300,7 @@ class Icon extends Component {
 Icon.defaultProps = {
   big: false,
   baseline: false,
+  dim: false,
   onClick: () => {
   }
 };
@@ -293,6 +308,7 @@ Icon.defaultProps = {
 Icon.propTypes = {
   name: PropTypes.string,
   big: PropTypes.bool,
+  dim: PropTypes.bool,
   baseline: PropTypes.bool,
   onClick: PropTypes.func
 };

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

@@ -0,0 +1,78 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Icon from "./Icon";
+
+
+export default {
+  title: 'Passbolt/Common/Icon'
+};
+
+const iconsNames = [
+  'add',
+  'ban',
+  'camera',
+  'caret-right',
+  'caret-down',
+  'caret-up',
+  'chevron-left',
+  'chevron-right',
+  'close',
+  'close-circle',
+  'cog',
+  'copy-to-clipboard',
+  'download',
+  'edit',
+  'envelope',
+  'eye-open',
+  'eye-close',
+  'external-link',
+  'folder',
+  'folder-shared',
+  'heart',
+  'heart-o',
+  'heartbeat',
+  'info-circle',
+  'key',
+  'link',
+  'lock',
+  'lock-open',
+  'magic-wand',
+  'plus-circle',
+  'plus-square',
+  'filter',
+  'life-ring',
+  'plug',
+  'printer',
+  'refresh',
+  'question-circle',
+  'search',
+  'share',
+  'star',
+  'save',
+  'trash',
+  'upload',
+  'upload-a',
+  'user',
+  'users',
+  'warning'
+];
+
+const Template = () =>
+  <React.Fragment>
+    <div style={{display: "grid", gridTemplateColumns: "repeat(auto-fill, 10%)"}}>
+      {iconsNames.map(iconName =>
+        <div key={iconName} style={{marginTop: "1rem"}}>
+          <div style={{fontSize: "1rem", marginBottom: "1rem"}}>{iconName}</div>
+          <Icon name={iconName} big={true} />
+        </div>)}
+    </div>
+  </React.Fragment>;
+
+Template.propTypes = {
+  context: PropTypes.object,
+};
+
+export const Initial = Template.bind({});
+Initial.parameters = {
+  css: "api_main"
+};

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

@@ -50,6 +50,9 @@ class FormSubmitButton extends Component {
     if (this.props.big) {
       name += ' big';
     }
+    if (this.props.medium) {
+      name += ' medium';
+    }
     if (this.props.fullWidth) {
       name += ' full-width';
     }
@@ -81,6 +84,7 @@ FormSubmitButton.propTypes = {
   value: PropTypes.string,
   warning: PropTypes.bool,
   big: PropTypes.bool,
+  medium: PropTypes.bool,
   fullWidth: PropTypes.bool
 };
 

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

@@ -12,6 +12,7 @@
  * @since         2.13.0
  */
 import React from "react";
+import {Trans} from "react-i18next";
 
 /**
  * This component displays a waiting loading spinner
@@ -27,7 +28,7 @@ class LoadingSpinner extends React.Component {
           <div  className="processing">
           </div>
         </div>
-        <h1>Please wait...</h1>
+        <h1><Trans>Please wait...</Trans></h1>
       </div>
     );
   }

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

@@ -61,7 +61,7 @@ class DisplayMainMenu extends Component {
     return (
       <nav>
         <div className="primary navigation top">
-          <ul className="left">
+          <ul>
             <li key="password">
               <div className={`row ${this.isSelected("passwords") ? "selected" : ""}`}>
                 <div className="main-cell-wrapper">
@@ -105,9 +105,7 @@ class DisplayMainMenu extends Component {
                 </div>
               </div>
             </li>
-          </ul>
-          <ul className="right">
-            <li key="logout">
+            <li key="logout" className="right">
               <div className="row">
                 <div className="main-cell-wrapper">
                   <div className="main-cell">

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

@@ -91,7 +91,7 @@ class SearchBar extends Component {
               placeholder={this.props.placeholder || this.props.t('Search')}
               value={this.props.value}/>
           </div>
-          <button value="search" type="submit" disabled={this.props.disabled ? 'disabled' : ''}>
+          <button className="button" value="search" type="submit" disabled={this.props.disabled ? 'disabled' : ''}>
             <Icon name="search"/>
             <span className="visuallyhidden">Search</span>
           </button>

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

@@ -60,7 +60,7 @@ class DisplayProgress extends Component {
               </div>
               {displayDetailsSection &&
               <div className="progress-details">
-                <span className="progress-step-label">&nbsp; {this.props.context.progressDialogProps.message ||  this.translate("Please wait...") }</span>
+                <span className="progress-step-label">{this.props.context.progressDialogProps.message ||  this.translate("Please wait...") }</span>
                 <span style={progressLabelStyle} className="progress-percent">{progress}%</span>
               </div>
               }

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

@@ -76,7 +76,7 @@ describe("DisplayProgress", () => {
     // Details message.
     const progressStepLabel = container.querySelector(".progress-step-label");
     //   translate to unix code \u00a0
-    expect(progressStepLabel.textContent).toBe("\u00a0 Step 0");
+    expect(progressStepLabel.textContent).toBe("Step 0");
 
     // Details percent.
     const progressPercent = container.querySelector(".progress-percent");

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

@@ -0,0 +1,34 @@
+import {MemoryRouter, Route} from "react-router-dom";
+import React from "react";
+import DisplayProgress from "./DisplayProgress";
+
+
+export default {
+  title: 'Passbolt/Common/DisplayProgress',
+  component: DisplayProgress
+};
+
+const Template = args =>
+    <MemoryRouter initialEntries={['/']}>
+      <Route component={routerProps => <DisplayProgress {...args} {...routerProps}/>}></Route>
+    </MemoryRouter>;
+
+
+export const Initial = Template.bind({});
+Initial.args = {
+  context: {
+    progressDialogProps: {}
+  }
+};
+
+export const ProgressMessage = Template.bind({});
+ProgressMessage.args = {
+  context: {
+    progressDialogProps: {
+      title: "Title",
+      goals: 100,
+      completed: 50,
+      message: "message"
+    }
+  }
+};

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

@@ -0,0 +1,65 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2020 Passbolt SA (https://www.passbolt.com)
+ *
+ * Licensed under GNU Affero General Public License version 3 of the or any later version.
+ * For full copyright and license information, please see the LICENSE.txt
+ * Redistributions of files must retain the above copyright notice.
+ *
+ * @copyright     Copyright (c) 2020 Passbolt SA (https://www.passbolt.com)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         3.3.0
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+
+/**
+ * Display of the Tab component
+ */
+class Tab extends React.Component {
+  /**
+   * Default constructor
+   * @param props Component props
+   */
+  constructor(props) {
+    super(props);
+    this.bindCallback();
+  }
+
+  /**
+   * Bind class methods callback
+   */
+  bindCallback() {
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  /**
+   * Handle click
+   * @param event
+   */
+  handleClick() {
+    this.props.onClick(this.props.name);
+  }
+
+  render() {
+    return (
+      <li className={`tab ${this.props.isActive ? 'active' : ''}`}>
+        <a className="tab-link"  onClick={this.handleClick}>
+          {this.props.name}
+        </a>
+      </li>
+    );
+  }
+}
+
+Tab.propTypes = {
+  name: PropTypes.string, // The tab name as label
+  type: PropTypes.string, // The tab type
+  isActive: PropTypes.bool, // The current tab is active
+  onClick: PropTypes.func, // The click event callback
+  children: PropTypes.any // The childrent content of the tab
+};
+
+export default Tab;

package/src/react-extension/components/Common/Tab/Tabs.js

@@ -0,0 +1,87 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2020 Passbolt SA (https://www.passbolt.com)
+ *
+ * Licensed under GNU Affero General Public License version 3 of the or any later version.
+ * For full copyright and license information, please see the LICENSE.txt
+ * Redistributions of files must retain the above copyright notice.
+ *
+ * @copyright     Copyright (c) 2020 Passbolt SA (https://www.passbolt.com)
+ * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
+ * @link          https://www.passbolt.com Passbolt(tm)
+ * @since         3.3.0
+ */
+
+import React from "react";
+import PropTypes from "prop-types";
+import Tab from "./Tab";
+
+/**
+ * Tabs component to handle the display of selected tab
+ */
+class Tabs extends React.Component {
+  /**
+   * Default constructor
+   * @param props Component props
+   */
+  constructor(props) {
+    super(props);
+    this.state = this.getDefaultState(props);
+    this.bindCallback();
+  }
+
+  /**
+   * Default state
+   * @param props Component props
+   */
+  getDefaultState(props) {
+    return {
+      activeTabName: props.activeTabName
+    };
+  }
+
+  /**
+   * Bind class methods callback
+   */
+  bindCallback() {
+    this.handleTabClick = this.handleTabClick.bind(this);
+  }
+
+  /**
+   * Toggle currently active tab
+   * @param tabItem The item which represents the tab
+   */
+  handleTabClick(tabItem) {
+    this.setState({activeTabName: tabItem.name});
+    tabItem.onClick();
+  }
+
+  render() {
+    return (
+      <div className="tabs">
+        <ul className="tabs-nav tabs-nav--bordered">
+          {
+            this.props.children.map(({key, props}) =>
+              <Tab
+                key={key}
+                name={props.name}
+                onClick={ () => this.handleTabClick(props)}
+                isActive={props.name === this.state.activeTabName}
+              />)
+          }
+        </ul>
+        <div className="tabs-active-content">
+          {this.props.children.find(tab => tab.props.name === this.state.activeTabName).props.children}
+        </div>
+      </div>
+    );
+  }
+}
+
+Tabs.propTypes = {
+  activeTabName: PropTypes.string, // The active tab name
+  children: PropTypes.any // The different tab components
+};
+
+export default Tabs;
+