From 1d74d9632e892c6025c71cc4b1158abc868f04da Mon Sep 17 00:00:00 2001
From: Nik Tverd <61203447+niktverd@users.noreply.github.com>
Date: Mon, 26 Dec 2022 21:12:52 +0600
Subject: [PATCH] feat(ShareTooltip)!: socialNets props renamed to shareOptions
 (#411)

---
 src/components/ShareTooltip/README.md         | 33 +++++++++----
 .../ShareTooltip/ShareList/ShareList.scss     | 10 ++--
 .../ShareTooltip/ShareList/ShareList.tsx      | 30 ++++++------
 .../ShareListItem/ShareListItem.tsx           |  6 +--
 src/components/ShareTooltip/ShareTooltip.tsx  |  8 ++--
 .../__stories__/Showcase/index.tsx            | 46 +++++++++----------
 src/components/ShareTooltip/index.ts          |  2 +-
 src/components/ShareTooltip/models.ts         |  2 +-
 8 files changed, 76 insertions(+), 61 deletions(-)

diff --git a/src/components/ShareTooltip/README.md b/src/components/ShareTooltip/README.md
index e616202df..7f45580cf 100644
--- a/src/components/ShareTooltip/README.md
+++ b/src/components/ShareTooltip/README.md
@@ -9,7 +9,7 @@ Sharing component
 | url              | `String`              | ✔        |                  | share link                                                                                                                                                                 |
 | title            | `String`              |          |                  | link title                                                                                                                                                                 |
 | text             | `String`              |          |                  | link text                                                                                                                                                                  |
-| socialNets       | `Array<ShareOptions>` |          | `[]`             | social networks list                                                                                                                                                       |
+| shareOptions     | `Array<ShareOptions>` |          | `[]`             | share options list                                                                                                                                                         |
 | withCopyLink     | `Boolean`             |          | `true`           | display copy button                                                                                                                                                        |
 | useWebShareApi   | `Boolean`             |          | `false`          | [Web Share API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) usage setting. If turned on default share dialog will be shown (if bbrowser supports it) |
 | placement        | `Array`               |          | `['bottom-end']` | tooltip openening direction                                                                                                                                                |
@@ -29,7 +29,7 @@ Copy button only:
 <ShareTooltip url={url} title={title} text={text} />
 ```
 
-Social networks only:
+Default share options only:
 
 ```js
 <ShareTooltip
@@ -37,22 +37,32 @@ Social networks only:
   title={title}
   text={text}
   withCopyLink={false}
-  socialNets={[ShareOptions.Telegram, ShareOptions.Facebook, ShareOptions.Twitter, ShareOptions.VK]}
+  shareOptions={[
+    ShareOptions.Telegram,
+    ShareOptions.Facebook,
+    ShareOptions.Twitter,
+    ShareOptions.VK,
+  ]}
 />
 ```
 
-Social networks and copy button:
+Default share options and copy button:
 
 ```js
 <ShareTooltip
   url={url}
   title={title}
   text={text}
-  socialNets={[ShareOptions.Telegram, ShareOptions.Facebook, ShareOptions.Twitter, ShareOptions.VK]}
+  shareOptions={[
+    ShareOptions.Telegram,
+    ShareOptions.Facebook,
+    ShareOptions.Twitter,
+    ShareOptions.VK,
+  ]}
 />
 ```
 
-With custom social network:
+With custom share option:
 
 ```js
 <ShareTooltip
@@ -60,18 +70,23 @@ With custom social network:
   title={title}
   text={text}
   withCopyLink={false}
-  socialNets={[ShareOptions.Telegram, ShareOptions.Facebook, ShareOptions.Twitter, ShareOptions.VK]}
+  shareOptions={[
+    ShareOptions.Telegram,
+    ShareOptions.Facebook,
+    ShareOptions.Twitter,
+    ShareOptions.VK,
+  ]}
 >
   <ShareList.Item
     icon={LinkedIn}
     url="https://www-linkedin.com/"
     label="LinkedIn"
-    getShareLink={(params: SocialShareData) => params.url}
+    getShareLink={(params: ShareOptionsData) => params.url}
   />
 </ShareTooltip>
 ```
 
-Web Share API setting (social networks can be specified for non supported api case):
+Web Share API setting (share options can be specified for non supported api case):
 
 ```js
 <ShareTooltip url={url} title={title} text={text} useWebShareApi={true} />
diff --git a/src/components/ShareTooltip/ShareList/ShareList.scss b/src/components/ShareTooltip/ShareList/ShareList.scss
index 9080ebda4..a0f49086c 100644
--- a/src/components/ShareTooltip/ShareList/ShareList.scss
+++ b/src/components/ShareTooltip/ShareList/ShareList.scss
@@ -20,7 +20,7 @@ $block: '.#{variables.$ns}share-list';
                 }
             }
 
-            #{$block}__social {
+            #{$block}__option {
                 flex-direction: row;
             }
 
@@ -38,14 +38,14 @@ $block: '.#{variables.$ns}share-list';
                 margin: 8px -2px;
             }
 
-            #{$block}__social {
+            #{$block}__option {
                 flex-direction: column;
                 width: 100%;
             }
         }
     }
 
-    &__social {
+    &__option {
         display: flex;
         align-items: flex-start;
     }
@@ -63,7 +63,7 @@ $block: '.#{variables.$ns}share-list';
         align-items: stretch;
         min-width: 175px;
 
-        &__social {
+        &__option {
             justify-content: space-evenly;
         }
 
@@ -74,7 +74,7 @@ $block: '.#{variables.$ns}share-list';
         }
     }
 
-    &__socials-container {
+    &__options-container {
         display: flex;
 
         width: 100%;
diff --git a/src/components/ShareTooltip/ShareList/ShareList.tsx b/src/components/ShareTooltip/ShareList/ShareList.tsx
index 5e8a0ed35..e8f18cf5f 100644
--- a/src/components/ShareTooltip/ShareList/ShareList.tsx
+++ b/src/components/ShareTooltip/ShareList/ShareList.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {block} from '../../utils/cn';
 
-import {SocialShareData} from '../models';
+import {ShareOptionsData} from '../models';
 import {LayoutDirection, ShareOptions} from '../constants';
 import {ShareListItem} from '../ShareListItem/ShareListItem';
 import {Icon} from '../../Icon';
@@ -18,13 +18,13 @@ import './ShareList.scss';
 const b = block('share-list');
 const isShareListItemComponent = isOfType(ShareListItem);
 export interface ShareListDefaultProps {
-    /** social networks list */
-    socialNets: ShareOptions[];
+    /** share options list */
+    shareOptions: ShareOptions[];
     /** should show copy button */
     withCopyLink: boolean;
 }
 
-export interface ShareListProps extends SocialShareData, Partial<ShareListDefaultProps> {
+export interface ShareListProps extends ShareOptionsData, Partial<ShareListDefaultProps> {
     /** control css class */
     className?: string;
     /** elements location direction */
@@ -43,7 +43,7 @@ export interface ShareListProps extends SocialShareData, Partial<ShareListDefaul
         title: string | React.ReactNode;
         icon: SVGIconData;
     }) => React.ReactElement;
-    /** you can extend available social nets with custom ones using ShareListProps.Item */
+    /** you can extend available share options with custom ones using ShareListProps.Item */
     children?:
         | React.ReactElement<ShareListItem, typeof ShareListItem>
         | React.ReactElement<ShareListItem, typeof ShareListItem>[];
@@ -58,7 +58,7 @@ interface ShareListState {
 
 export class ShareList extends React.PureComponent<ShareListInnerProps, ShareListState> {
     static defaultProps: ShareListDefaultProps = {
-        socialNets: [],
+        shareOptions: [],
         withCopyLink: false,
     };
     static Item = ShareListItem;
@@ -76,29 +76,29 @@ export class ShareList extends React.PureComponent<ShareListInnerProps, ShareLis
     }
 
     render() {
-        const {socialNets, withCopyLink, className, direction, children} = this.props;
-        const hasNets = Array.isArray(socialNets) && socialNets.length > 0;
+        const {shareOptions, withCopyLink, className, direction, children} = this.props;
+        const hasShareOptions = Array.isArray(shareOptions) && shareOptions.length > 0;
         const extensions = React.Children.toArray(children).filter((child) =>
             isShareListItemComponent(child),
         );
 
         return (
             <div className={b({layout: direction}, className)}>
-                <div className={b('socials-container')}>
-                    {hasNets && this.renderSocialShareLinks()}
+                <div className={b('options-container')}>
+                    {hasShareOptions && this.renderShareOptionsLinks()}
                     {Boolean(extensions?.length) && extensions}
                 </div>
-                {hasNets && withCopyLink && <div className={b('separator')} />}
+                {hasShareOptions && withCopyLink && <div className={b('separator')} />}
                 {withCopyLink && this.renderCopyLink()}
             </div>
         );
     }
 
-    private renderSocialShareLinks() {
-        const {url, title, text, socialNets, direction} = this.props;
+    private renderShareOptionsLinks() {
+        const {url, title, text, shareOptions, direction} = this.props;
         return (
-            <div className={b('social')}>
-                {socialNets.map((type) => (
+            <div className={b('option')}>
+                {shareOptions.map((type) => (
                     <ShareListItem
                         key={type}
                         type={type}
diff --git a/src/components/ShareTooltip/ShareListItem/ShareListItem.tsx b/src/components/ShareTooltip/ShareListItem/ShareListItem.tsx
index 1a81926bf..bde166522 100644
--- a/src/components/ShareTooltip/ShareListItem/ShareListItem.tsx
+++ b/src/components/ShareTooltip/ShareListItem/ShareListItem.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {block} from '../../utils/cn';
-import {SocialShareData} from '../models';
+import {ShareOptionsData} from '../models';
 import {Button} from '../../Button';
 import {Icon} from '../../Icon';
 import {LayoutDirection, ShareOptions} from '../constants';
@@ -13,14 +13,14 @@ import './ShareListItem.scss';
 
 const b = block('share-list-item');
 
-export interface ShareListItemProps extends SocialShareData {
+export interface ShareListItemProps extends ShareOptionsData {
     type?: ShareOptions;
     icon?: SVGIconData;
     label?: string;
     className?: string;
     direction?: LayoutDirection;
 
-    getShareLink?: (params: SocialShareData) => string;
+    getShareLink?: (params: ShareOptionsData) => string;
 }
 
 export class ShareListItem extends React.PureComponent<ShareListItemProps> {
diff --git a/src/components/ShareTooltip/ShareTooltip.tsx b/src/components/ShareTooltip/ShareTooltip.tsx
index 8848dfe69..83890ebec 100644
--- a/src/components/ShareTooltip/ShareTooltip.tsx
+++ b/src/components/ShareTooltip/ShareTooltip.tsx
@@ -14,7 +14,7 @@ import './ShareTooltip.scss';
 const b = block('share-tooltip');
 
 interface ShareTooltipDefaultProps extends ShareListDefaultProps {
-    /** Web Share API setting (social networks can be specified for non supported api case) */
+    /** Web Share API setting (share options can be specified for non supported api case) */
     useWebShareApi: boolean;
     /** tooltip opening direction */
     placement: PopupPlacement;
@@ -64,7 +64,7 @@ type ShareTooltipInnerProps = Omit<ShareTooltipProps, keyof ShareTooltipDefaultP
 
 export const shareTooltipDefaultProps: ShareTooltipDefaultProps = {
     iconSize: 16,
-    socialNets: ShareList.defaultProps.socialNets,
+    shareOptions: ShareList.defaultProps.shareOptions,
     withCopyLink: true,
     useWebShareApi: false,
     placement: ['bottom-end'],
@@ -82,7 +82,7 @@ export class ShareTooltip extends React.PureComponent<ShareTooltipInnerProps> {
             url,
             title,
             text,
-            socialNets,
+            shareOptions,
             withCopyLink,
             useWebShareApi,
             placement,
@@ -108,7 +108,7 @@ export class ShareTooltip extends React.PureComponent<ShareTooltipInnerProps> {
                 url={url}
                 title={title}
                 text={text}
-                socialNets={socialNets}
+                shareOptions={shareOptions}
                 withCopyLink={withCopyLink}
                 direction={direction}
                 copyTitle={copyTitle}
diff --git a/src/components/ShareTooltip/__stories__/Showcase/index.tsx b/src/components/ShareTooltip/__stories__/Showcase/index.tsx
index 25c76b5b2..b5ea3aacd 100644
--- a/src/components/ShareTooltip/__stories__/Showcase/index.tsx
+++ b/src/components/ShareTooltip/__stories__/Showcase/index.tsx
@@ -8,7 +8,7 @@ import {ShareTooltip, ShareOptions, ShareList} from '../../../ShareTooltip';
 
 import {LayoutDirection} from '../../constants';
 import {Custom, Cloud, ShareArrowUp} from './icons';
-import {SocialShareData} from 'src/components/ShareTooltip/models';
+import {ShareOptionsData} from 'src/components/ShareTooltip/models';
 
 import './ShareTooltip.scss';
 
@@ -18,8 +18,8 @@ export function ShareTooltipDemo() {
     const url =
         'https://preview.yandexcloud.dev/uikit/?path=/story/components-sharetooltip--default';
     const title = 'Check out this new awesome sharing component';
-    const text = 'Content sharing is not supported in all social networks';
-    const socialNets = [
+    const text = 'Content sharing is not supported in all share options';
+    const shareOptions = [
         ShareOptions.Telegram,
         ShareOptions.Facebook,
         ShareOptions.Twitter,
@@ -46,23 +46,23 @@ export function ShareTooltipDemo() {
             </div>
 
             <div style={{margin: 16, display: 'flex', alignItems: 'center'}}>
-                <span style={{marginRight: 8}}>Socials only</span>
+                <span style={{marginRight: 8}}>Default share options only</span>
                 <ShareTooltip
                     url={url}
                     title={title}
                     text={text}
-                    socialNets={socialNets}
+                    shareOptions={shareOptions}
                     withCopyLink={false}
                 />
             </div>
 
             <div style={{margin: 16, display: 'flex', alignItems: 'center'}}>
-                <span style={{marginRight: 8}}>Custom Social</span>
+                <span style={{marginRight: 8}}>Custom share option</span>
                 <ShareTooltip
                     url={url}
                     title={title}
                     text={text}
-                    socialNets={socialNets}
+                    shareOptions={shareOptions}
                     withCopyLink={false}
                     openByHover={false}
                 >
@@ -70,18 +70,18 @@ export function ShareTooltipDemo() {
                         icon={Custom}
                         url="mailto:example@example.com"
                         label="Custom"
-                        getShareLink={(params: SocialShareData) => params.url}
+                        getShareLink={(params: ShareOptionsData) => params.url}
                     />
                 </ShareTooltip>
             </div>
 
             <div style={{margin: 16, display: 'flex', alignItems: 'center'}}>
-                <span style={{marginRight: 8}}>Custom Social and Copy Link</span>
+                <span style={{marginRight: 8}}>Custom share option and Copy Link</span>
                 <ShareTooltip
                     url={url}
                     title={title}
                     text={text}
-                    socialNets={socialNets}
+                    shareOptions={shareOptions}
                     withCopyLink={true}
                     openByHover={false}
                 >
@@ -89,28 +89,28 @@ export function ShareTooltipDemo() {
                         icon={Custom}
                         url="mailto:example@example.com"
                         label="Custom"
-                        getShareLink={(params: SocialShareData) => params.url}
+                        getShareLink={(params: ShareOptionsData) => params.url}
                     />
                 </ShareTooltip>
             </div>
 
             <div style={{margin: 16, display: 'flex', alignItems: 'center'}}>
-                <span style={{marginRight: 8}}>Socials with copy</span>
-                <ShareTooltip url={url} title={title} text={text} socialNets={socialNets} />
+                <span style={{marginRight: 8}}>Default share options with copy</span>
+                <ShareTooltip url={url} title={title} text={text} shareOptions={shareOptions} />
             </div>
 
             <div style={{margin: 16, display: 'flex', alignItems: 'center'}}>
-                <span style={{marginRight: 8}}>Socials with copy (only URL)</span>
-                <ShareTooltip url={url} socialNets={socialNets} />
+                <span style={{marginRight: 8}}>Share options with copy (only URL)</span>
+                <ShareTooltip url={url} shareOptions={shareOptions} />
             </div>
 
             <div style={{margin: 16, display: 'flex', alignItems: 'center'}}>
-                <span style={{marginRight: 8}}>Socials with copy (open by click)</span>
+                <span style={{marginRight: 8}}>Share options with copy (open by click)</span>
                 <ShareTooltip
                     url={url}
                     title={title}
                     text={text}
-                    socialNets={socialNets}
+                    shareOptions={shareOptions}
                     openByHover={false}
                 />
             </div>
@@ -121,7 +121,7 @@ export function ShareTooltipDemo() {
                     url={url}
                     title={title}
                     text={text}
-                    socialNets={socialNets}
+                    shareOptions={shareOptions}
                     useWebShareApi={true}
                 />
             </div>
@@ -132,7 +132,7 @@ export function ShareTooltipDemo() {
                     url={url}
                     title={title}
                     text={text}
-                    socialNets={socialNets}
+                    shareOptions={shareOptions}
                     direction={LayoutDirection.Column}
                 />
             </div>
@@ -143,7 +143,7 @@ export function ShareTooltipDemo() {
                     url={url}
                     title={title}
                     text={text}
-                    socialNets={socialNets}
+                    shareOptions={shareOptions}
                     customIcon={ShareArrowUp}
                 />
             </div>
@@ -154,7 +154,7 @@ export function ShareTooltipDemo() {
                     url={url}
                     title={title}
                     text={text}
-                    socialNets={socialNets}
+                    shareOptions={shareOptions}
                     customIcon={ShareArrowUp}
                     buttonTitle={ShareTitle}
                 />
@@ -168,7 +168,7 @@ export function ShareTooltipDemo() {
                     url={url}
                     title={title}
                     text={text}
-                    socialNets={socialNets}
+                    shareOptions={shareOptions}
                     customIcon={ShareArrowUp}
                     buttonTitle={ShareTitle}
                     switcherClassName={b('custom-switcher')}
@@ -186,7 +186,7 @@ export function ShareTooltipDemo() {
                     url={url}
                     title={title}
                     text={text}
-                    socialNets={socialNets}
+                    shareOptions={shareOptions}
                     openByHover={false}
                     copyTitle={ShareTitle}
                     copyIcon={Cloud}
diff --git a/src/components/ShareTooltip/index.ts b/src/components/ShareTooltip/index.ts
index fcba6e531..306abf4c2 100644
--- a/src/components/ShareTooltip/index.ts
+++ b/src/components/ShareTooltip/index.ts
@@ -1,4 +1,4 @@
-export {ShareOptions, ShareOptions as ShareSocialNetwork} from './constants';
+export {ShareOptions} from './constants';
 export {ShareList} from './ShareList/ShareList';
 export {ShareTooltip} from './ShareTooltip';
 
diff --git a/src/components/ShareTooltip/models.ts b/src/components/ShareTooltip/models.ts
index c01471370..76a282f04 100644
--- a/src/components/ShareTooltip/models.ts
+++ b/src/components/ShareTooltip/models.ts
@@ -1,4 +1,4 @@
-export interface SocialShareData extends ShareData {
+export interface ShareOptionsData extends ShareData {
     /** sharing link */
     url: string;
 }