cozy-sharing 12.2.0 → 12.3.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [12.3.0](https://github.com/cozy/cozy-libs/compare/cozy-sharing@12.2.0...cozy-sharing@12.3.0) (2024-03-25)
+
+
+### Features
+
+* Add GroupAvatar into AvatarList ([1c66999](https://github.com/cozy/cozy-libs/commit/1c669995b08d84a3aa8d6dd950fa4abf22566395))
+
+
+
+
+
 # [12.2.0](https://github.com/cozy/cozy-libs/compare/cozy-sharing@12.1.0...cozy-sharing@12.2.0) (2024-03-22)
 
 

package/dist/components/Avatar/AvatarList.js

@@ -5,6 +5,7 @@ import { useClient } from 'cozy-client';
 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';
 var styles = {
@@ -83,10 +84,20 @@ var AvatarList = function AvatarList(_ref2) {
     className: styles['recipients-avatars--plusX'],
     extraRecipients: extraRecipients,
     size: size
-  })), shownRecipients.map(function (recipient, idx) {
+  })), shownRecipients.map(function (recipient) {
+    if (recipient.members) {
+      return /*#__PURE__*/React.createElement("span", {
+        "data-testid": "AvatarList-avatar".concat(recipient.status === 'owner' ? '-owner' : ''),
+        key: recipient.index
+      }, /*#__PURE__*/React.createElement(GroupAvatar, {
+        size: size,
+        className: cx(styles['recipients-avatars--avatar'])
+      }));
+    }
+
     return /*#__PURE__*/React.createElement("span", {
       "data-testid": "AvatarList-avatar".concat(recipient.status === 'owner' ? '-owner' : ''),
-      key: idx
+      key: recipient.index
     }, /*#__PURE__*/React.createElement(MemberAvatar, {
       recipient: recipient,
       size: size,

package/dist/components/Avatar/AvatarList.spec.js

@@ -9,20 +9,25 @@ import { AvatarList, MAX_DISPLAYED_RECIPIENTS, excludeMeAsOwnerFromRecipients }
 import AppLike from '../../../test/AppLike';
 var 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);
 var mockMoreRecipientsThanMaxDisplayed = [].concat(_toConsumableArray(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'
 }]);
 describe('AvatarList', function () {
   var client = createMockClient({});
@@ -103,7 +108,7 @@ describe('AvatarList', function () {
   });
 });
 describe('excludeMeAsOwnerFromRecipients', function () {
-  test('excludeMeAsOwnerFromRecipients behavior', function () {
+  it('excludeMeAsOwnerFromRecipients behavior', function () {
     var recipients = [{
       status: 'owner',
       instance: 'http://foo1.cozy.bar'

package/dist/components/Avatar/AvatarList.stories.js

@@ -4,11 +4,23 @@ import { recipients } from '../../../.storybook/fixtures/recipients';
 var meta = {
   component: AvatarList,
   args: {
-    recipients: [].concat(_toConsumableArray(recipients), _toConsumableArray(recipients))
+    recipients: _toConsumableArray(recipients)
   }
 };
 export default meta;
 export var Default = {
   name: 'Default',
   args: {}
+};
+export var WithGroups = {
+  name: 'With groups',
+  args: {
+    recipients: [].concat(_toConsumableArray(recipients), [{
+      name: 'Group 1',
+      type: 'group',
+      members: [{
+        public_name: 'Alice'
+      }]
+    }])
+  }
 };

package/dist/components/Avatar/GroupAvatar.js

@@ -3,10 +3,12 @@ import Avatar from 'cozy-ui/transpiled/react/Avatar';
 import TeamIcon from 'cozy-ui/transpiled/react/Icons/Team';
 
 var GroupAvatar = function GroupAvatar(_ref) {
-  var size = _ref.size;
+  var size = _ref.size,
+      className = _ref.className;
   return /*#__PURE__*/React.createElement(Avatar, {
     icon: TeamIcon,
-    size: size
+    size: size,
+    className: className
   });
 };
 

package/package.json

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

package/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>
   )
 }

package/src/components/Avatar/AvatarList.spec.jsx

@@ -14,7 +14,8 @@ const mockRecipients = new Array(MAX_DISPLAYED_RECIPIENTS - 1)
   .fill(
     {
       status: 'owner',
-      public_name: 'cozy'
+      public_name: 'cozy',
+      index: 'sharing-123-member-0'
     },
     0,
     1
@@ -22,7 +23,8 @@ const mockRecipients = new Array(MAX_DISPLAYED_RECIPIENTS - 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',

package/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'
+          }
+        ]
+      }
+    ]
+  }
+}

package/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 }