feat(ShareTooltip)!: socialNets props renamed to shareOptions (#411)

gravity-ui · Dec 26, 2022 · 1d74d96 · 1d74d96
1 parent ea1d66c
commit 1d74d96
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 61 deletions.
diff --git 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,49 +29,64 @@ Copy button only:
 <ShareTooltip url={url} title={title} text={text} />
 ```
 
-Social networks only:
+Default share options only:
 
 ```js
 <ShareTooltip
   url={url}
   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
   url={url}
   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
@@ -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
@@ -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
@@ -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
@@ -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}