cozy-sharing 16.7.0 → 16.9.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [16.9.0](https://github.com/cozy/cozy-libs/compare/cozy-sharing@16.8.0...cozy-sharing@16.9.0) (2024-12-04)
+
+
+### Features
+
+* **Sharing:** Change style of PublicBanner wording ([ddc8ce3](https://github.com/cozy/cozy-libs/commit/ddc8ce3cfcb1e3cfbdf17f5a7b8d9c8da997b5b0))
+
+
+
+
+
+# [16.8.0](https://github.com/cozy/cozy-libs/compare/cozy-sharing@16.7.0...cozy-sharing@16.8.0) (2024-12-02)
+
+
+### Features
+
+* **Sharing:** Expose too new component to get recipients ([a5836f7](https://github.com/cozy/cozy-libs/commit/a5836f7ea3634de44689b4e6c34eeac9b5fcb731))
+
+
+
+
+
 # [16.7.0](https://github.com/cozy/cozy-libs/compare/cozy-sharing@16.6.1...cozy-sharing@16.7.0) (2024-11-26)
 
 

package/dist/components/Recipient/LinkRecipientLite.js

@@ -0,0 +1,61 @@
+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';
+var styles = {
+  "recipient": "recipient__recipient___2DmZI",
+  "recipients-list-light": "recipient__recipients-list-light___Vq4op",
+  "recipient-idents": "recipient__recipient-idents___3s7rw",
+  "recipient-status-icon": "recipient__recipient-status-icon___-liGw",
+  "recipient-user": "recipient__recipient-user___1THIU",
+  "recipient-details": "recipient__recipient-details___2fZfc",
+  "avatar": "recipient__avatar___2LnIV",
+  "link-recipient-icon-circle": "recipient__link-recipient-icon-circle___3ZTU-",
+  "recipients-avatars": "recipient__recipients-avatars___1npjD",
+  "--interactive": "recipient__--interactive___160Bp",
+  "recipients-avatars--link": "recipient__recipients-avatars--link___1qeON",
+  "recipients-avatars--plusX": "recipient__recipients-avatars--plusX___3-6_l",
+  "recipients-avatars--avatar": "recipient__recipients-avatars--avatar___-owjC",
+  "spin": "recipient__spin___2tYv3",
+  "shake": "recipient__shake___TGyPp"
+};
+
+var LinkRecipientLite = function LinkRecipientLite(_ref) {
+  var permissions = _ref.permissions,
+      link = _ref.link;
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  if (!link) return null;
+  var isReadOnlyPermissions = checkIsReadOnlyPermissions(permissions);
+  return /*#__PURE__*/React.createElement(ListItem, {
+    size: "small",
+    ellipsis: true
+  }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(Circle, {
+    size: "small",
+    className: styles['link-recipient-icon-circle']
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: LinkIcon
+  }))), /*#__PURE__*/React.createElement(ListItemText, {
+    primary: t('Share.recipients.anyoneWithTheLink'),
+    secondary: link
+  }), /*#__PURE__*/React.createElement(Typography, {
+    className: "u-flex-shrink-0",
+    variant: "body2"
+  }, t("Share.type.".concat(isReadOnlyPermissions ? 'one-way' : 'two-way')).toLowerCase()));
+};
+
+LinkRecipientLite.propTypes = {
+  permissions: PropTypes.array,
+  link: PropTypes.string
+};
+export default withLocales(LinkRecipientLite);

package/dist/components/Recipient/MemberRecipientLite.js

@@ -0,0 +1,56 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["recipient", "isOwner"];
+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';
+
+var MemberRecipientLite = function MemberRecipientLite(_ref) {
+  var _recipient$type;
+
+  var recipient = _ref.recipient,
+      isOwner = _ref.isOwner,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var _useI18n = useI18n(),
+      t = _useI18n.t;
+
+  var client = useClient();
+  var isMe = isOwner && recipient.status === 'owner' || recipient.instance === client.options.uri;
+  return /*#__PURE__*/React.createElement(ListItem, {
+    size: "small",
+    ellipsis: true
+  }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(MemberAvatar, _extends({
+    size: "small",
+    recipient: recipient
+  }, props))), /*#__PURE__*/React.createElement(ListItemText, {
+    primary: isMe ? t('Share.recipients.you') : getDisplayName(recipient, t(DEFAULT_DISPLAY_NAME)),
+    secondary: /*#__PURE__*/React.createElement(MemberRecipientStatus, {
+      status: recipient.status,
+      isMe: isMe,
+      instance: recipient.instance,
+      typographyProps: {
+        noWrap: true
+      }
+    })
+  }), /*#__PURE__*/React.createElement(Typography, {
+    className: "u-flex-shrink-0",
+    variant: "body2"
+  }, isMe ? t("Share.status.".concat(recipient.status)).toLowerCase() : t("Share.type.".concat((_recipient$type = recipient.type) !== null && _recipient$type !== void 0 ? _recipient$type : 'one-way')).toLowerCase()));
+};
+
+MemberRecipientLite.propTypes = {
+  recipient: PropTypes.object,
+  isOwner: PropTypes.bool
+};
+export default withLocales(MemberRecipientLite);

package/dist/components/Recipient/MemberRecipientStatus.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import Icon from 'cozy-ui/transpiled/react/Icon';
 import EyeIcon from 'cozy-ui/transpiled/react/Icons/Eye';
@@ -27,7 +28,8 @@ var styles = {
 var MemberRecipientStatus = function MemberRecipientStatus(_ref) {
   var status = _ref.status,
       isMe = _ref.isMe,
-      instance = _ref.instance;
+      instance = _ref.instance,
+      typographyProps = _ref.typographyProps;
 
   var _useI18n = useI18n(),
       t = _useI18n.t;
@@ -53,10 +55,10 @@ var MemberRecipientStatus = function MemberRecipientStatus(_ref) {
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: icon,
     size: 10
-  })), /*#__PURE__*/React.createElement(Bd, null, /*#__PURE__*/React.createElement(Typography, {
+  })), /*#__PURE__*/React.createElement(Bd, null, /*#__PURE__*/React.createElement(Typography, _extends({
     variant: "caption",
     color: "textSecondary"
-  }, text)));
+  }, typographyProps), text)));
 };
 
 export default MemberRecipientStatus;

package/dist/components/SharingBanner/components/PublicBanner.js

@@ -1,3 +1,4 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import PropTypes from 'prop-types';
 import React from 'react';
 import snarkdown from 'snarkdown';
@@ -29,13 +30,18 @@ var PublicBannerCozyToCozyContent = function PublicBannerCozyToCozyContent(_ref)
     image: avatarURL
   }));
   var beginning = withAvatar.split('<img src');
-  var translated = beginning[1].split('alt="avatar">');
+
+  var _beginning$1$split$1$ = beginning[1].split('<strong>')[1].split('</strong>'),
+      _beginning$1$split$1$2 = _slicedToArray(_beginning$1$split$1$, 2),
+      userBoldName = _beginning$1$split$1$2[0],
+      ending = _beginning$1$split$1$2[1];
+
   return /*#__PURE__*/React.createElement("span", {
     className: styles['bannermarkdown']
   }, beginning[0], /*#__PURE__*/React.createElement("img", {
     src: avatarURL,
     alt: "avatar"
-  }), translated[1]);
+  }), " ", /*#__PURE__*/React.createElement("strong", null, userBoldName), ending);
 };
 
 PublicBannerCozyToCozyContent.propTypes = {

package/dist/components/SharingBanner/components/PublicBanner.spec.js

@@ -18,7 +18,7 @@ describe('PublicBanner', function () {
     useI18n.mockReturnValue({
       t: function t(localeToTranslate, options) {
         if (localeToTranslate === 'Share.banner.shared_from') {
-          return "Shared from ![avatar](".concat(options.image, ") ").concat(options.name, "'s cozy.");
+          return "Shared from ![avatar](".concat(options.image, ") <strong>").concat(options.name, "</strong>'s cozy.");
         }
 
         return localeToTranslate;
@@ -42,6 +42,6 @@ describe('PublicBanner', function () {
         container = _render.container; // Then
 
 
-    expect(container.querySelector('.bannermarkdown').innerHTML).toEqual("Shared from <img src=\"http://cozy.localhost:8080/public/avatar?fallback=initials\" alt=\"avatar\"> &lt;a href=\"https://evil.com\"&gt;Click me!&lt;/a&gt;'s cozy.");
+    expect(container.querySelector('.bannermarkdown').innerHTML).toEqual("Shared from <img src=\"http://cozy.localhost:8080/public/avatar?fallback=initials\" alt=\"avatar\"> <strong>&lt;a href=\"https://evil.com\"&gt;Click me!&lt;/a&gt;</strong>'s cozy.");
   });
 });

package/dist/index.js

@@ -10,6 +10,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';

package/dist/styles/publicBanner.styl

@@ -1,7 +1,6 @@
 @require 'components/avatar'
 @require 'components/circle'
 .bannermarkdown
-    font-weight bold
     display inline-block
     img
         @extend $avatar

package/dist/stylesheet.css

@@ -549,7 +549,6 @@ input[type=text] {
   color: var(--white);
 }
 .publicBanner__bannermarkdown___1dR1E {
-  font-weight: bold;
   display: inline-block;
 }
 .publicBanner__bannermarkdown___1dR1E img {

package/locales/en.json

@@ -56,7 +56,7 @@
     },
     "loadingError": "Loading error",
     "banner": {
-      "shared_from": "The items below are displayed from ![avatar](%{image}) %{name}'s Cozy. You can add a link to this share in your Cozy",
+      "shared_from": "The items below are displayed from ![avatar](%{image}) **%{name}**'s Cozy. You can add a link to this share in your Cozy",
       "whats_cozy": "Cozy is a secure digital home for all your data, hosted in France - ",
       "know_more": "More information",
       "sync_to_mine": "Synchronise in my Cozy",

package/locales/fr.json

@@ -56,7 +56,7 @@
     },
     "loadingError": "Erreur de chargement",
     "banner": {
-      "shared_from": "Les éléments ci-dessous sont affichés depuis le Cozy de ![avatar](%{image}) %{name}. Vous pouvez ajouter un lien vers ce partage dans votre Cozy.",
+      "shared_from": "Les éléments ci-dessous sont affichés depuis le Cozy de ![avatar](%{image}) **%{name}**. Vous pouvez ajouter un lien vers ce partage dans votre Cozy.",
       "whats_cozy": "Cozy est un domicile numérique sécurisé pour toutes vos données, hébergé en France - ",
       "know_more": "En savoir plus",
       "sync_to_mine": "Synchroniser dans mon Cozy",

package/package.json

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

package/src/components/Recipient/LinkRecipient.jsx

@@ -27,7 +27,7 @@ const LinkRecipient = props => {
     <RecipientConfirm
       recipientConfirmationData={recipientConfirmationData}
       verifyRecipient={verifyRecipient}
-    ></RecipientConfirm>
+    />
   ) : (
     <LinkRecipientPermissions {...props} className="u-flex-shrink-0" />
   )

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

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

package/src/components/Recipient/MemberRecipientStatus.jsx

@@ -10,7 +10,7 @@ import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import styles from '../../styles/recipient.styl'
 
-const MemberRecipientStatus = ({ status, isMe, instance }) => {
+const MemberRecipientStatus = ({ status, isMe, instance, typographyProps }) => {
   const { t } = useI18n()
 
   const isSendingEmail = !isMe && status === 'mail-not-sent'
@@ -37,7 +37,11 @@ const MemberRecipientStatus = ({ status, isMe, instance }) => {
         <Icon icon={icon} size={10} />
       </Img>
       <Bd>
-        <Typography variant="caption" color="textSecondary">
+        <Typography
+          variant="caption"
+          color="textSecondary"
+          {...typographyProps}
+        >
           {text}
         </Typography>
       </Bd>

package/src/components/SharingBanner/components/PublicBanner.jsx

@@ -28,13 +28,15 @@ const PublicBannerCozyToCozyContent = ({ sharing }) => {
     })
   )
   const beginning = withAvatar.split('<img src')
-  const translated = beginning[1].split('alt="avatar">')
+  const [userBoldName, ending] = beginning[1]
+    .split('<strong>')[1]
+    .split('</strong>')
 
   return (
     <span className={styles['bannermarkdown']}>
       {beginning[0]}
-      <img src={avatarURL} alt="avatar" />
-      {translated[1]}
+      <img src={avatarURL} alt="avatar" /> <strong>{userBoldName}</strong>
+      {ending}
     </span>
   )
 }

package/src/components/SharingBanner/components/PublicBanner.spec.jsx

@@ -21,7 +21,7 @@ describe('PublicBanner', () => {
     useI18n.mockReturnValue({
       t: (localeToTranslate, options) => {
         if (localeToTranslate === 'Share.banner.shared_from') {
-          return `Shared from ![avatar](${options.image}) ${options.name}'s cozy.`
+          return `Shared from ![avatar](${options.image}) <strong>${options.name}</strong>'s cozy.`
         }
         return localeToTranslate
       }
@@ -41,7 +41,7 @@ describe('PublicBanner', () => {
 
     // Then
     expect(container.querySelector('.bannermarkdown').innerHTML).toEqual(
-      `Shared from <img src="http://cozy.localhost:8080/public/avatar?fallback=initials" alt="avatar"> &lt;a href="https://evil.com"&gt;Click me!&lt;/a&gt;'s cozy.`
+      `Shared from <img src="http://cozy.localhost:8080/public/avatar?fallback=initials" alt="avatar"> <strong>&lt;a href="https://evil.com"&gt;Click me!&lt;/a&gt;</strong>'s cozy.`
     )
   })
 })

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

package/src/styles/publicBanner.styl

@@ -1,7 +1,6 @@
 @require 'components/avatar'
 @require 'components/circle'
 .bannermarkdown
-    font-weight bold
     display inline-block
     img
         @extend $avatar