cozy-sharing 10.4.0 → 11.0.0

package/dist/components/Recipient/{Recipient.js → MemberRecipient.js}

@@ -10,15 +10,15 @@ import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon';
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText';
 import Typography from 'cozy-ui/transpiled/react/Typography';
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n';
-import RecipientAvatar from './RecipientAvatar';
+import MemberRecipientPermissions from './MemberRecipientPermissions';
+import MemberRecipientStatus from './MemberRecipientStatus';
 import RecipientConfirm from './RecipientConfirm';
-import RecipientPermissions from './RecipientPermissions';
-import RecipientStatus from './RecipientStatus';
 import { FADE_IN_DURATION } from '../../helpers/recipients';
 import { getDisplayName } from '../../models';
+import { MemberAvatar } from '../Avatar/MemberAvatar';
 var DEFAULT_DISPLAY_NAME = 'Share.contacts.defaultDisplayName';
 
-var Recipient = function Recipient(props) {
+var MemberRecipient = function MemberRecipient(props) {
   var _useI18n = useI18n(),
       t = _useI18n.t;
 
@@ -38,7 +38,7 @@ var Recipient = function Recipient(props) {
   var RightPart = recipientConfirmationData ? /*#__PURE__*/React.createElement(RecipientConfirm, {
     recipientConfirmationData: recipientConfirmationData,
     verifyRecipient: verifyRecipient
-  }) : /*#__PURE__*/React.createElement(RecipientPermissions, _extends({}, props, {
+  }) : /*#__PURE__*/React.createElement(MemberRecipientPermissions, _extends({}, props, {
     className: "u-flex-shrink-0"
   }));
   return /*#__PURE__*/React.createElement(Fade, {
@@ -46,7 +46,7 @@ var Recipient = function Recipient(props) {
     timeout: fadeIn ? FADE_IN_DURATION : 0
   }, /*#__PURE__*/React.createElement(ListItem, {
     disableGutters: true
-  }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(RecipientAvatar, {
+  }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(MemberAvatar, {
     size: "small",
     recipient: props
   })), /*#__PURE__*/React.createElement(ListItemText, {
@@ -54,7 +54,7 @@ var Recipient = function Recipient(props) {
       className: "u-ellipsis",
       variant: "body1"
     }, isMe ? t('Share.recipients.you') : name),
-    secondary: /*#__PURE__*/React.createElement(RecipientStatus, {
+    secondary: /*#__PURE__*/React.createElement(MemberRecipientStatus, {
       status: status,
       isMe: isMe,
       instance: instance
@@ -62,11 +62,11 @@ var Recipient = function Recipient(props) {
   }), RightPart));
 };
 
-Recipient.propTypes = {
+MemberRecipient.propTypes = {
   instance: PropTypes.string,
   isOwner: PropTypes.bool,
   status: PropTypes.string,
   recipientConfirmationData: PropTypes.object,
   verifyRecipient: PropTypes.func
 };
-export default Recipient;
+export default MemberRecipient;

package/dist/components/Recipient/{Recipient.spec.js → MemberRecipient.spec.js}

@@ -3,9 +3,9 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { render, fireEvent } from '@testing-library/react';
 import React from 'react';
 import { createMockClient } from 'cozy-client';
-import Recipient from './Recipient';
+import MemberRecipient from './MemberRecipient';
 import AppLike from '../../../test/AppLike';
-describe('Recipient component', function () {
+describe('MemberRecipient component', function () {
   var client = createMockClient({});
   client.options = {
     uri: 'foo.mycozy.cloud'
@@ -14,7 +14,7 @@ describe('Recipient component', function () {
   var setup = function setup(props) {
     return render( /*#__PURE__*/React.createElement(AppLike, {
       client: client
-    }, /*#__PURE__*/React.createElement(Recipient, props)));
+    }, /*#__PURE__*/React.createElement(MemberRecipient, props)));
   };
 
   var createRangeBackup;

package/dist/components/Recipient/MemberRecipient.stories.js

@@ -0,0 +1,39 @@
+import MemberRecipient from './MemberRecipient';
+var meta = {
+  component: MemberRecipient,
+  args: {
+    instance: 'https://example.com',
+    isOwner: false,
+    status: 'ready',
+    recipientConfirmationData: null,
+    verifyRecipient: function verifyRecipient() {},
+    fadeIn: true
+  },
+  argTypes: {
+    status: {
+      control: 'select',
+      options: ['ready', 'mail-not-sent', 'pending', 'seen', 'owner'],
+      defaultValue: 'ready'
+    }
+  }
+};
+export default meta;
+export var Default = {
+  name: 'Default',
+  args: {}
+};
+export var Owner = {
+  name: 'Owner',
+  args: {
+    isOwner: true,
+    status: 'owner'
+  }
+};
+export var RecipientConfirm = {
+  name: 'RecipientConfirm',
+  args: {
+    recipientConfirmationData: {
+      email: 'test'
+    }
+  }
+};

package/dist/components/Recipient/{RecipientPermissions.js → MemberRecipientPermissions.js}

@@ -13,7 +13,7 @@ import Typography from 'cozy-ui/transpiled/react/Typography';
 import ActionMenu, { ActionMenuItem } from 'cozy-ui/transpiled/react/deprecated/ActionMenu';
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n';
 
-var RecipientPermissions = function RecipientPermissions(_ref) {
+var MemberRecipientPermissions = function MemberRecipientPermissions(_ref) {
   var isOwner = _ref.isOwner,
       status = _ref.status,
       instance = _ref.instance,
@@ -121,4 +121,4 @@ var RecipientPermissions = function RecipientPermissions(_ref) {
   }, isOwner ? t("".concat(documentType, ".share.revoke.desc")) : t("".concat(documentType, ".share.revokeSelf.desc")))))));
 };
 
-export default RecipientPermissions;
+export default MemberRecipientPermissions;

package/dist/components/Recipient/MemberRecipientPermissions.stories.js

@@ -0,0 +1,10 @@
+import MemberRecipientPermissions from './MemberRecipientPermissions';
+var meta = {
+  component: MemberRecipientPermissions,
+  args: {}
+};
+export default meta;
+export var Default = {
+  name: 'Default',
+  args: {}
+};

package/dist/components/Recipient/{RecipientStatus.js → MemberRecipientStatus.js}

@@ -24,7 +24,7 @@ var styles = {
   "shake": "recipient__shake___TGyPp"
 };
 
-var RecipientStatus = function RecipientStatus(_ref) {
+var MemberRecipientStatus = function MemberRecipientStatus(_ref) {
   var status = _ref.status,
       isMe = _ref.isMe,
       instance = _ref.instance;
@@ -59,4 +59,4 @@ var RecipientStatus = function RecipientStatus(_ref) {
   }, text)));
 };
 
-export default RecipientStatus;
+export default MemberRecipientStatus;

package/dist/components/Recipient/MemberRecipientStatus.stories.js

@@ -0,0 +1,10 @@
+import MemberRecipientStatus from './MemberRecipientStatus';
+var meta = {
+  component: MemberRecipientStatus,
+  args: {}
+};
+export default meta;
+export var Default = {
+  name: 'Default',
+  args: {}
+};

package/dist/components/Recipient/OwnerRecipient.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import MemberRecipient from './MemberRecipient';
 import OwnerRecipientDefault from './OwnerRecipientDefault';
-import Recipient from './Recipient';
 
 var OwnerRecipient = function OwnerRecipient(_ref) {
   var recipients = _ref.recipients;
@@ -10,7 +10,7 @@ var OwnerRecipient = function OwnerRecipient(_ref) {
   });
 
   if (ownerRecipient) {
-    return /*#__PURE__*/React.createElement(Recipient, ownerRecipient);
+    return /*#__PURE__*/React.createElement(MemberRecipient, ownerRecipient);
   }
 
   return /*#__PURE__*/React.createElement(OwnerRecipientDefault, null);

package/dist/components/Recipient/OwnerRecipient.stories.js

@@ -0,0 +1,13 @@
+import OwnerRecipient from './OwnerRecipient';
+import { recipients } from '../../../.storybook/fixtures/recipients';
+var meta = {
+  component: OwnerRecipient,
+  args: {
+    recipients: recipients
+  }
+};
+export default meta;
+export var Default = {
+  name: 'Default',
+  args: {}
+};

package/dist/components/Recipient/OwnerRecipientDefault.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useClient, useQuery, hasQueryBeenLoaded } from 'cozy-client';
-import Recipient from './Recipient';
+import MemberRecipient from './MemberRecipient';
 import { buildInstanceSettingsQuery } from '../../queries/queries';
 
 var OwnerRecipientDefault = function OwnerRecipientDefault() {
@@ -9,7 +9,7 @@ var OwnerRecipientDefault = function OwnerRecipientDefault() {
   var client = useClient();
   var instanceSettingsQuery = buildInstanceSettingsQuery();
   var instanceSettingsResult = useQuery(instanceSettingsQuery.definition, instanceSettingsQuery.options);
-  return hasQueryBeenLoaded(instanceSettingsResult) && /*#__PURE__*/React.createElement(Recipient, {
+  return hasQueryBeenLoaded(instanceSettingsResult) && /*#__PURE__*/React.createElement(MemberRecipient, {
     isOwner: true,
     status: "owner",
     instance: client.options.uri,

package/dist/components/Recipient/OwnerRecipientDefault.stories.js

@@ -0,0 +1,10 @@
+import OwnerRecipientDefault from './OwnerRecipientDefault';
+var meta = {
+  component: OwnerRecipientDefault,
+  args: {}
+};
+export default meta;
+export var Default = {
+  name: 'Default',
+  args: {}
+};

package/dist/components/Recipient/RecipientConfirm.js

@@ -40,7 +40,7 @@ var RecipientConfirm = function RecipientConfirm(_ref) {
     verifyRecipient(recipientConfirmationData);
   };
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+  return /*#__PURE__*/React.createElement(Button, {
     style: {
       position: 'initial'
     } // fix z-index bug on iOS when under a BottomDrawer due to relative position
@@ -49,7 +49,7 @@ var RecipientConfirm = function RecipientConfirm(_ref) {
     className: modalStyles['aligned-dropdown-button'],
     onClick: verify,
     label: t("Share.twoStepsConfirmation.verify")
-  }));
+  });
 };
 
 RecipientConfirm.propTypes = {

package/dist/components/Recipient/RecipientConfirm.stories.js

@@ -0,0 +1,10 @@
+import RecipientConfirm from './RecipientConfirm';
+var meta = {
+  component: RecipientConfirm,
+  args: {}
+};
+export default meta;
+export var Default = {
+  name: 'Default',
+  args: {}
+};

package/dist/components/Recipient/RecipientList.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import Recipient from './Recipient';
+import MemberRecipient from './MemberRecipient';
 import { usePrevious } from '../../helpers/hooks';
 import { filterAndReworkRecipients } from '../../helpers/recipients';
 
@@ -19,7 +19,7 @@ var RecipientList = function RecipientList(_ref) {
     var recipientConfirmationData = recipientsToBeConfirmed.find(function (user) {
       return user.email === recipient.email;
     });
-    return /*#__PURE__*/React.createElement(Recipient, _extends({}, recipient, {
+    return /*#__PURE__*/React.createElement(MemberRecipient, _extends({}, recipient, {
       key: "key_r_".concat(recipient.index),
       isOwner: isOwner,
       document: document,

package/dist/components/Recipient/RecipientList.stories.js

@@ -0,0 +1,26 @@
+import { RecipientList } from './RecipientList';
+import { recipients } from '../../../.storybook/fixtures/recipients';
+var meta = {
+  component: RecipientList,
+  args: {
+    recipients: recipients,
+    recipientsToBeConfirmed: [],
+    isOwner: false,
+    onRevoke: function onRevoke() {},
+    onRevokeSelf: function onRevokeSelf() {},
+    verifyRecipient: function verifyRecipient() {
+      return true;
+    }
+  }
+};
+export default meta;
+export var Default = {
+  name: 'Default',
+  args: {}
+};
+export var Owner = {
+  name: 'Owner',
+  args: {
+    isOwner: true
+  }
+};

package/dist/components/ShareModal/SharingDetailsModal.js

@@ -27,7 +27,7 @@ var styles = {
   "share-details-perm": "share__share-details-perm___3HjxK",
   "share-details-perm-desc": "share__share-details-perm-desc___3HyHu"
 };
-import OwnerIdentity from '../Recipient/OwnerIdentity';
+import OwnerIdentity from '../Identity/OwnerIdentity';
 import WhoHasAccess from '../WhoHasAccess';
 export var SharingDetailsModal = function SharingDetailsModal(_ref) {
   var onClose = _ref.onClose,

package/dist/components/WhoHasAccessLight.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import cx from 'classnames';
 import React from 'react';
-import RecipientPlusX from './Recipient/RecipientPlusX';
-import RecipientWithoutStatus from './Recipient/RecipientWithoutStatus';
+import { ExtraIdentity } from './Identity/ExtraIdentity';
+import { MemberIdentity } from './Identity/MemberIdentity';
 var styles = {
   "recipient": "recipient__recipient___2DmZI",
   "recipients-list-light": "recipient__recipients-list-light___Vq4op",
@@ -28,10 +28,10 @@ var WhoHasAccessLight = function WhoHasAccessLight(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: cx(styles['recipients-list-light'], className)
   }, recipients.slice(0, MAX_DISPLAYED_RECIPIENTS).map(function (recipient, index) {
-    return /*#__PURE__*/React.createElement(RecipientWithoutStatus, _extends({}, recipient, {
+    return /*#__PURE__*/React.createElement(MemberIdentity, _extends({}, recipient, {
       key: "key_recipient__".concat(index)
     }));
-  }), recipients.length > MAX_DISPLAYED_RECIPIENTS && /*#__PURE__*/React.createElement(RecipientPlusX, {
+  }), recipients.length > MAX_DISPLAYED_RECIPIENTS && /*#__PURE__*/React.createElement(ExtraIdentity, {
     extraRecipients: recipients.slice(MAX_DISPLAYED_RECIPIENTS)
   }));
 };

package/dist/helpers/files.js

@@ -1,5 +1,15 @@
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
+
+/**
+ * Fetches the file paths for the given files.
+ * Should not be used for directories.
+ *
+ * @param {Object} client - The cozy-client instance.
+ * @param {string} doctype - The type of document.
+ * @param {Array} files - The array of files.
+ * @returns {Promise<Array>} - The array of file paths.
+ */
 export var fetchFilesPaths = /*#__PURE__*/function () {
   var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(client, doctype, files) {
     var parentDirIds, parentDirs, filePaths;

package/dist/hooks/useFetchDocumentPath.js

@@ -13,30 +13,40 @@ export var useFetchDocumentPath = function useFetchDocumentPath(client, document
     ;
 
     _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      var path;
+      var isDirectory, path;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             _context.prev = 0;
-            _context.next = 3;
+            isDirectory = document.type === 'directory';
+
+            if (!isDirectory) {
+              _context.next = 4;
+              break;
+            }
+
+            return _context.abrupt("return", setDocumentPath(document.path));
+
+          case 4:
+            _context.next = 6;
             return fetchFilesPaths(client, document._type, [document]);
 
-          case 3:
+          case 6:
             path = _context.sent;
             setDocumentPath(path[0]); // eslint-disable-next-line
 
-            _context.next = 9;
+            _context.next = 12;
             break;
 
-          case 7:
-            _context.prev = 7;
+          case 10:
+            _context.prev = 10;
             _context.t0 = _context["catch"](0);
 
-          case 9:
+          case 12:
           case "end":
             return _context.stop();
         }
-      }, _callee, null, [[0, 7]]);
+      }, _callee, null, [[0, 10]]);
     }))();
   }, [client, document]);
   return documentPath;

package/dist/stylesheet.css

@@ -1,13 +1,3 @@
-/*  imported from CozyPassFingerprintDialogContent.styl  */
-
-.CozyPassFingerprintDialogContent__cozy-pass-fingerprint-modal__fingerprint___3qIGs {
-  padding: 16px;
-  margin: 24px 0;
-  text-align: center;
-}
-.CozyPassFingerprintDialogContent__cozy-pass-fingerprint-modal__fingerprint___3qIGs p {
-  color: var(--secondaryColor);
-}
 /*  imported from recipient.styl  */
 
 @-moz-keyframes recipient__spin___2tYv3 {
@@ -181,6 +171,16 @@
 .recipient__recipients-avatars--avatar___-owjC {
   margin-right: -0.6rem;
 }
+/*  imported from CozyPassFingerprintDialogContent.styl  */
+
+.CozyPassFingerprintDialogContent__cozy-pass-fingerprint-modal__fingerprint___3qIGs {
+  padding: 16px;
+  margin: 24px 0;
+  text-align: center;
+}
+.CozyPassFingerprintDialogContent__cozy-pass-fingerprint-modal__fingerprint___3qIGs p {
+  color: var(--secondaryColor);
+}
 /*  imported from share.styl  */
 
 .share__share-modal-content___1iqEq .share__coz-form___1ICST {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-sharing",
-  "version": "10.4.0",
+  "version": "11.0.0",
   "description": "Provides sharing login for React applications.",
   "main": "dist/index.js",
   "author": "Cozy",
@@ -21,8 +21,11 @@
     "prepublishOnly": "yarn build",
     "test": "env NODE_ENV=test jest --env=jest-environment-jsdom-sixteen",
     "lint": "cd .. && yarn eslint --ext js,jsx packages/cozy-sharing",
-    "watch": "yarn build --watch",
-    "watch:doc:react": "(cd ../.. && TARGET=cozy-sharing yarn watch:doc:react)"
+    "start": "yarn build --watch",
+    "watch": "yarn run start",
+    "watch:doc:react": "(cd ../.. && TARGET=cozy-sharing yarn watch:doc:react)",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "@cozy/minilog": "^1.0.0",
@@ -36,6 +39,13 @@
   },
   "devDependencies": {
     "@babel/core": "7.16.12",
+    "@storybook/addon-essentials": "7.6.0",
+    "@storybook/addon-interactions": "7.6.0",
+    "@storybook/addon-links": "7.6.0",
+    "@storybook/blocks": "7.6.0",
+    "@storybook/react": "7.6.0",
+    "@storybook/react-webpack5": "7.6.0",
+    "@storybook/testing-library": "0.2.2",
     "babel-jest": "26.6.3",
     "babel-plugin-css-modules-transform": "1.6.2",
     "babel-plugin-inline-react-svg": "1.1.2",
@@ -47,7 +57,8 @@
     "jest": "26.6.3",
     "react": "16.12.0",
     "react-dom": "16.13.0",
-    "react-router": "^5.0.1"
+    "react-router": "^5.0.1",
+    "storybook": "7.6.0"
   },
   "peerDependencies": {
     "cozy-client": ">=45.14.0",
@@ -60,5 +71,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "e3e6b6ca27bfcc2c61893eeb763c43f926308630"
+  "gitHead": "b98230a4b8974af2699385bbe8edf5635a46b4a3"
 }

package/src/SharedRecipients.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import RecipientsAvatars from './components/Recipient/RecipientsAvatars'
+import { AvatarList } from './components/Avatar/AvatarList'
 import SharingContext from './context'
 import withLocales from './hoc/withLocales'
 
@@ -8,7 +8,7 @@ export const SharedRecipients = withLocales(({ docId, onClick, ...rest }) => (
   <SharingContext.Consumer>
     {({ byDocId, getRecipients, getSharingLink, isOwner } = {}) =>
       !byDocId || !byDocId[docId] ? null : (
-        <RecipientsAvatars
+        <AvatarList
           recipients={getRecipients(docId)}
           link={getSharingLink(docId) !== null}
           onClick={onClick}

package/src/SharedStatus.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import RecipientsAvatars from './components/Recipient/RecipientsAvatars'
+import { AvatarList } from './components/Avatar/AvatarList'
 import SharingContext from './context'
 import withLocales from './hoc/withLocales'
 
@@ -11,7 +11,7 @@ export const SharedStatus = withLocales(
         !byDocId || !byDocId[docId] ? (
           <span className={className + ' ' + noSharedClassName}>—</span>
         ) : (
-          <RecipientsAvatars
+          <AvatarList
             className={className}
             recipients={getRecipients(docId)}
             link={getSharingLink(docId) !== null}

package/src/SharingOwnerAvatar.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import RecipientAvatar from './components/Recipient/RecipientAvatar'
+import { MemberAvatar } from './components/Avatar/MemberAvatar'
 import SharingContext from './context'
 import withLocales from './hoc/withLocales'
 
@@ -8,7 +8,7 @@ export const SharingOwnerAvatar = withLocales(({ docId, ...rest }) => (
   <SharingContext.Consumer>
     {({ byDocId, getOwner } = {}) => {
       return !byDocId || !byDocId[docId] ? null : (
-        <RecipientAvatar recipient={getOwner(docId)} {...rest} />
+        <MemberAvatar recipient={getOwner(docId)} {...rest} />
       )
     }}
   </SharingContext.Consumer>

package/src/components/{Recipient/RecipientsAvatars.jsx → Avatar/AvatarList.jsx}

@@ -5,8 +5,8 @@ import { useClient } from 'cozy-client'
 import Avatar from 'cozy-ui/transpiled/react/Avatar'
 import LinkIcon from 'cozy-ui/transpiled/react/Icons/Link'
 
-import AvatarPlusX from './AvatarPlusX'
-import RecipientAvatar from './RecipientAvatar'
+import { ExtraAvatar } from './ExtraAvatar'
+import { MemberAvatar } from './MemberAvatar'
 import { getDisplayName } from '../../models'
 import styles from '../../styles/recipient.styl'
 
@@ -33,7 +33,7 @@ export const excludeMeAsOwnerFromRecipients = ({
   })
 }
 
-const RecipientsAvatars = ({
+const AvatarList = ({
   recipients,
   link,
   size,
@@ -52,7 +52,8 @@ const RecipientsAvatars = ({
       }).reverse()
   // we reverse the recipients array because we use `flex-direction: row-reverse` to display them correctly
 
-  const isAvatarPlusX = filteredRecipients.length > MAX_DISPLAYED_RECIPIENTS
+  const hasExtraRecipients =
+    filteredRecipients.length > MAX_DISPLAYED_RECIPIENTS
   const extraRecipients = filteredRecipients
     .slice(MAX_DISPLAYED_RECIPIENTS)
     .map(recipient => getDisplayName(recipient))
@@ -70,7 +71,7 @@ const RecipientsAvatars = ({
       onClick={onClick}
     >
       {link && (
-        <span data-testid="recipientsAvatars-link">
+        <span data-testid="AvatarList-link">
           <Avatar
             className={styles['recipients-avatars--link']}
             icon={LinkIcon}
@@ -78,9 +79,9 @@ const RecipientsAvatars = ({
           />
         </span>
       )}
-      {isAvatarPlusX && (
-        <span data-testid="recipientsAvatars-plusX">
-          <AvatarPlusX
+      {hasExtraRecipients && (
+        <span data-testid="AvatarList-plusX">
+          <ExtraAvatar
             className={styles['recipients-avatars--plusX']}
             extraRecipients={extraRecipients}
             size={size}
@@ -89,12 +90,12 @@ const RecipientsAvatars = ({
       )}
       {shownRecipients.map((recipient, idx) => (
         <span
-          data-testid={`recipientsAvatars-avatar${
+          data-testid={`AvatarList-avatar${
             recipient.status === 'owner' ? '-owner' : ''
           }`}
           key={idx}
         >
-          <RecipientAvatar
+          <MemberAvatar
             recipient={recipient}
             size={size}
             className={cx(styles['recipients-avatars--avatar'])}
@@ -105,4 +106,4 @@ const RecipientsAvatars = ({
   )
 }
 
-export default RecipientsAvatars
+export { AvatarList }