cozy-sharing 10.4.1 → 11.0.1

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

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

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/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.1",
+  "version": "11.0.1",
   "description": "Provides sharing login for React applications.",
   "main": "dist/index.js",
   "author": "Cozy",
@@ -23,7 +23,9 @@
     "lint": "cd .. && yarn eslint --ext js,jsx packages/cozy-sharing",
     "start": "yarn build --watch",
     "watch": "yarn run start",
-    "watch:doc:react": "(cd ../.. && TARGET=cozy-sharing yarn watch:doc:react)"
+    "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",
@@ -37,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",
@@ -48,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",
@@ -61,5 +71,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "d891debd980b3b73435e77f0c1ea878cfea67037"
+  "gitHead": "0ac36e39dfef446f11daaa97925814447f7d8201"
 }

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 }

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

@@ -3,10 +3,11 @@ import React from 'react'
 
 import { createMockClient } from 'cozy-client'
 
-import RecipientsAvatars, {
+import {
+  AvatarList,
   MAX_DISPLAYED_RECIPIENTS,
   excludeMeAsOwnerFromRecipients
-} from './RecipientsAvatars'
+} from './AvatarList'
 import AppLike from '../../../test/AppLike'
 
 const mockRecipients = new Array(MAX_DISPLAYED_RECIPIENTS - 1)
@@ -42,7 +43,7 @@ const mockMoreRecipientsThanMaxDisplayed = [
   }
 ]
 
-describe('RecipientsAvatars', () => {
+describe('AvatarList', () => {
   const client = createMockClient({})
 
   const setup = ({
@@ -54,7 +55,7 @@ describe('RecipientsAvatars', () => {
   }) => {
     return render(
       <AppLike client={client}>
-        <RecipientsAvatars
+        <AvatarList
           recipients={recipients}
           onClick={onClick}
           isOwner={isOwner}
@@ -70,19 +71,19 @@ describe('RecipientsAvatars', () => {
       link: true
     })
 
-    expect(getByTestId('recipientsAvatars-link')).toBeTruthy()
+    expect(getByTestId('AvatarList-link')).toBeTruthy()
   })
 
   it('should not render link icon if a link is not generated', () => {
     const { queryByTestId } = setup({})
 
-    expect(queryByTestId('recipientsAvatars-link')).toBeNull()
+    expect(queryByTestId('AvatarList-link')).toBeNull()
   })
 
   it('should hide me as owner by default', () => {
     const { queryByTestId } = setup({})
 
-    expect(queryByTestId('recipientsAvatars-avatar-owner')).toBeNull()
+    expect(queryByTestId('AvatarList-avatar-owner')).toBeNull()
   })
 
   it('should show me as owner if required', () => {
@@ -90,7 +91,7 @@ describe('RecipientsAvatars', () => {
       showMeAsOwner: true
     })
 
-    expect(getByTestId('recipientsAvatars-avatar-owner')).toBeTruthy()
+    expect(getByTestId('AvatarList-avatar-owner')).toBeTruthy()
   })
 
   it('should show a +X icon with the correct number if there is more avatars than expected', () => {
@@ -102,7 +103,7 @@ describe('RecipientsAvatars', () => {
     const delta =
       mockMoreRecipientsThanMaxDisplayed.length - MAX_DISPLAYED_RECIPIENTS
 
-    expect(getByTestId('recipientsAvatars-plusX')).toBeTruthy()
+    expect(getByTestId('AvatarList-plusX')).toBeTruthy()
     expect(getByText(`+${delta}`)).toBeTruthy()
   })
 
@@ -113,8 +114,8 @@ describe('RecipientsAvatars', () => {
       link: true
     })
 
-    expect(getByTestId('recipientsAvatars-plusX')).toBeTruthy()
-    expect(getByTestId('recipientsAvatars-link')).toBeTruthy()
+    expect(getByTestId('AvatarList-plusX')).toBeTruthy()
+    expect(getByTestId('AvatarList-link')).toBeTruthy()
   })
 })