feat: Add GroupAvatar into AvatarList

cozy · Mar 25, 2024 · 1c66999 · 1c66999
1 parent ca65315
commit 1c66999
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 23 deletions.
diff --git a/packages/cozy-sharing/src/components/Avatar/AvatarList.jsx b/packages/cozy-sharing/src/components/Avatar/AvatarList.jsx
@@ -6,6 +6,7 @@ import Avatar from 'cozy-ui/transpiled/react/Avatar'
 import LinkIcon from 'cozy-ui/transpiled/react/Icons/Link'
 
 import { ExtraAvatar } from './ExtraAvatar'
+import { GroupAvatar } from './GroupAvatar'
 import { MemberAvatar } from './MemberAvatar'
 import { getDisplayName } from '../../models'
 import styles from '../../styles/recipient.styl'
@@ -88,20 +89,38 @@ const AvatarList = ({
           />
         </span>
       )}
-      {shownRecipients.map((recipient, idx) => (
-        <span
-          data-testid={`AvatarList-avatar${
-            recipient.status === 'owner' ? '-owner' : ''
-          }`}
-          key={idx}
-        >
-          <MemberAvatar
-            recipient={recipient}
-            size={size}
-            className={cx(styles['recipients-avatars--avatar'])}
-          />
-        </span>
-      ))}
+      {shownRecipients.map(recipient => {
+        if (recipient.members) {
+          return (
+            <span
+              data-testid={`AvatarList-avatar${
+                recipient.status === 'owner' ? '-owner' : ''
+              }`}
+              key={recipient.index}
+            >
+              <GroupAvatar
+                size={size}
+                className={cx(styles['recipients-avatars--avatar'])}
+              />
+            </span>
+          )
+        }
+
+        return (
+          <span
+            data-testid={`AvatarList-avatar${
+              recipient.status === 'owner' ? '-owner' : ''
+            }`}
+            key={recipient.index}
+          >
+            <MemberAvatar
+              recipient={recipient}
+              size={size}
+              className={cx(styles['recipients-avatars--avatar'])}
+            />
+          </span>
+        )
+      })}
     </div>
   )
 }

diff --git a/packages/cozy-sharing/src/components/Avatar/AvatarList.spec.jsx b/packages/cozy-sharing/src/components/Avatar/AvatarList.spec.jsx
@@ -14,15 +14,17 @@ const mockRecipients = new Array(MAX_DISPLAYED_RECIPIENTS - 1)
   .fill(
     {
       status: 'owner',
-      public_name: 'cozy'
+      public_name: 'cozy',
+      index: 'sharing-123-member-0'
     },
     0,
     1
   )
   .fill(
     {
       status: 'pending',
-      name: 'Mitch Young'
+      name: 'Mitch Young',
+      index: 'sharing-123-member-1'
     },
     1
   )
@@ -31,15 +33,18 @@ const mockMoreRecipientsThanMaxDisplayed = [
   ...mockRecipients,
   {
     status: 'mail-not-send',
-    name: 'Lyn Webster'
+    name: 'Lyn Webster',
+    index: 'sharing-123-member-2'
   },
   {
     status: 'ready',
-    name: 'Richelle Young'
+    name: 'Richelle Young',
+    index: 'sharing-123-member-3'
   },
   {
     status: 'ready',
-    name: 'John Connor'
+    name: 'John Connor',
+    index: 'sharing-123-member-4'
   }
 ]
 
@@ -120,7 +125,7 @@ describe('AvatarList', () => {
 })
 
 describe('excludeMeAsOwnerFromRecipients', () => {
-  test('excludeMeAsOwnerFromRecipients behavior', () => {
+  it('excludeMeAsOwnerFromRecipients behavior', () => {
     const recipients = [
       {
         status: 'owner',

diff --git a/packages/cozy-sharing/src/components/Avatar/AvatarList.stories.jsx b/packages/cozy-sharing/src/components/Avatar/AvatarList.stories.jsx
@@ -4,7 +4,7 @@ import { recipients } from '../../../.storybook/fixtures/recipients'
 const meta = {
   component: AvatarList,
   args: {
-    recipients: [...recipients, ...recipients]
+    recipients: [...recipients]
   }
 }
 
@@ -14,3 +14,21 @@ export const Default = {
   name: 'Default',
   args: {}
 }
+
+export const WithGroups = {
+  name: 'With groups',
+  args: {
+    recipients: [
+      ...recipients,
+      {
+        name: 'Group 1',
+        type: 'group',
+        members: [
+          {
+            public_name: 'Alice'
+          }
+        ]
+      }
+    ]
+  }
+}
diff --git a/packages/cozy-sharing/src/components/Avatar/GroupAvatar.jsx b/packages/cozy-sharing/src/components/Avatar/GroupAvatar.jsx
@@ -3,8 +3,8 @@ import React from 'react'
 import Avatar from 'cozy-ui/transpiled/react/Avatar'
 import TeamIcon from 'cozy-ui/transpiled/react/Icons/Team'
 
-const GroupAvatar = ({ size }) => {
-  return <Avatar icon={TeamIcon} size={size} />
+const GroupAvatar = ({ size, className }) => {
+  return <Avatar icon={TeamIcon} size={size} className={className} />
 }
 
 export { GroupAvatar }