diff --git a/src/components/CardBase/CardBase.tsx b/src/components/CardBase/CardBase.tsx index 5af8ae8bc..cc449c1f4 100644 --- a/src/components/CardBase/CardBase.tsx +++ b/src/components/CardBase/CardBase.tsx @@ -22,6 +22,7 @@ export interface CardBaseProps extends AnalyticsEventsBase, CardBaseParams { contentClassName?: string; children: ReactElement | ReactElement[]; url?: string; + urlTitle?: string; target?: HTMLAttributeAnchorTarget; metrikaGoals?: MetrikaGoal; pixelEvents?: ButtonPixel; @@ -55,6 +56,7 @@ export const Layout = (props: CardBaseProps) => { url, target, border = 'shadow', + urlTitle, qa, } = props; const handleMetrika = useMetrika(); @@ -126,6 +128,7 @@ export const Layout = (props: CardBaseProps) => { draggable={false} onDragStart={(e) => e.preventDefault()} onClick={onClick} + title={urlTitle} data-qa={qa} > {cardContent} diff --git a/src/components/FileLink/FileLink.tsx b/src/components/FileLink/FileLink.tsx index 165c5053f..546b461bd 100644 --- a/src/components/FileLink/FileLink.tsx +++ b/src/components/FileLink/FileLink.tsx @@ -56,6 +56,7 @@ const FileLink = (props: WithChildren) => { theme = 'default', onClick, tabIndex, + urlTitle, } = props; const fileExt = getFileExt(href) as FileExtension; const labelTheme = (FileExtensionThemes[fileExt] || 'unknown') as LabelProps['theme']; @@ -71,6 +72,7 @@ const FileLink = (props: WithChildren) => { href={href} onClick={onClick} tabIndex={tabIndex} + title={urlTitle} {...getLinkProps(href, hostname)} > {text} diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx index 850a0f714..bcde8c025 100644 --- a/src/components/Link/Link.tsx +++ b/src/components/Link/Link.tsx @@ -57,6 +57,7 @@ const LinkBlock = (props: WithChildren) => { children, tabIndex, qa, + urlTitle, } = props; const qaAttributes = getQaAttrubutes(qa, ['normal']); @@ -105,6 +106,7 @@ const LinkBlock = (props: WithChildren) => { href={href} onClick={onClick} tabIndex={tabIndex} + title={urlTitle} {...linkProps} data-qa={qaAttributes.normal} > diff --git a/src/components/Title/TitleItem.tsx b/src/components/Title/TitleItem.tsx index 389538666..282ccee77 100644 --- a/src/components/Title/TitleItem.tsx +++ b/src/components/Title/TitleItem.tsx @@ -46,6 +46,7 @@ const TitleItem = (props: TitleItemFullProps) => { className, qa, resetMargin = true, + urlTitle, } = props; const {hostname} = useContext(LocationContext); @@ -80,13 +81,19 @@ const TitleItem = (props: TitleItemFullProps) => { content = textMarkup; } else if (url) { content = ( - + {insideClickableContent} ); } else if (onClick) { content = ( - + {insideClickableContent} ); diff --git a/src/components/Title/__stories__/data.json b/src/components/Title/__stories__/data.json index e1d1c484f..181dd2cb3 100644 --- a/src/components/Title/__stories__/data.json +++ b/src/components/Title/__stories__/data.json @@ -10,7 +10,8 @@ "title": { "text": "Lorem ipsum", "url": "https://example.com", - "custom": "Some react node" + "custom": "Some react node", + "urlTitle": "Example website. Opens in a new window" } } }, @@ -18,7 +19,8 @@ "content": { "title": { "text": "Lorem ipsum", - "url": "https://example.com" + "url": "https://example.com", + "urlTitle": "Example website. Opens in a new window" } } }, diff --git a/src/models/constructor-items/common.ts b/src/models/constructor-items/common.ts index 9b03f320e..608db3ba3 100644 --- a/src/models/constructor-items/common.ts +++ b/src/models/constructor-items/common.ts @@ -159,6 +159,7 @@ export interface MediaVideoProps extends AnalyticsEventsBase { // links export interface LinkProps extends AnalyticsEventsBase, Stylable, Tabbable { url: string; + urlTitle?: string; text?: string; textSize?: TextSize; theme?: LinkTheme; @@ -175,6 +176,7 @@ export interface FileLinkProps extends ClassNameProps, Tabbable { type?: FileLinkType; textSize?: TextSize; theme?: ContentTheme; + urlTitle?: string; onClick?: () => void; } @@ -347,6 +349,7 @@ export interface TitleItemBaseProps { text: string; textSize?: TextSize; url?: string; + urlTitle?: string; custom?: string | ReactNode; onClick?: () => void; } diff --git a/src/models/constructor-items/sub-blocks.ts b/src/models/constructor-items/sub-blocks.ts index 75ddfb11a..f8e47a888 100644 --- a/src/models/constructor-items/sub-blocks.ts +++ b/src/models/constructor-items/sub-blocks.ts @@ -103,6 +103,7 @@ export interface BackgroundCardProps AnalyticsEventsBase, Omit { url?: string; + urlTitle?: string; background?: ThemeSupporting; paddingBottom?: 's' | 'm' | 'l' | 'xl'; backgroundColor?: string; diff --git a/src/models/navigation.ts b/src/models/navigation.ts index cdbbaf952..be2f8dace 100644 --- a/src/models/navigation.ts +++ b/src/models/navigation.ts @@ -35,6 +35,7 @@ export enum NavigationGithubButtonIcon { export interface NavigationGithubButton extends Omit { type: NavigationItemType.GithubButton; url: string; + urlTitle?: string; label?: string; icon?: keyof typeof NavigationGithubButtonIcon; size?: string; @@ -43,6 +44,7 @@ export interface NavigationGithubButton extends Omit export interface NavigationLinkItem extends Omit { type: NavigationItemType.Link; url: string; + urlTitle?: string; arrow?: boolean; target?: string; } @@ -62,6 +64,7 @@ export interface NavigationSocialItem extends Omit { type: NavigationItemType.Social; icon: ImageProps; url: string; + urlTitle?: string; } export type NavigationItemModel = diff --git a/src/navigation/__stories__/data.json b/src/navigation/__stories__/data.json index 6d9ff2013..266e8eea7 100644 --- a/src/navigation/__stories__/data.json +++ b/src/navigation/__stories__/data.json @@ -71,7 +71,8 @@ "type": "link", "text": "Link with arrow", "url": "https://example.com", - "arrow": true + "arrow": true, + "urlTitle": "External website. Opens in a new window" }, { "type": "link", @@ -106,7 +107,8 @@ "type": "github-button", "text": "Star", "label": "Star @gravity-ui/page-constructor on GitHub", - "url": "https://github.com/gravity-ui/page-constructor" + "url": "https://github.com/gravity-ui/page-constructor", + "urlTitle": "Page Constructor GitHub page. Opens in a new window" }, { "type": "link", diff --git a/src/navigation/components/NavigationItem/components/GithubButton/GithubButton.tsx b/src/navigation/components/NavigationItem/components/GithubButton/GithubButton.tsx index 626b5599e..42c639f97 100644 --- a/src/navigation/components/NavigationItem/components/GithubButton/GithubButton.tsx +++ b/src/navigation/components/NavigationItem/components/GithubButton/GithubButton.tsx @@ -20,6 +20,7 @@ export const GithubButton = ({ label, size, icon, + urlTitle, }: NavigationGithubButtonProps) => { const containerRef = useRef(null); const linkRef = useRef(null); @@ -63,6 +64,7 @@ export const GithubButton = ({ = (props) => { const {hostname, Link} = useContext(LocationContext); - const {url, text, icon, arrow, target, className, iconSize, ...rest} = props; + const {url, text, icon, arrow, target, className, iconSize, urlTitle, ...rest} = props; const linkExtraProps = getLinkProps(url, hostname, target); const iconData = icon && getMediaImage(icon); @@ -31,14 +31,20 @@ export const NavigationLink: React.FC = (props) => { if (linkExtraProps?.target || !Link) { return ( - + {content} ); } else { return ( - + {content} diff --git a/src/navigation/components/SocialIcon/SocialIcon.tsx b/src/navigation/components/SocialIcon/SocialIcon.tsx index 14ae3d0b3..eb56be208 100644 --- a/src/navigation/components/SocialIcon/SocialIcon.tsx +++ b/src/navigation/components/SocialIcon/SocialIcon.tsx @@ -13,7 +13,7 @@ export interface NavigationSocialItemOwnProps extends NavigationSocialItem { className?: string; } -const SocialIcon: React.FC = ({icon, url, className}) => { +const SocialIcon: React.FC = ({icon, url, className, urlTitle}) => { const iconData = getMediaImage(icon); const {alt} = iconData; @@ -21,7 +21,7 @@ const SocialIcon: React.FC = ({icon, url, classNam { links, buttons, analyticsEvents, + urlTitle, } = props; const theme = useTheme(); @@ -36,6 +37,7 @@ const BackgroundCard = (props: BackgroundCardProps) => { url={url} border={borderType} analyticsEvents={analyticsEvents} + urlTitle={urlTitle} >