cozy-sharing 12.0.0 → 12.2.0

package/dist/components/ShareDialogCozyToCozy.js

@@ -4,6 +4,7 @@ var _excluded = ["showShareByLink", "documentType", "document"];
 import cx from 'classnames';
 import React from 'react';
 import Typography from 'cozy-ui/transpiled/react/Typography';
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints';
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n';
 import { default as DumbShareByEmail } from './ShareByEmail';
 import { default as DumbShareByLink } from './ShareByLink';
@@ -64,8 +65,13 @@ var SharingContent = function SharingContent(_ref) {
   var _useI18n = useI18n(),
       t = _useI18n.t;
 
+  var _useBreakpoints = useBreakpoints(),
+      isMobile = _useBreakpoints.isMobile;
+
   return /*#__PURE__*/React.createElement("div", {
     className: cx(styles['share-modal-content'])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: cx('u-pt-1-half', isMobile ? 'u-ph-1' : 'u-ph-2')
   }, showShareOnlyByLink && /*#__PURE__*/React.createElement("div", {
     className: styles['share-byemail-onlybylink']
   }, t("".concat(documentType, ".share.shareByEmail.onlyByLink"), {
@@ -84,8 +90,7 @@ var SharingContent = function SharingContent(_ref) {
     onShare: onShare,
     sharing: sharing,
     sharingDesc: sharingDesc
-  }), showWhoHasAccess && /*#__PURE__*/React.createElement(WhoHasAccess, {
-    className: "u-mt-half",
+  })), showWhoHasAccess && /*#__PURE__*/React.createElement(WhoHasAccess, {
     document: document,
     documentType: documentType,
     isOwner: isOwner,
@@ -139,7 +144,8 @@ var ShareDialogCozyToCozy = function ShareDialogCozyToCozy(_ref3) {
     dialogTitleOnShare: SharingTitleFunction({
       documentType: documentType,
       document: document
-    })
+    }),
+    disableGutters: true
   }));
 };
 

package/dist/components/ShareDialogOnlyByLink.js

@@ -1,6 +1,8 @@
+import cx from 'classnames';
 import React from 'react';
 import { Dialog } from 'cozy-ui/transpiled/react/CozyDialogs';
 import Typography from 'cozy-ui/transpiled/react/Typography';
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints';
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n';
 import { default as DumbShareByLink } from './ShareByLink';
 import WhoHasAccess from './WhoHasAccess';
@@ -22,7 +24,11 @@ var ShareDialogOnlyByLink = function ShareDialogOnlyByLink(_ref) {
   var _useI18n = useI18n(),
       t = _useI18n.t;
 
+  var _useBreakpoints = useBreakpoints(),
+      isMobile = _useBreakpoints.isMobile;
+
   return /*#__PURE__*/React.createElement(Dialog, {
+    disableGutters: true,
     disableEnforceFocus: true,
     open: true,
     onClose: onClose,
@@ -30,9 +36,9 @@ var ShareDialogOnlyByLink = function ShareDialogOnlyByLink(_ref) {
       name: document.name || document.attributes.name
     }),
     content: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
-      variant: "h6"
+      variant: "h6",
+      className: cx(isMobile ? 'u-ph-1 u-mt-1' : 'u-ph-2 u-mt-1-half')
     }, t('Share.contacts.whoHasAccess')), /*#__PURE__*/React.createElement(WhoHasAccess, {
-      className: "u-mt-half",
       document: document,
       documentType: documentType,
       isOwner: isOwner,
@@ -43,12 +49,14 @@ var ShareDialogOnlyByLink = function ShareDialogOnlyByLink(_ref) {
       permissions: permissions,
       onUpdateShareLinkPermissions: onUpdateShareLinkPermissions,
       onRevokeLink: onRevokeLink
-    }), /*#__PURE__*/React.createElement(DumbShareByLink, {
+    }), /*#__PURE__*/React.createElement("div", {
+      className: cx('u-mt-half', isMobile ? 'u-ph-1 u-mb-1' : 'u-ph-2 u-mb-1-half')
+    }, /*#__PURE__*/React.createElement(DumbShareByLink, {
       link: link,
       document: document,
       documentType: documentType,
       onEnable: onShareByLink
-    }))
+    })))
   });
 };
 

package/dist/components/ShareDialogTwoStepsConfirmationContainer.js

@@ -293,6 +293,7 @@ var ShareDialogTwoStepsConfirmationContainer = function ShareDialogTwoStepsConfi
   }
 
   return /*#__PURE__*/React.createElement(FixedDialog, {
+    disableGutters: true,
     disableEnforceFocus: true,
     open: true,
     onClose: onClose,

package/dist/components/ShareModal/SharingDetailsModal.js

@@ -1,7 +1,9 @@
+import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Dialog } from 'cozy-ui/transpiled/react/CozyDialogs';
 import Divider from 'cozy-ui/transpiled/react/Divider';
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints';
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n';
 import { getDisplayName } from '../../models';
 var styles = {
@@ -44,7 +46,11 @@ export var SharingDetailsModal = function SharingDetailsModal(_ref) {
       t = _useI18n.t,
       f = _useI18n.f;
 
+  var _useBreakpoints = useBreakpoints(),
+      isMobile = _useBreakpoints.isMobile;
+
   return /*#__PURE__*/React.createElement(Dialog, {
+    disableGutters: true,
     open: true,
     onClose: onClose,
     className: styles['share-modal'],
@@ -52,7 +58,7 @@ export var SharingDetailsModal = function SharingDetailsModal(_ref) {
     content: /*#__PURE__*/React.createElement("div", {
       className: styles['share-modal-content']
     }, /*#__PURE__*/React.createElement("div", {
-      className: styles['share-details']
+      className: cx(styles['share-details'], isMobile ? 'u-ph-1 u-pt-1-half' : 'u-ph-2 u-pt-1')
     }, /*#__PURE__*/React.createElement(OwnerIdentity, {
       name: t("".concat(documentType, ".share.sharedBy"), {
         name: getDisplayName(owner)

package/dist/components/ShareRecipientsInput.js

@@ -1,5 +1,12 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import get from 'lodash/get';
 import PropTypes from 'prop-types';
 import React, { useState, useEffect } from 'react';
 import ShareAutosuggest from './ShareAutosuggest';
@@ -35,7 +42,22 @@ var ShareRecipientsInput = function ShareRecipientsInput(_ref) {
     if (contacts.hasMore || contacts.fetchStatus === 'loading') {
       return contacts.data;
     } else {
-      return [].concat(_toConsumableArray(contacts.data), _toConsumableArray(contactGroups.data));
+      var contactGroupsWithCount = contactGroups.data.map(function (contactGroup) {
+        return _objectSpread(_objectSpread({}, contactGroup), {}, {
+          membersCount: contacts.data.reduce(function (total, contact) {
+            if (get(contact, 'relationships.groups.data', []).map(function (group) {
+              return group._id;
+            }).includes(contactGroup._id)) {
+              return total + 1;
+            }
+
+            return total;
+          }, 0)
+        });
+      }).filter(function (contactGroup) {
+        return contactGroup.membersCount > 0;
+      });
+      return [].concat(_toConsumableArray(contacts.data), _toConsumableArray(contactGroupsWithCount));
     }
   };
 

package/dist/components/ShareRecipientsInput.spec.js

@@ -1,119 +1,210 @@
-import { shallow } from 'enzyme';
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import ShareRecipientsInput from './ShareRecipientsInput';
-describe('ShareRecipientsInput component', function () {
-  it('should match snapshot', function () {
-    var props = {
-      client: '',
-      label: 'Recipients',
-      contacts: {
-        id: 'contacts',
-        fetchStatus: 'loaded',
-        hasMore: false,
-        data: [{
-          id: 'df563cc4-6440',
-          _id: 'df563cc4-6440',
-          _type: 'io.cozy.contacts',
-          name: {
-            givenName: 'Michale',
-            familyName: 'Russel'
-          }
-        }, {
-          id: '5a3b4ccf-c257',
-          _id: '5a3b4ccf-c257',
-          _type: 'io.cozy.contacts',
-          name: {
-            givenName: 'Teagan',
-            familyName: 'Wolf'
-          }
-        }]
-      },
-      contactGroups: {
-        id: 'groups',
-        fetchStatus: 'loaded',
-        hasMore: false,
-        data: [{
-          id: 'fe86af20-c6c5',
-          name: "The Night's Watch",
-          _id: 'fe86af20-c6c5',
-          _type: 'io.cozy.contacts.groups'
-        }, {
-          id: '3d8193ab-2ce4',
-          name: 'The North',
-          _id: '3d8193ab-2ce4',
-          _type: 'io.cozy.contacts.groups'
-        }]
-      },
-      recipients: [{
-        id: '5a3b4ccf-c257',
-        name: {
-          givenName: 'Teagan',
-          familyName: 'Wolf'
-        }
-      }],
-      onPick: jest.fn().mockName('onPick'),
-      onRemove: jest.fn().mockName('onRemove'),
-      placeholder: 'Enter recipients here'
-    };
-    var jsx = /*#__PURE__*/React.createElement(ShareRecipientsInput, props);
-    var wrapper = shallow(jsx);
-    expect(wrapper).toMatchSnapshot();
-  });
-  it('should include groups only if all contacts are loaded', function () {
-    var props = {
-      client: '',
-      label: 'Recipients',
-      contacts: {
-        id: 'contacts',
-        fetchStatus: 'loading',
-        hasMore: false,
-        data: [{
-          id: 'df563cc4-6440',
-          _id: 'df563cc4-6440',
-          _type: 'io.cozy.contacts',
-          name: {
-            givenName: 'Michale',
-            familyName: 'Russel'
-          }
-        }, {
-          id: '5a3b4ccf-c257',
-          _id: '5a3b4ccf-c257',
-          _type: 'io.cozy.contacts',
-          name: {
-            givenName: 'Teagan',
-            familyName: 'Wolf'
-          }
-        }]
-      },
-      contactGroups: {
-        id: 'groups',
-        fetchStatus: 'loaded',
-        hasMore: false,
-        data: [{
-          id: 'fe86af20-c6c5',
-          name: "The Night's Watch",
-          _id: 'fe86af20-c6c5',
-          _type: 'io.cozy.contacts.groups'
-        }, {
-          id: '3d8193ab-2ce4',
-          name: 'The North',
-          _id: '3d8193ab-2ce4',
-          _type: 'io.cozy.contacts.groups'
-        }]
-      },
-      recipients: [{
-        id: '5a3b4ccf-c257',
-        name: {
-          givenName: 'Teagan',
-          familyName: 'Wolf'
+jest.mock('./ShareAutosuggest', function () {
+  return {
+    __esModule: true,
+    default: function _default(_ref) {
+      var contactsAndGroups = _ref.contactsAndGroups;
+      return /*#__PURE__*/React.createElement("ul", null, contactsAndGroups.map(function (contactOrGroup) {
+        if (contactOrGroup._type === 'io.cozy.contacts') {
+          return /*#__PURE__*/React.createElement("li", {
+            key: contactOrGroup.id
+          }, contactOrGroup.name.givenName, " ", contactOrGroup.name.familyName);
+        } else {
+          return /*#__PURE__*/React.createElement("li", {
+            key: contactOrGroup.id
+          }, contactOrGroup.name);
         }
-      }],
-      onPick: jest.fn().mockName('onPick'),
-      onRemove: jest.fn().mockName('onRemove'),
-      placeholder: 'Enter recipients here'
-    };
-    var jsx = /*#__PURE__*/React.createElement(ShareRecipientsInput, props);
-    var wrapper = shallow(jsx);
-    expect(wrapper).toMatchSnapshot();
-  });
+      }));
+    }
+  };
+});
+describe('ShareRecipientsInput component', function () {
+  var setup = function setup(_ref2) {
+    var contacts = _ref2.contacts,
+        contactGroups = _ref2.contactGroups;
+    render( /*#__PURE__*/React.createElement(ShareRecipientsInput, {
+      contacts: contacts,
+      contactGroups: contactGroups,
+      onPick: function onPick() {},
+      onRemove: function onRemove() {},
+      placeholder: "Enter recipients here"
+    }));
+  };
+
+  it('should include groups and contacts when are loaded', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var contacts, contactGroups;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          contacts = {
+            id: 'contacts',
+            fetchStatus: 'loaded',
+            hasMore: false,
+            data: [{
+              id: 'df563cc4-6440',
+              _id: 'df563cc4-6440',
+              _type: 'io.cozy.contacts',
+              name: {
+                givenName: 'Michale',
+                familyName: 'Russel'
+              }
+            }, {
+              id: '5a3b4ccf-c257',
+              _id: '5a3b4ccf-c257',
+              _type: 'io.cozy.contacts',
+              name: {
+                givenName: 'Teagan',
+                familyName: 'Wolf'
+              },
+              relationships: {
+                groups: {
+                  data: [{
+                    _id: 'fe86af20-c6c5',
+                    _type: 'io.cozy.contacts.groups'
+                  }]
+                }
+              }
+            }]
+          };
+          contactGroups = {
+            id: 'groups',
+            fetchStatus: 'loaded',
+            hasMore: false,
+            data: [{
+              id: 'fe86af20-c6c5',
+              name: "The Night's Watch",
+              _id: 'fe86af20-c6c5',
+              _type: 'io.cozy.contacts.groups'
+            }]
+          };
+          setup({
+            contacts: contacts,
+            contactGroups: contactGroups
+          });
+          expect(screen.getByText('Michale Russel')).toBeInTheDocument();
+          expect(screen.getByText('Teagan Wolf')).toBeInTheDocument();
+          expect(screen.getByText("The Night's Watch")).toBeInTheDocument();
+
+        case 6:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  it('should include groups only if all contacts are loaded', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var contacts, contactGroups;
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          contacts = {
+            id: 'contacts',
+            fetchStatus: 'loading',
+            hasMore: false,
+            data: [{
+              id: 'df563cc4-6440',
+              _id: 'df563cc4-6440',
+              _type: 'io.cozy.contacts',
+              name: {
+                givenName: 'Michale',
+                familyName: 'Russel'
+              }
+            }, {
+              id: '5a3b4ccf-c257',
+              _id: '5a3b4ccf-c257',
+              _type: 'io.cozy.contacts',
+              name: {
+                givenName: 'Teagan',
+                familyName: 'Wolf'
+              },
+              relationships: {
+                groups: {
+                  data: [{
+                    _id: 'fe86af20-c6c5',
+                    _type: 'io.cozy.contacts.groups'
+                  }]
+                }
+              }
+            }]
+          };
+          contactGroups = {
+            id: 'groups',
+            fetchStatus: 'loaded',
+            hasMore: false,
+            data: [{
+              id: 'fe86af20-c6c5',
+              name: "The Night's Watch",
+              _id: 'fe86af20-c6c5',
+              _type: 'io.cozy.contacts.groups'
+            }]
+          };
+          setup({
+            contacts: contacts,
+            contactGroups: contactGroups
+          });
+          expect(screen.getByText('Michale Russel')).toBeInTheDocument();
+          expect(screen.getByText('Teagan Wolf')).toBeInTheDocument();
+          expect(screen.queryByText("The Night's Watch")).toBeNull();
+
+        case 6:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })));
+  it('should include groups only if they have more than one member', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var contacts, contactGroups;
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          contacts = {
+            id: 'contacts',
+            fetchStatus: 'loaded',
+            hasMore: false,
+            data: [{
+              id: 'df563cc4-6440',
+              _id: 'df563cc4-6440',
+              _type: 'io.cozy.contacts',
+              name: {
+                givenName: 'Michale',
+                familyName: 'Russel'
+              }
+            }, {
+              id: '5a3b4ccf-c257',
+              _id: '5a3b4ccf-c257',
+              _type: 'io.cozy.contacts',
+              name: {
+                givenName: 'Teagan',
+                familyName: 'Wolf'
+              }
+            }]
+          };
+          contactGroups = {
+            id: 'groups',
+            fetchStatus: 'loaded',
+            hasMore: false,
+            data: [{
+              id: 'fe86af20-c6c5',
+              name: "The Night's Watch",
+              _id: 'fe86af20-c6c5',
+              _type: 'io.cozy.contacts.groups'
+            }]
+          };
+          setup({
+            contacts: contacts,
+            contactGroups: contactGroups
+          });
+          expect(screen.getByText('Michale Russel')).toBeInTheDocument();
+          expect(screen.getByText('Teagan Wolf')).toBeInTheDocument();
+          expect(screen.queryByText("The Night's Watch")).toBeNull();
+
+        case 6:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  })));
 });

package/dist/components/WhoHasAccess.js

@@ -49,9 +49,7 @@ var WhoHasAccess = function WhoHasAccess(_ref2) {
     className: className
   }, /*#__PURE__*/React.createElement(RecipientWaitingForConfirmationAlert, {
     recipientsToBeConfirmed: recipientsToBeConfirmed
-  }), /*#__PURE__*/React.createElement(List, {
-    disablePadding: true
-  }, link && /*#__PURE__*/React.createElement(LinkRecipient, {
+  }), /*#__PURE__*/React.createElement(List, null, link && /*#__PURE__*/React.createElement(LinkRecipient, {
     document: document,
     documentType: documentType,
     onRevoke: onRevoke,

package/jest.config.js

@@ -2,7 +2,8 @@ module.exports = {
   collectCoverageFrom: [
     'src/**/*.{js,jsx}',
     '!**/node_modules/**',
-    '!**/vendor/**'
+    '!**/vendor/**',
+    '!**/*.stories.{js,jsx,ts,tsx}'
   ],
   snapshotSerializers: ['enzyme-to-json/serializer'],
   testPathIgnorePatterns: ['node_modules', 'dist', '__tests__'],

package/locales/en.json

@@ -376,5 +376,18 @@
       "title": "Remove me from sharing",
       "desc": "You keep the content but it won't be updated between your Cozy anymore."
     }
+  },
+  "GroupRecipientDetail": {
+    "subtitle": "Managed by %{ownerName}",
+    "withAccess": {
+      "title": "Access to item"
+    },
+    "withoutAccess": {
+      "title": "No access",
+      "status": {
+        "mail-not-sent": "Invitation failed",
+        "revoked": "Sharing revoked"
+      }
+    }
   }
 }

package/locales/fr.json

@@ -374,5 +374,18 @@
       "title": "Quitter le partage",
       "desc": "Vous conserverez une copie mais vos changements ne seront plus synchronisés."
     }
+  },
+  "GroupRecipientDetail": {
+    "subtitle": "Géré par %{ownerName}",
+    "withAccess": {
+      "title": "Accès à l’élément"
+    },
+    "withoutAccess": {
+      "title": "Aucun accès",
+      "status": {
+        "mail-not-sent": "Echec de l’invitation",
+        "revoked": "Partage révoqué"
+      }
+    }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-sharing",
-  "version": "12.0.0",
+  "version": "12.2.0",
   "description": "Provides sharing login for React applications.",
   "main": "dist/index.js",
   "author": "Cozy",
@@ -71,5 +71,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "ebef29fe4f3f3704c967ebfd2d330d9b95d6e25b"
+  "gitHead": "e48ad9475627e2be13c46e6b7be8a9f82215a392"
 }

package/src/components/ConfirmTrustedRecipientsDialog.jsx

@@ -1,6 +1,9 @@
+import cx from 'classnames'
 import React from 'react'
 
+import List from 'cozy-ui/transpiled/react/List'
 import Typography from 'cozy-ui/transpiled/react/Typography'
+import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import MemberRecipient from './Recipient/MemberRecipient'
@@ -11,24 +14,32 @@ import ShareDialogTwoStepsConfirmationContainer from './ShareDialogTwoStepsConfi
  */
 const SharingContent = ({ recipientsToBeConfirmed, verifyRecipient }) => {
   const { t } = useI18n()
+  const { isMobile } = useBreakpoints()
 
   return (
     <>
-      <Typography variant="body1" className="u-mb-2">
+      <Typography
+        variant="body1"
+        className={cx(
+          'u-mb-half',
+          isMobile ? 'u-ph-1 u-mt-1' : 'u-ph-2 u-mt-1-half'
+        )}
+      >
         {t(`ConfirmRecipientModal.intruction`)}
       </Typography>
-
-      {recipientsToBeConfirmed.map(recipientConfirmationData => {
-        return (
-          <MemberRecipient
-            {...recipientConfirmationData}
-            key={`key_r_${recipientConfirmationData.id}`}
-            isOwner={false}
-            recipientConfirmationData={recipientConfirmationData}
-            verifyRecipient={verifyRecipient}
-          />
-        )
-      })}
+      <List className={isMobile ? 'u-mb-half' : 'u-mb-1'}>
+        {recipientsToBeConfirmed.map(recipientConfirmationData => {
+          return (
+            <MemberRecipient
+              {...recipientConfirmationData}
+              key={`key_r_${recipientConfirmationData.id}`}
+              isOwner={false}
+              recipientConfirmationData={recipientConfirmationData}
+              verifyRecipient={verifyRecipient}
+            />
+          )
+        })}
+      </List>
     </>
   )
 }

package/src/components/ConfirmTrustedRecipientsDialog.stories.jsx

@@ -0,0 +1,45 @@
+import ConfirmTrustedRecipientsDialog from './ConfirmTrustedRecipientsDialog'
+
+const meta = {
+  component: ConfirmTrustedRecipientsDialog,
+  args: {
+    recipientsToBeConfirmed: [
+      {
+        instance: 'https://example.com',
+        isOwner: false,
+        status: 'ready',
+        recipientConfirmationData: null,
+        verifyRecipient: () => {},
+        fadeIn: true,
+        type: 'two-way',
+        onRevoke: () => {},
+        onRevokeSelf: () => {}
+      }
+    ]
+  }
+}
+
+export default meta
+
+export const Default = {
+  name: 'Default',
+  args: {
+    twoStepsConfirmationMethods: {
+      getRecipientsToBeConfirmed: () => [
+        {
+          name: 'John Doe',
+          instance: 'https://example.com',
+          isOwner: false,
+          status: 'ready'
+        },
+        {
+          name: 'Alice Doe',
+          instance: 'https://example.com',
+          isOwner: false,
+          status: 'ready'
+        }
+      ]
+    },
+    verifyRecipient: () => {}
+  }
+}