feat: SharePopover shareUrlTitles new prop

src/components/SharePopover/ShareList/ShareList.tsx

@@ -18,6 +18,8 @@ const isShareListItemComponent = isOfType(ShareListItem);
 export interface ShareListDefaultProps {
     /** share options list */
     shareOptions: ShareOptions[];
+    /** share link titles */
+    shareUrlTitles?: Partial<Record<ShareOptions, string>>;
     /** should show copy button */
     withCopyLink: boolean;
 }
@@ -93,7 +95,7 @@ export class ShareList extends React.PureComponent<ShareListInnerProps, ShareLis
     }
 
     private renderShareOptionsLinks() {
-        const {url, title, text, shareOptions, direction} = this.props;
+        const {url, title, text, shareOptions, direction, shareUrlTitles = {}} = this.props;
         return (
             <div className={b('option')}>
                 {shareOptions.map((type) => (
@@ -105,6 +107,7 @@ export class ShareList extends React.PureComponent<ShareListInnerProps, ShareLis
                         text={text}
                         className={b('link')}
                         direction={direction}
+                        urlTitle={shareUrlTitles[type]}
                     />
                 ))}
             </div>

src/components/SharePopover/ShareListItem/ShareListItem.tsx

@@ -17,6 +17,7 @@ export interface ShareListItemProps extends ShareOptionsData {
     type?: ShareOptions;
     icon?: IconData;
     label?: string;
+    urlTitle?: string;
     className?: string;
     direction?: LayoutDirection;
 
@@ -25,7 +26,7 @@ export interface ShareListItemProps extends ShareOptionsData {
 
 export class ShareListItem extends React.PureComponent<ShareListItemProps> {
     render() {
-        const {type, direction, className, label, getShareLink, ...rest} = this.props;
+        const {type, direction, className, label, getShareLink, urlTitle, ...rest} = this.props;
         const icon = this.props.icon || (type && icons[type]);
         const url = getShareLink?.(rest) ?? (type && this.getShareLink(type));
         const typeModifier = type?.toLowerCase();
@@ -44,6 +45,7 @@ export class ShareListItem extends React.PureComponent<ShareListItemProps> {
                     target="_blank"
                     width="max"
                     className={b(null, className)}
+                    title={urlTitle}
                     extraProps={{'aria-label': i18n('label_share', {name})}}
                 >
                     {icon && (
@@ -61,6 +63,7 @@ export class ShareListItem extends React.PureComponent<ShareListItemProps> {
                 target="_blank"
                 className={b(null, className)}
                 extraProps={{'aria-label': i18n('label_share', {name})}}
+                title={urlTitle}
             >
                 {icon && <Icon data={icon} size={24} className={b('icon', {type: typeModifier})} />}
             </Button>

src/components/SharePopover/SharePopover.tsx

@@ -100,6 +100,7 @@ export const SharePopover = (props: SharePopoverProps) => {
         renderCopy,
         children,
         onClick,
+        shareUrlTitles,
     } = props;
     const [isOpen, setIsOpen] = React.useState(false);
     const tooltipId = useUniqId();
@@ -116,6 +117,7 @@ export const SharePopover = (props: SharePopoverProps) => {
                 copyTitle={copyTitle}
                 copyIcon={copyIcon}
                 renderCopy={renderCopy}
+                shareUrlTitles={shareUrlTitles}
             >
                 {children}
             </ShareList>

src/components/SharePopover/__stories__/Showcase/index.tsx

@@ -25,6 +25,14 @@ export function SharePopoverDemo() {
         ShareOptions.LinkedIn,
         ShareOptions.Mail,
     ];
+    const shareUrlTitles = {
+        [ShareOptions.Telegram]: 'Opens in a new tab',
+        [ShareOptions.Facebook]: 'Opens in a new tab',
+        [ShareOptions.Twitter]: 'Opens in a new tab',
+        [ShareOptions.VK]: 'Opens in a new tab',
+        [ShareOptions.LinkedIn]: 'Opens in a new tab',
+        [ShareOptions.Mail]: 'Opens in a new tab',
+    };
 
     const ShareTitle = <div>Share</div>;
 
@@ -201,6 +209,19 @@ export function SharePopoverDemo() {
                     )}
                 />
             </div>
+
+            <div style={{margin: 16, display: 'flex', alignItems: 'center'}}>
+                <span style={{marginRight: 8}}>Share options with url title</span>
+                <SharePopover
+                    url={url}
+                    title={title}
+                    text={text}
+                    shareOptions={shareOptions}
+                    withCopyLink={false}
+                    openByHover={false}
+                    shareUrlTitles={shareUrlTitles}
+                />
+            </div>
         </div>
     );
 }