feat: ability to add titles for the links (#549)

Kyzyl-ool · web-flow · commit 514c988f3d34 · 2023-09-26T12:34:04.000+02:00
diff --git 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
@@ -56,6 +56,7 @@ const FileLink = (props: WithChildren<FileLinkProps>) => {
         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<FileLinkProps>) => {
                     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
@@ -57,6 +57,7 @@ const LinkBlock = (props: WithChildren<LinkFullProps>) => {
         children,
         tabIndex,
         qa,
+        urlTitle,
     } = props;
     const qaAttributes = getQaAttrubutes(qa, ['normal']);
 
@@ -105,6 +106,7 @@ const LinkBlock = (props: WithChildren<LinkFullProps>) => {
                         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
@@ -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 = (
-            <a className={b('link')} href={url} {...getLinkProps(url, hostname)} onClick={onClick}>
+            <a
+                className={b('link')}
+                href={url}
+                {...getLinkProps(url, hostname)}
+                onClick={onClick}
+                title={urlTitle}
+            >
                 {insideClickableContent}
             </a>
         );
     } else if (onClick) {
         content = (
-            <span className={b('link')} onClick={onClick}>
+            <span className={b('link')} onClick={onClick} title={urlTitle}>
                 {insideClickableContent}
             </span>
         );
diff --git a/src/components/Title/__stories__/data.json b/src/components/Title/__stories__/data.json
@@ -10,15 +10,17 @@
       "title": {
         "text": "Lorem ipsum",
         "url": "https://example.com",
-        "custom": "Some react node"
+        "custom": "Some react node",
+        "urlTitle": "Example website. Opens in a new window"
       }
     }
   },
   "titleLink": {
     "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
@@ -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
@@ -103,6 +103,7 @@ export interface BackgroundCardProps
         AnalyticsEventsBase,
         Omit<ContentBlockProps, 'colSizes' | 'centered'> {
     url?: string;
+    urlTitle?: string;
     background?: ThemeSupporting<ImageObjectProps>;
     paddingBottom?: 's' | 'm' | 'l' | 'xl';
     backgroundColor?: string;
diff --git a/src/models/navigation.ts b/src/models/navigation.ts
@@ -35,6 +35,7 @@ export enum NavigationGithubButtonIcon {
 export interface NavigationGithubButton extends Omit<NavigationItemBase, 'icon'> {
     type: NavigationItemType.GithubButton;
     url: string;
+    urlTitle?: string;
     label?: string;
     icon?: keyof typeof NavigationGithubButtonIcon;
     size?: string;
@@ -43,6 +44,7 @@ export interface NavigationGithubButton extends Omit<NavigationItemBase, 'icon'>
 export interface NavigationLinkItem extends Omit<NavigationItemBase, 'url'> {
     type: NavigationItemType.Link;
     url: string;
+    urlTitle?: string;
     arrow?: boolean;
     target?: string;
 }
@@ -62,6 +64,7 @@ export interface NavigationSocialItem extends Omit<NavigationItemBase, 'text'> {
     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
@@ -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
@@ -20,6 +20,7 @@ export const GithubButton = ({
     label,
     size,
     icon,
+    urlTitle,
 }: NavigationGithubButtonProps) => {
     const containerRef = useRef<HTMLSpanElement>(null);
     const linkRef = useRef<HTMLAnchorElement>(null);
@@ -63,6 +64,7 @@ export const GithubButton = ({
                 <a
                     href={url}
                     ref={linkRef}
+                    title={urlTitle}
                     data-show-count="true"
                     aria-label={label || DEFAULT_LABEL}
                     {...(icon && {'data-icon': NavigationGithubButtonIcon[icon]})}
diff --git a/src/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.tsx b/src/navigation/components/NavigationItem/components/NavigationLink/NavigationLink.tsx
@@ -17,7 +17,7 @@ type NavigationLinkProps = NavigationItemProps & NavigationLinkItem;
 
 export const NavigationLink: React.FC<NavigationLinkProps> = (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<NavigationLinkProps> = (props) => {
 
     if (linkExtraProps?.target || !Link) {
         return (
-            <a href={url} title={text} className={classes} {...rest} {...linkExtraProps}>
+            <a
+                href={url}
+                title={urlTitle || text}
+                className={classes}
+                {...rest}
+                {...linkExtraProps}
+            >
                 {content}
             </a>
         );
     } else {
         return (
             <RouterLink href={url} passHref>
-                <a title={text} {...rest} className={classes}>
+                <a title={urlTitle || text} {...rest} className={classes}>
                     {content}
                 </a>
             </RouterLink>
diff --git a/src/navigation/components/SocialIcon/SocialIcon.tsx b/src/navigation/components/SocialIcon/SocialIcon.tsx
@@ -13,15 +13,15 @@ export interface NavigationSocialItemOwnProps extends NavigationSocialItem {
     className?: string;
 }
 
-const SocialIcon: React.FC<NavigationSocialItemOwnProps> = ({icon, url, className}) => {
+const SocialIcon: React.FC<NavigationSocialItemOwnProps> = ({icon, url, className, urlTitle}) => {
     const iconData = getMediaImage(icon);
     const {alt} = iconData;
 
     return (
         <a
             href={url}
             aria-label={alt}
-            title={alt}
+            title={urlTitle || alt}
             target="_blank"
             rel="noopener noreferrer"
             className={b(null, className)}
diff --git a/src/sub-blocks/BackgroundCard/BackgroundCard.tsx b/src/sub-blocks/BackgroundCard/BackgroundCard.tsx
@@ -24,6 +24,7 @@ const BackgroundCard = (props: BackgroundCardProps) => {
         links,
         buttons,
         analyticsEvents,
+        urlTitle,
     } = props;
 
     const theme = useTheme();
@@ -36,6 +37,7 @@ const BackgroundCard = (props: BackgroundCardProps) => {
             url={url}
             border={borderType}
             analyticsEvents={analyticsEvents}
+            urlTitle={urlTitle}
         >
             <CardBase.Content>
                 <BackgroundImage
diff --git a/src/sub-blocks/BackgroundCard/__stories__/BackgroundCard.stories.tsx b/src/sub-blocks/BackgroundCard/__stories__/BackgroundCard.stories.tsx
@@ -151,5 +151,6 @@ WithUrl.args = {
         ...DefaultArgs,
         ...item,
         url: data.url,
+        urlTitle: data.urlTitle,
     })) as BackgroundCardProps[],
 };
diff --git a/src/sub-blocks/BackgroundCard/__stories__/data.json b/src/sub-blocks/BackgroundCard/__stories__/data.json
@@ -61,6 +61,7 @@
     }
   },
   "url": "https://example.com",
+  "urlTitle": "Example website. Opens in a new window",
   "paddings": {
     "title": "Padding Bottom = {{padding}}"
   },

Original file line number	Diff line number	Diff line change
`@@ -10,15 +10,17 @@`
`10`	`10`	`"title": {`
`11`	`11`	`"text": "Lorem ipsum",`
`12`	`12`	`"url": "https://example.com",`
`13`		`- "custom": "Some react node"`
	`13`	`+ "custom": "Some react node",`
	`14`	`+ "urlTitle": "Example website. Opens in a new window"`
`14`	`15`	`}`
`15`	`16`	`}`
`16`	`17`	`},`
`17`	`18`	`"titleLink": {`
`18`	`19`	`"content": {`
`19`	`20`	`"title": {`
`20`	`21`	`"text": "Lorem ipsum",`
`21`		`- "url": "https://example.com"`
	`22`	`+ "url": "https://example.com",`
	`23`	`+ "urlTitle": "Example website. Opens in a new window"`
`22`	`24`	`}`
`23`	`25`	`}`
`24`	`26`	`},`