diff --git a/CODEOWNERS b/CODEOWNERS index c1a18abca3..44019eacd4 100644 --- a/CODEOWNERS +++ b/CODEOWNERS @@ -21,7 +21,6 @@ /src/components/Popup @amje /src/components/Portal @amje /src/components/Progress @mfyodorov -/src/components/PromoSheet @Avol-V /src/components/Select @korvin89 /src/components/Sheet @korvin89 /src/components/Skeleton @amje diff --git a/src/components/HelpPopover/HelpPopover.tsx b/src/components/HelpPopover/HelpPopover.tsx deleted file mode 100644 index 06233beb1a..0000000000 --- a/src/components/HelpPopover/HelpPopover.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import React from 'react'; - -import {Icon} from '../Icon'; -import {Popover} from '../Popover'; -import type {PopoverProps} from '../Popover'; -import type {QAProps} from '../types'; -import {block} from '../utils/cn'; - -import {QuestionMarkIcon} from './QuestionMarkIcon'; - -const b = block('help-popover'); - -/** - * @see {@link https://github.com/microsoft/TypeScript/issues/28339} - */ -type DistributiveOmit = T extends unknown ? Omit : never; - -export type HelpPopoverProps = DistributiveOmit & QAProps; - -export function HelpPopover(props: HelpPopoverProps) { - return ( - - - - ); -} diff --git a/src/components/HelpPopover/QuestionMarkIcon.tsx b/src/components/HelpPopover/QuestionMarkIcon.tsx deleted file mode 100644 index 74588f9149..0000000000 --- a/src/components/HelpPopover/QuestionMarkIcon.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; - -import {a11yHiddenSvgProps} from '../utils/svg'; - -export function QuestionMarkIcon(props: React.SVGProps) { - return ( - - - - - ); -} diff --git a/src/components/HelpPopover/README.md b/src/components/HelpPopover/README.md deleted file mode 100644 index a47f951bea..0000000000 --- a/src/components/HelpPopover/README.md +++ /dev/null @@ -1,58 +0,0 @@ -## HelpPopover - -Component to display popover with tips - -### PropTypes - -| Property | Type | Required | Values | Default | Description | -| :------------ | :---------- | :------- | :---------------- | :------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------- | -| theme | `String` | | `info`, `special` | `info` | Appearance | -| className | `String` | | | | Control class name | -| placement | `Array` | | | [`right`, `bottom`] | Allowed popover positions | -| autoclosable | `Boolean` | | | `true` | Close popover when pointer is outside of control | -| delayClosing | `Number` | | | `300` | Timeout before closing popover (see `autoclosable`) | -| title | `String` | | | | Popover title | -| content | `ReactNode` | | | | Popover content | -| htmlContent | `String` | | | | Render HTML via `dangerouslySetInnerHTML` | -| links | `Array` | | | [] | Links below content, could be
`{ text: 'Link 1', href: 'https://example.com'}` or
`{ text: 'Link 2', onClick: () => onLinkClick() }` | -| tooltipButton | `Object` | | | | Render button with this value
`{ text: 'Button', onClick: () => onClick() }` | -| offset | `Object` | | | `{ left: 4 }` | Control popup toggle position offset
`{ top: 0, left: 0 }` | - -### Examples - -Component with rendered raw html (use `content` for plain text) and close on mouse leave after timeout set by `delayClosing`: - -```js - alert('Lorem ipsum onClick'), - }, - ]} - to={['right', 'bottom']} - title="Simple tooltip" - htmlContent={ - 'Lorem ipsum dolor sit amet, at scelerisque suspendisse' - } - tooltipButton={{ - text: 'Actions', - onClick: () => console.log('just action happened'), - }} -/> -``` - -Popover with JSX component as content: - -```js -} /> -``` diff --git a/src/components/HelpPopover/__stories__/HelpPopover.stories.tsx b/src/components/HelpPopover/__stories__/HelpPopover.stories.tsx deleted file mode 100644 index ff2b61891d..0000000000 --- a/src/components/HelpPopover/__stories__/HelpPopover.stories.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react'; - -import type {Meta, StoryFn} from '@storybook/react'; - -import {HelpPopover} from '../HelpPopover'; -import type {HelpPopoverProps} from '../HelpPopover'; - -export default { - title: 'Components/HelpPopover', - component: HelpPopover, -} as Meta; - -const DefaultTemplate: StoryFn = (args) => ; -export const Default = DefaultTemplate.bind({}); -Default.args = { - content: 'Some content', -}; diff --git a/src/components/HelpPopover/__tests__/HelpPopover.test.tsx b/src/components/HelpPopover/__tests__/HelpPopover.test.tsx deleted file mode 100644 index d6661ed659..0000000000 --- a/src/components/HelpPopover/__tests__/HelpPopover.test.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import React from 'react'; - -import {act, render, screen} from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; - -import {setupTimersMock} from '../../../../test-utils/setupTimersMock'; -import {PopoverBehavior} from '../../Popover'; -import {delayByBehavior} from '../../Popover/config'; -import {HelpPopover} from '../HelpPopover'; - -const qaId = 'help-popover-component'; - -function waitForTooltipOpenedStateChange(shouldOpen?: boolean) { - jest.advanceTimersByTime(delayByBehavior[PopoverBehavior.Delayed][shouldOpen ? 0 : 1]); -} - -setupTimersMock(); - -describe('HelpPopover', () => { - test('render popup when hover help icon', async () => { - const title = 'HelpPopover title'; - - render(); - - const icon = screen.getByTestId(qaId); - expect(icon).toBeVisible(); - - userEvent.hover(icon); - - act(() => { - waitForTooltipOpenedStateChange(true); - }); - - const popoverTitle = await screen.findByText(title); - expect(popoverTitle).toBeVisible(); - }); -}); diff --git a/src/components/HelpPopover/index.ts b/src/components/HelpPopover/index.ts deleted file mode 100644 index c15feeeba8..0000000000 --- a/src/components/HelpPopover/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './HelpPopover'; diff --git a/src/components/PromoSheet/PromoSheet.scss b/src/components/PromoSheet/PromoSheet.scss deleted file mode 100644 index c32c5001c3..0000000000 --- a/src/components/PromoSheet/PromoSheet.scss +++ /dev/null @@ -1,68 +0,0 @@ -@use '../variables'; - -$block: '.#{variables.$ns}promo-sheet'; - -#{$block} { - &__content[class] { - width: auto; - padding: var(--yc-promo-sheet-padding); - margin: 0 var(--yc-promo-sheet-margin) var(--yc-promo-sheet-margin); - - color: var(--yc-promo-sheet-foreground); - background: var(--yc-promo-sheet-background); - border-radius: var(--yc-promo-sheet-border-radius); - } - - &__header { - position: relative; - - padding: 0 20px 0 0; - margin: 0 0 var(--yc-promo-sheet-header-margin); - } - - &__title { - margin: 0; - - font-size: var(--g-text-header-1-font-size); - line-height: var(--g-text-header-1-line-height); - } - - &__close-button { - position: absolute; - top: calc(12px * -1); - right: calc(12px * -1); - } - - &__message { - margin: 0 0 var(--yc-promo-sheet-message-margin); - - font-size: var(--g-text-body-3-font-size); - line-height: var(--g-text-body-3-line-height); - } - - &__image-container { - margin-bottom: var(--yc-promo-sheet-image-margin); - } - - &__image { - display: block; - - width: 100%; - height: auto; - } - - &__action-button { - display: block; - } -} - -.g-root { - --yc-promo-sheet-margin: 8px; - --yc-promo-sheet-padding: 20px; - --yc-promo-sheet-border-radius: 12px; - --yc-promo-sheet-header-margin: 12px; - --yc-promo-sheet-message-margin: 16px; - --yc-promo-sheet-image-margin: 12px; - --yc-promo-sheet-foreground: var(--g-color-text-light-primary); - --yc-promo-sheet-background: var(--g-color-base-brand); -} diff --git a/src/components/PromoSheet/PromoSheet.tsx b/src/components/PromoSheet/PromoSheet.tsx deleted file mode 100644 index befee21fe4..0000000000 --- a/src/components/PromoSheet/PromoSheet.tsx +++ /dev/null @@ -1,148 +0,0 @@ -import React from 'react'; - -import {Xmark} from '@gravity-ui/icons'; - -import {Button} from '../Button'; -import type {ButtonProps} from '../Button'; -import {Icon} from '../Icon'; -import {Sheet} from '../Sheet'; -import type {SheetProps} from '../Sheet'; -import {block} from '../utils/cn'; - -import './PromoSheet.scss'; - -const cn = block('promo-sheet'); - -export type PromoSheetProps = { - title: string; - message: string; - actionText: string; - closeText: string; - actionHref?: string; - imageSrc?: string; - className?: string; - contentClassName?: string; - imageContainerClassName?: string; - imageClassName?: string; - onActionClick?: ButtonProps['onClick']; - onClose?: SheetProps['onClose']; -}; - -type ImageSizes = { - width?: number; - height?: number; -}; - -export function PromoSheet({ - title, - message, - actionText, - closeText, - actionHref, - imageSrc, - className, - contentClassName, - imageContainerClassName, - imageClassName, - onActionClick, - onClose, -}: PromoSheetProps) { - const [visible, setVisible] = React.useState(true); - const [loaded, setLoaded] = React.useState(!imageSrc); - const [imageSizes, setImageSizes] = React.useState(); - - const handleActionClick = React.useCallback>( - (event) => { - setVisible(false); - onActionClick?.(event); - }, - [onActionClick], - ); - - const handleCloseClick = React.useCallback>(() => { - setVisible(false); - }, []); - - const closeButtonExtraProps = React.useMemo( - () => ({ - 'aria-label': closeText, - }), - [closeText], - ); - - React.useEffect(() => { - if (!imageSrc) { - setLoaded(true); - - return; - } - - const image = new Image(); - - image.onload = () => { - setImageSizes({ - width: image.naturalWidth, - height: image.naturalHeight, - }); - setLoaded(true); - image.onload = null; - image.onerror = null; - }; - image.onerror = () => { - setImageSizes(undefined); - setLoaded(true); - image.onload = null; - image.onerror = null; - }; - - image.src = imageSrc; - }, [imageSrc]); - - return ( - -
-

{title}

- -
-

{message}

- {imageSrc && ( -
- -
- )} -
- -
- - ); -} diff --git a/src/components/PromoSheet/README.md b/src/components/PromoSheet/README.md deleted file mode 100644 index 970efe91a8..0000000000 --- a/src/components/PromoSheet/README.md +++ /dev/null @@ -1,3 +0,0 @@ -# PromoSheet - -A component for displaying a promo dialog informing the user about a new feature in the service's mobile application. diff --git a/src/components/PromoSheet/__stories__/PromoSheet.stories.tsx b/src/components/PromoSheet/__stories__/PromoSheet.stories.tsx deleted file mode 100644 index 50170617d8..0000000000 --- a/src/components/PromoSheet/__stories__/PromoSheet.stories.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; - -import {actions} from '@storybook/addon-actions'; -import type {Meta, StoryFn} from '@storybook/react'; - -import type {PromoSheetProps} from '../PromoSheet'; -import {PromoSheet} from '../PromoSheet'; - -export default { - title: 'Components/PromoSheet', - component: PromoSheet, -} as Meta; - -const actionsHandlers = actions('onActionClick', 'onClose'); - -const DefaultTemplate: StoryFn = (args) => { - return ; -}; - -export const Default = DefaultTemplate.bind({}); - -Default.args = { - title: 'Some announcement title', - message: - 'Some announcement message with a lot of text. We want to see how it looks like when there is more than one line of text. Check if everything looks OK with margins.', - actionText: 'Action', - closeText: 'Close', -}; -Default.parameters = {}; diff --git a/src/components/PromoSheet/__tests__/PromoSheet.test.tsx b/src/components/PromoSheet/__tests__/PromoSheet.test.tsx deleted file mode 100644 index 6f02e4a1c5..0000000000 --- a/src/components/PromoSheet/__tests__/PromoSheet.test.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import React from 'react'; - -import {act, render, screen} from '@testing-library/react'; -import userEvent from '@testing-library/user-event'; - -import {PromoSheet} from '../PromoSheet'; - -test('Renders base content', () => { - const title = 'Title text'; - const message = 'Message text'; - const actionText = 'Action text'; - const closeText = 'Close text'; - - render( - , - ); - - expect(screen.getByRole('heading')).toHaveTextContent(title); - expect(screen.getByText(message)).toBeInTheDocument(); - expect(screen.getByRole('button', {name: closeText})).toBeInTheDocument(); - expect(screen.getByRole('button', {name: actionText})).toBeInTheDocument(); - - expect(screen.queryByRole('presentation')).not.toBeInTheDocument(); -}); - -test('Has image when imageSrc property is set', () => { - const originalWindowImage = window.Image; - let onLoad = () => {}; - - window.Image = class FakeImage { - naturalWidth = 0; - naturalHeight = 0; - - set onload(fn: () => void) { - onLoad = fn; - } - } as unknown as typeof Image; - - render(); - - window.Image = originalWindowImage; - act(() => { - onLoad(); - }); - - expect(screen.getByRole('presentation')).toBeInTheDocument(); -}); - -test('Call onActionClick and onClose by action button', async () => { - const handleActionClick = jest.fn(); - const handleClose = jest.fn(); - - render( - , - ); - - const actionButton = screen.getByRole('button', {name: 'Action'}); - const user = userEvent.setup(); - - await act(() => user.click(actionButton)); - - expect(handleActionClick).toBeCalled(); -}); diff --git a/src/components/PromoSheet/index.ts b/src/components/PromoSheet/index.ts deleted file mode 100644 index 915a28807b..0000000000 --- a/src/components/PromoSheet/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './PromoSheet'; diff --git a/src/components/SharePopover/README.md b/src/components/SharePopover/README.md deleted file mode 100644 index d85c82e9ba..0000000000 --- a/src/components/SharePopover/README.md +++ /dev/null @@ -1,94 +0,0 @@ -## SharePopover - -Sharing component - -### PropTypes - -| Property | Type | Required | Default | Description | -| :---------------------- | :-------------------- | :------- | :--------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| url | `String` | ✔ | | share link | -| title | `String` | | | link title | -| text | `String` | | | link text | -| shareOptions | `Array` | | `[]` | 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 | -| openByHover | `Boolean` | | `true` | should open tooltip with hover | -| autoclosable | `Boolean` | | `true` | should close tooltip when cursor is outside | -| closeDelay | `Number` | | `300` | delay before tooltip will be hidden when cursor is otside | -| iconSize | `Number` | | | icon-control size | -| iconClass | `String` | | | icon-control mixin | -| tooltipClassName | `String` | | | tooltip mixin | -| tooltipContentClassName | `String` | | | tooltip content mixin | -| className | `String` | | | css class for control | - -### Examples - -Copy button only: - -```js - -``` - -Default share options only: - -```js - -``` - -Default share options and copy button: - -```js - -``` - -With custom share option: - -```js - - params.url} - /> - -``` - -Web Share API setting (share options can be specified for non supported api case): - -```js - -``` diff --git a/src/components/SharePopover/ShareList/ShareList.scss b/src/components/SharePopover/ShareList/ShareList.scss deleted file mode 100644 index 4416933bc6..0000000000 --- a/src/components/SharePopover/ShareList/ShareList.scss +++ /dev/null @@ -1,82 +0,0 @@ -@use '../../variables'; - -$block: '.#{variables.$ns}share-list'; - -#{$block} { - display: flex; - align-items: center; - - &_layout { - &_row { - flex-direction: row; - - #{$block}__separator { - align-self: stretch; - margin: 8px -2px; - - @media (min-width: 639px) { - width: 1px; - margin: -2px 8px; - } - } - - #{$block}__option { - flex-direction: row; - } - - #{$block}__link + #{$block}__link { - margin-left: 4px; - } - } - &_column { - flex-direction: column; - - #{$block}__separator { - justify-self: stretch; - height: 1px; - width: 100%; - margin: 8px -2px; - } - - #{$block}__option { - flex-direction: column; - width: 100%; - } - } - } - - &__option { - display: flex; - align-items: flex-start; - } - - &__separator { - background: var(--g-color-line-generic); - } - - &__copy-link { - display: contents; - } - - @media (max-width: 639px) { - flex-direction: column; - align-items: stretch; - min-width: 175px; - - &__option { - justify-content: space-evenly; - } - - &__separator { - width: calc(100% + 4px); - height: 1px; - margin: 8px -2px; - } - } - - &__options-container { - display: flex; - - width: 100%; - } -} diff --git a/src/components/SharePopover/ShareList/ShareList.tsx b/src/components/SharePopover/ShareList/ShareList.tsx deleted file mode 100644 index 68808bb341..0000000000 --- a/src/components/SharePopover/ShareList/ShareList.tsx +++ /dev/null @@ -1,154 +0,0 @@ -import React from 'react'; - -import {Link} from '@gravity-ui/icons'; - -import {Button} from '../../Button'; -import {CopyToClipboard, CopyToClipboardStatus} from '../../CopyToClipboard'; -import {Icon} from '../../Icon'; -import type {SVGIconData} from '../../Icon/types'; -import {block} from '../../utils/cn'; -import {isOfType} from '../../utils/isOfType'; -import {ShareListItem} from '../ShareListItem/ShareListItem'; -import type {LayoutDirection, ShareOptions} from '../constants'; -import i18n from '../i18n'; -import type {ShareOptionsData} from '../models'; - -import './ShareList.scss'; - -const b = block('share-list'); -const isShareListItemComponent = isOfType(ShareListItem); -export interface ShareListDefaultProps { - /** share options list */ - shareOptions: ShareOptions[]; - /** should show copy button */ - withCopyLink: boolean; -} - -export interface ShareListProps extends ShareOptionsData, Partial { - /** control css class */ - className?: string; - /** elements location direction */ - direction?: LayoutDirection; - /** custom copy link button title */ - copyTitle?: string | React.ReactNode; - /** custom copy link button icon */ - copyIcon?: SVGIconData; - /** custom copy button render */ - renderCopy?: ({ - url, - title, - icon, - }: { - url: string | undefined; - title: string | React.ReactNode; - icon: SVGIconData; - }) => React.ReactElement; - /** you can extend available share options with custom ones using ShareListProps.Item */ - children?: - | React.ReactElement - | React.ReactElement[]; -} - -type ShareListInnerProps = Omit & - Required>; - -interface ShareListState { - copied: boolean; -} - -export class ShareList extends React.PureComponent { - static defaultProps: ShareListDefaultProps = { - shareOptions: [], - withCopyLink: false, - }; - static Item = ShareListItem; - - state: ShareListState = { - copied: false, - }; - - private copyLink: HTMLButtonElement | null = null; - - componentDidMount() { - if (this.props.withCopyLink && this.copyLink) { - this.copyLink.style.width = `${this.copyLink.scrollWidth}px`; - } - } - - render() { - 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 ( -
-
- {hasShareOptions && this.renderShareOptionsLinks()} - {Boolean(extensions?.length) && extensions} -
- {hasShareOptions && withCopyLink &&
} - {withCopyLink && this.renderCopyLink()} -
- ); - } - - private renderShareOptionsLinks() { - const {url, title, text, shareOptions, direction} = this.props; - return ( -
- {shareOptions.map((type) => ( - - ))} -
- ); - } - - private renderCopyLink() { - const {url, copyIcon, copyTitle, renderCopy} = this.props; - const {copied} = this.state; - - const label = - copyTitle || (copied ? i18n('label_copy-link-copied') : i18n('label_copy-link')); - - return ( -
- {renderCopy ? ( - renderCopy({ - url, - title: label, - icon: copyIcon || Link, - }) - ) : ( - - {(status) => ( - - )} - - )} -
- ); - } - - private copyLinkRef = (element: unknown) => { - this.copyLink = element as HTMLButtonElement; - }; -} diff --git a/src/components/SharePopover/ShareListItem/ShareListItem.scss b/src/components/SharePopover/ShareListItem/ShareListItem.scss deleted file mode 100644 index 7eda75657b..0000000000 --- a/src/components/SharePopover/ShareListItem/ShareListItem.scss +++ /dev/null @@ -1,43 +0,0 @@ -@use '../../variables'; -@use './colors' as *; - -$block: '.#{variables.$ns}share-list-item'; - -#{$block} { - display: flex; - align-items: center; - - &__icon_type { - &_telegram { - color: var($g-color-telegram); - } - - &_facebook { - color: var($g-color-facebook); - } - - &_twitter { - color: var($g-color-twitter); - } - - &_vk { - color: var($g-color-vk); - } - } - - &__link-container { - display: flex; - } - - &__link-icon { - display: flex; - align-items: center; - } - - &__link-title { - display: flex; - flex-grow: 1; - align-items: center; - margin-left: 10px; - } -} diff --git a/src/components/SharePopover/ShareListItem/ShareListItem.tsx b/src/components/SharePopover/ShareListItem/ShareListItem.tsx deleted file mode 100644 index fa5094ac92..0000000000 --- a/src/components/SharePopover/ShareListItem/ShareListItem.tsx +++ /dev/null @@ -1,120 +0,0 @@ -import React from 'react'; - -import {Button} from '../../Button'; -import {Icon} from '../../Icon'; -import type {SVGIconData} from '../../Icon/types'; -import {block} from '../../utils/cn'; -import {LayoutDirection, ShareOptions} from '../constants'; -import i18n from '../i18n'; -import * as icons from '../icons'; -import type {ShareOptionsData} from '../models'; - -import './ShareListItem.scss'; - -const b = block('share-list-item'); - -export interface ShareListItemProps extends ShareOptionsData { - type?: ShareOptions; - icon?: SVGIconData; - label?: string; - className?: string; - direction?: LayoutDirection; - - getShareLink?: (params: ShareOptionsData) => string; -} - -export class ShareListItem extends React.PureComponent { - render() { - const {type, direction, className, label, getShareLink, ...rest} = this.props; - const icon = this.props.icon || (type && icons[type]); - const url = getShareLink?.(rest) ?? (type && this.getShareLink(type)); - const typeModifier = type?.toLowerCase(); - const name = label || (type && ShareOptions[type]); - - if (!url) { - return null; - } - - if (direction === 'column') { - return ( - - ); - } - return ( - - ); - } - - private getShareLink(type: ShareOptions) { - const {url, title, text} = this.props; - - // https://github.com/bradvin/social-share-urls - switch (type) { - case ShareOptions.Telegram: - return this.getShareUrlWithParams('https://t.me/share/url', {url, text: title}); - case ShareOptions.Facebook: - return this.getShareUrlWithParams('https://facebook.com/sharer.php', {u: url}); - case ShareOptions.Twitter: - return this.getShareUrlWithParams('https://twitter.com/intent/tweet', { - url, - text: title, - }); - case ShareOptions.VK: - return this.getShareUrlWithParams('https://vk.com/share.php', { - url, - title, - comment: text, - }); - case ShareOptions.LinkedIn: - return this.getShareUrlWithParams( - 'https://www.linkedin.com/sharing/share-offsite/', - { - url, - }, - ); - case ShareOptions.Mail: - return this.getShareUrlWithParams('mailto:', { - subject: title, - body: text ? `${text}\n${url}` : url, - }); - default: - console.error(`Unknown share type: ${type}`); - - return null; - } - } - - private getShareUrlWithParams(url: string, params: Record = {}) { - const result = new URL(url); - - Object.entries(params).forEach(([name, value]) => { - if (value) { - result.searchParams.set(name, value); - } - }); - - return result.toString(); - } -} diff --git a/src/components/SharePopover/ShareListItem/colors.scss b/src/components/SharePopover/ShareListItem/colors.scss deleted file mode 100644 index 73e0c25071..0000000000 --- a/src/components/SharePopover/ShareListItem/colors.scss +++ /dev/null @@ -1,8 +0,0 @@ -$g-color-telegram: #51a4db; -$g-color-facebook: #4968ad; -$g-color-twitter: #4aa0eb; -$g-color-vk: #436eab; -$g-color-youtube: #eb3323; -$g-color-github: #25292e; -$g-color-rss: #f29c39; -$g-color-linkedin: #0a66c2; diff --git a/src/components/SharePopover/SharePopover.scss b/src/components/SharePopover/SharePopover.scss deleted file mode 100644 index 1c609a5fd9..0000000000 --- a/src/components/SharePopover/SharePopover.scss +++ /dev/null @@ -1,34 +0,0 @@ -@use '../variables'; - -$block: '.#{variables.$ns}share-popover'; - -#{$block} { - position: relative; - - &__tooltip-content { - max-width: none; - padding: 8px; - } - - &__container { - display: flex; - flex-wrap: nowrap; - - cursor: pointer; - color: var(--g-color-text-secondary); - - &:hover { - color: var(--g-color-text-primary); - } - } - - &__icon-container { - display: flex; - align-items: center; - } - &__title { - padding-left: 10px; - display: flex; - align-items: center; - } -} diff --git a/src/components/SharePopover/SharePopover.tsx b/src/components/SharePopover/SharePopover.tsx deleted file mode 100644 index c4f5372240..0000000000 --- a/src/components/SharePopover/SharePopover.tsx +++ /dev/null @@ -1,170 +0,0 @@ -import React from 'react'; - -import {NodesRight} from '@gravity-ui/icons'; - -import {Icon} from '../Icon'; -import type {SVGIconData} from '../Icon/types'; -import {Popover} from '../Popover'; -import type {PopupPlacement} from '../Popup'; -import {block} from '../utils/cn'; - -import {ShareList} from './ShareList/ShareList'; -import type {ShareListDefaultProps, ShareListProps} from './ShareList/ShareList'; -import {LayoutDirection} from './constants'; - -import './SharePopover.scss'; - -const b = block('share-popover'); - -interface SharePopoverDefaultProps extends ShareListDefaultProps { - /** Web Share API setting (share options can be specified for non supported api case) */ - useWebShareApi: boolean; - /** popover opening direction */ - placement: PopupPlacement; - /** should open popover with hover */ - openByHover: boolean; - /** should close popover when cursor is outside */ - autoclosable: boolean; - /** delay before popover will be hidden when cursor is otside */ - closeDelay: number; - /** control-icon size */ - iconSize: number; - /** elements location direction */ - direction: LayoutDirection; -} - -export interface SharePopoverProps extends ShareListProps, Partial { - /** icon control mixin */ - iconClass?: string; - /** tooltip mixin */ - tooltipClassName?: string; - /** tooltip content mixin */ - tooltipContentClassName?: string; - /** sitcher mixin */ - switcherClassName?: string; - /** custom icon */ - customIcon?: SVGIconData; - /** icon title */ - buttonTitle?: string | React.ReactNode; - /** custom onClick handler */ - onClick?: (event?: React.MouseEvent) => void; - /** custom copy link button title */ - copyTitle?: string | React.ReactNode; - /** custom copy link button icon */ - copyIcon?: SVGIconData; - /** custom copy button render */ - renderCopy?: ({ - url, - title, - icon, - }: { - url: string | undefined; - title: string | React.ReactNode; - icon: SVGIconData; - }) => React.ReactElement; -} - -type SharePopoverInnerProps = Omit & - Required>; - -export const sharePopoverDefaultProps: SharePopoverDefaultProps = { - iconSize: 16, - shareOptions: ShareList.defaultProps.shareOptions, - withCopyLink: true, - useWebShareApi: false, - placement: ['bottom-end'], - openByHover: true, - autoclosable: true, - closeDelay: 300, - direction: LayoutDirection.Row, -}; - -export class SharePopover extends React.PureComponent { - static defaultProps = sharePopoverDefaultProps; - - render() { - const { - url, - title, - text, - shareOptions, - withCopyLink, - useWebShareApi, - placement, - openByHover, - autoclosable, - closeDelay, - iconSize, - iconClass, - tooltipClassName, - tooltipContentClassName, - switcherClassName, - className, - direction, - customIcon, - buttonTitle, - copyTitle, - copyIcon, - renderCopy, - children, - } = this.props; - - const content = ( - - {children} - - ); - - return ( - -
-
- -
- - {Boolean(buttonTitle) &&
{buttonTitle}
} -
- - ); - } - - private handleClick = async (event: React.MouseEvent) => { - const {url, title, text, useWebShareApi, onClick} = this.props; - - if (onClick) { - onClick(event); - } - - if (useWebShareApi && navigator && typeof navigator.share === 'function') { - await navigator.share({url, title, text}); - event.preventDefault(); - return false; - } - return true; - }; -} diff --git a/src/components/SharePopover/__stories__/SharePopover.stories.tsx b/src/components/SharePopover/__stories__/SharePopover.stories.tsx deleted file mode 100644 index 41e50f7060..0000000000 --- a/src/components/SharePopover/__stories__/SharePopover.stories.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; - -import type {ComponentMeta, ComponentStory} from '@storybook/react'; - -import {SharePopover, sharePopoverDefaultProps} from '../SharePopover'; - -import {SharePopoverDemo} from './Showcase'; - -export default { - title: 'Components/SharePopover', - component: SharePopover, - argTypes: { - title: { - description: 'Link title', - }, - text: { - description: 'link text', - }, - }, - args: {...sharePopoverDefaultProps}, -} as ComponentMeta; - -const DefaultTemplate: ComponentStory = (args) => ; -export const Default = DefaultTemplate.bind({}); - -const ShowcaseTemplate: ComponentStory = () => ( - -); -export const Showcase = ShowcaseTemplate.bind({}); diff --git a/src/components/SharePopover/__stories__/Showcase/SharePopover.scss b/src/components/SharePopover/__stories__/Showcase/SharePopover.scss deleted file mode 100644 index 93a8e42763..0000000000 --- a/src/components/SharePopover/__stories__/Showcase/SharePopover.scss +++ /dev/null @@ -1,13 +0,0 @@ -@use '../../../variables.scss'; - -$block: '.#{variables.$ns}share-popover-demo'; - -#{$block} { - &__custom-switcher { - color: #ff0000; - } - - &__custom-switcher:hover { - color: #00ff00; - } -} diff --git a/src/components/SharePopover/__stories__/Showcase/icons/Cloud.tsx b/src/components/SharePopover/__stories__/Showcase/icons/Cloud.tsx deleted file mode 100644 index 0ab6ef24e2..0000000000 --- a/src/components/SharePopover/__stories__/Showcase/icons/Cloud.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; - -import {a11yHiddenSvgProps} from '../../../../utils/svg'; - -export function Cloud(props: React.SVGProps) { - return ( - - - - ); -} diff --git a/src/components/SharePopover/__stories__/Showcase/icons/Custom.tsx b/src/components/SharePopover/__stories__/Showcase/icons/Custom.tsx deleted file mode 100644 index 237c143688..0000000000 --- a/src/components/SharePopover/__stories__/Showcase/icons/Custom.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; - -import {a11yHiddenSvgProps} from '../../../../utils/svg'; - -export function Custom(props: React.SVGProps) { - return ( - - - - ); -} diff --git a/src/components/SharePopover/__stories__/Showcase/icons/ShareArrowUp.tsx b/src/components/SharePopover/__stories__/Showcase/icons/ShareArrowUp.tsx deleted file mode 100644 index 12fbf9ec2b..0000000000 --- a/src/components/SharePopover/__stories__/Showcase/icons/ShareArrowUp.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react'; - -import {a11yHiddenSvgProps} from '../../../../utils/svg'; - -export function ShareArrowUp(props: React.SVGProps) { - return ( - - - - ); -} diff --git a/src/components/SharePopover/__stories__/Showcase/icons/index.ts b/src/components/SharePopover/__stories__/Showcase/icons/index.ts deleted file mode 100644 index 5e2ddffad3..0000000000 --- a/src/components/SharePopover/__stories__/Showcase/icons/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './Cloud'; -export * from './ShareArrowUp'; -export * from './Custom'; diff --git a/src/components/SharePopover/__stories__/Showcase/index.tsx b/src/components/SharePopover/__stories__/Showcase/index.tsx deleted file mode 100644 index 3ee0c3f77c..0000000000 --- a/src/components/SharePopover/__stories__/Showcase/index.tsx +++ /dev/null @@ -1,206 +0,0 @@ -import React from 'react'; - -import {Button} from '../../../Button'; -import {Icon} from '../../../Icon'; -import {ShareList, ShareOptions, SharePopover} from '../../../SharePopover'; -import {block} from '../../../utils/cn'; -import {LayoutDirection} from '../../constants'; -import type {ShareOptionsData} from '../../models'; - -import {Cloud, Custom, ShareArrowUp} from './icons'; - -import './SharePopover.scss'; - -const b = block('share-popover-demo'); - -export function SharePopoverDemo() { - const url = 'https://www.example.com'; - const title = 'Check out this new awesome sharing component'; - const text = 'Content sharing is not supported in all share options'; - const shareOptions = [ - ShareOptions.Telegram, - ShareOptions.Facebook, - ShareOptions.Twitter, - ShareOptions.VK, - ShareOptions.LinkedIn, - ShareOptions.Mail, - ]; - - const ShareTitle =
Share
; - - return ( -
-
- Copy only - -
- -
- Default share options only - -
- -
- Custom share option - - params.url} - /> - -
- -
- Custom share option and Copy Link - - params.url} - /> - -
- -
- Default share options with copy - -
- -
- Share options with copy (only URL) - -
- -
- Share options with copy (open by click) - -
- -
- Using Web Share API (for mobile) - -
- -
- Layout with direction = "column" - -
- -
- With alternative Icon - -
- -
- With alternative Icon and Title on the right - -
- -
- - With alternative Icon and Title on the right and custom style - - -
- -
- Custom share link - -
- -
- Custom copy button render - ( - - )} - /> -
-
- ); -} diff --git a/src/components/SharePopover/constants.ts b/src/components/SharePopover/constants.ts deleted file mode 100644 index de6a380e87..0000000000 --- a/src/components/SharePopover/constants.ts +++ /dev/null @@ -1,13 +0,0 @@ -export enum ShareOptions { - Telegram = 'Telegram', - Facebook = 'Facebook', - Twitter = 'Twitter', - VK = 'VK', - LinkedIn = 'LinkedIn', - Mail = 'Mail', -} - -export enum LayoutDirection { - Row = 'row', - Column = 'column', -} diff --git a/src/components/SharePopover/i18n/en.json b/src/components/SharePopover/i18n/en.json deleted file mode 100644 index 9501300be1..0000000000 --- a/src/components/SharePopover/i18n/en.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "label_copy-link": "Copy link", - "label_copy-link-copied": "Link copied", - "label_share": "Share to {{name}}" -} diff --git a/src/components/SharePopover/i18n/index.ts b/src/components/SharePopover/i18n/index.ts deleted file mode 100644 index 6f96d36d93..0000000000 --- a/src/components/SharePopover/i18n/index.ts +++ /dev/null @@ -1,8 +0,0 @@ -import {addComponentKeysets} from '../../utils/addComponentKeysets'; - -import en from './en.json'; -import ru from './ru.json'; - -const COMPONENT = 'yc-share-tooltip'; - -export default addComponentKeysets({en, ru}, COMPONENT); diff --git a/src/components/SharePopover/i18n/ru.json b/src/components/SharePopover/i18n/ru.json deleted file mode 100644 index 8917bf5565..0000000000 --- a/src/components/SharePopover/i18n/ru.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "label_copy-link": "Копировать ссылку", - "label_copy-link-copied": "Ссылка скопирована", - "label_share": "Поделиться в {{name}}" -} diff --git a/src/components/SharePopover/icons/Facebook.tsx b/src/components/SharePopover/icons/Facebook.tsx deleted file mode 100644 index 28a98e23d0..0000000000 --- a/src/components/SharePopover/icons/Facebook.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; - -import {a11yHiddenSvgProps} from '../../utils/svg'; - -export function Facebook(props: React.SVGProps) { - return ( - - - - - ); -} diff --git a/src/components/SharePopover/icons/LinkedIn.tsx b/src/components/SharePopover/icons/LinkedIn.tsx deleted file mode 100644 index 150baf9e89..0000000000 --- a/src/components/SharePopover/icons/LinkedIn.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; - -import {a11yHiddenSvgProps} from '../../utils/svg'; - -export function LinkedIn(props: React.SVGProps) { - return ( - - - - - ); -} diff --git a/src/components/SharePopover/icons/Mail.tsx b/src/components/SharePopover/icons/Mail.tsx deleted file mode 100644 index 98a1a51de3..0000000000 --- a/src/components/SharePopover/icons/Mail.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import {Envelope} from '@gravity-ui/icons'; - -export const Mail = Envelope; diff --git a/src/components/SharePopover/icons/Telegram.tsx b/src/components/SharePopover/icons/Telegram.tsx deleted file mode 100644 index a3109f55c0..0000000000 --- a/src/components/SharePopover/icons/Telegram.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; - -import {a11yHiddenSvgProps} from '../../utils/svg'; - -export function Telegram(props: React.SVGProps) { - return ( - - - - - - - - - - - - ); -} diff --git a/src/components/SharePopover/icons/Twitter.tsx b/src/components/SharePopover/icons/Twitter.tsx deleted file mode 100644 index cab08dac0c..0000000000 --- a/src/components/SharePopover/icons/Twitter.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; - -import {a11yHiddenSvgProps} from '../../utils/svg'; - -export function Twitter(props: React.SVGProps) { - return ( - - - - - ); -} diff --git a/src/components/SharePopover/icons/VK.tsx b/src/components/SharePopover/icons/VK.tsx deleted file mode 100644 index 98061274e1..0000000000 --- a/src/components/SharePopover/icons/VK.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react'; - -import {a11yHiddenSvgProps} from '../../utils/svg'; - -export function VK(props: React.SVGProps) { - return ( - - - - - - - - - - - - ); -} diff --git a/src/components/SharePopover/icons/index.ts b/src/components/SharePopover/icons/index.ts deleted file mode 100644 index c1ea327c15..0000000000 --- a/src/components/SharePopover/icons/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -export * from './Facebook'; -export * from './Telegram'; -export * from './Twitter'; -export * from './VK'; -export * from './LinkedIn'; -export * from './Mail'; diff --git a/src/components/SharePopover/index.ts b/src/components/SharePopover/index.ts deleted file mode 100644 index 11e679c79e..0000000000 --- a/src/components/SharePopover/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -export {ShareOptions, LayoutDirection as ShareLayoutDirection} from './constants'; -export {ShareList} from './ShareList/ShareList'; -export {SharePopover} from './SharePopover'; - -export type {ShareListProps} from './ShareList/ShareList'; -export type {SharePopoverProps} from './SharePopover'; diff --git a/src/components/SharePopover/models.ts b/src/components/SharePopover/models.ts deleted file mode 100644 index 76a282f045..0000000000 --- a/src/components/SharePopover/models.ts +++ /dev/null @@ -1,4 +0,0 @@ -export interface ShareOptionsData extends ShareData { - /** sharing link */ - url: string; -} diff --git a/src/components/index.ts b/src/components/index.ts index d90894c78b..d57bf4367a 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -14,7 +14,6 @@ export * from './ClipboardIcon'; export * from './CopyToClipboard'; export * from './Dialog'; export * from './DropdownMenu'; -export * from './HelpPopover'; export * from './Hotkey'; export * from './Icon'; export * from './Label'; @@ -29,12 +28,10 @@ export * from './Popover'; export * from './Popup'; export * from './Portal'; export * from './Progress'; -export * from './PromoSheet'; export * from './Radio'; export * from './RadioButton'; export * from './RadioGroup'; export * from './Select'; -export * from './SharePopover'; export * from './Sheet'; export * from './Skeleton'; export * from './Spin';