feat(Sharing): Expose too new component to get recipients

These are simplifications of existing components. Instead of making
the existing ones more complex with new props and new cases, I
preferred to isolate them and have only the bare essentials.

packages/cozy-sharing/src/components/Recipient/LinkRecipientLite.jsx

@@ -0,0 +1,49 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import Circle from 'cozy-ui/transpiled/react/Circle'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import LinkIcon from 'cozy-ui/transpiled/react/Icons/Link'
+import ListItem from 'cozy-ui/transpiled/react/ListItem'
+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 { checkIsReadOnlyPermissions } from '../../helpers/permissions'
+import withLocales from '../../hoc/withLocales'
+import styles from '../../styles/recipient.styl'
+
+const LinkRecipientLite = ({ permissions, link }) => {
+  const { t } = useI18n()
+
+  if (!link) return null
+
+  const isReadOnlyPermissions = checkIsReadOnlyPermissions(permissions)
+
+  return (
+    <ListItem size="small" ellipsis>
+      <ListItemIcon>
+        <Circle size="small" className={styles['link-recipient-icon-circle']}>
+          <Icon icon={LinkIcon} />
+        </Circle>
+      </ListItemIcon>
+      <ListItemText
+        primary={t('Share.recipients.anyoneWithTheLink')}
+        secondary={link}
+      />
+      <Typography className="u-flex-shrink-0" variant="body2">
+        {t(
+          `Share.type.${isReadOnlyPermissions ? 'one-way' : 'two-way'}`
+        ).toLowerCase()}
+      </Typography>
+    </ListItem>
+  )
+}
+
+LinkRecipientLite.propTypes = {
+  permissions: PropTypes.array,
+  link: PropTypes.string
+}
+
+export default withLocales(LinkRecipientLite)

packages/cozy-sharing/src/components/Recipient/MemberRecipientLite.jsx

@@ -0,0 +1,59 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import { useClient } from 'cozy-client'
+import ListItem from 'cozy-ui/transpiled/react/ListItem'
+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 MemberRecipientStatus from './MemberRecipientStatus'
+import { DEFAULT_DISPLAY_NAME } from '../../helpers/recipients'
+import withLocales from '../../hoc/withLocales'
+import { getDisplayName } from '../../models'
+import { MemberAvatar } from '../Avatar/MemberAvatar'
+
+const MemberRecipientLite = ({ recipient, isOwner, ...props }) => {
+  const { t } = useI18n()
+  const client = useClient()
+
+  const isMe =
+    (isOwner && recipient.status === 'owner') ||
+    recipient.instance === client.options.uri
+
+  return (
+    <ListItem size="small" ellipsis>
+      <ListItemIcon>
+        <MemberAvatar size="small" recipient={recipient} {...props} />
+      </ListItemIcon>
+      <ListItemText
+        primary={
+          isMe
+            ? t('Share.recipients.you')
+            : getDisplayName(recipient, t(DEFAULT_DISPLAY_NAME))
+        }
+        secondary={
+          <MemberRecipientStatus
+            status={recipient.status}
+            isMe={isMe}
+            instance={recipient.instance}
+            typographyProps={{ noWrap: true }}
+          />
+        }
+      />
+      <Typography className="u-flex-shrink-0" variant="body2">
+        {isMe
+          ? t(`Share.status.${recipient.status}`).toLowerCase()
+          : t(`Share.type.${recipient.type ?? 'one-way'}`).toLowerCase()}
+      </Typography>
+    </ListItem>
+  )
+}
+
+MemberRecipientLite.propTypes = {
+  recipient: PropTypes.object,
+  isOwner: PropTypes.bool
+}
+
+export default withLocales(MemberRecipientLite)

packages/cozy-sharing/src/index.jsx

@@ -14,6 +14,8 @@ export { SharedStatus } from './SharedStatus'
 export { SharedBadge } from './SharedBadge'
 export { SharingOwnerAvatar } from './SharingOwnerAvatar'
 export { SharedRecipients } from './SharedRecipients'
+export { default as MemberRecipientLite } from './components/Recipient/MemberRecipientLite'
+export { default as LinkRecipientLite } from './components/Recipient/LinkRecipientLite'
 export { SharedRecipientsList } from './SharedRecipientsList'
 export { ShareButton } from './ShareButton'
 export { ShareModal } from './components/ShareModal/ShareModal'