feat: added urlTitle attributes to the schemas (#665)

* feat: added urlTitle attributes to the schemas and its usages to the stories
gravity-ui · Oct 27, 2023 · ab70085 · ab70085
1 parent fe0a8c6
commit ab70085
Show file tree

Hide file tree

Showing 10 changed files with 34 additions and 2 deletions.
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -18,6 +18,7 @@ import './Button.scss';
 export interface ButtonProps extends Omit<ButtonParams, 'url'>, QAProps {
     className?: string;
     url?: string;
+    urlTitle?: string;
     onClick?: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>;
 }
 
@@ -34,6 +35,7 @@ const Button = (props: ButtonProps) => {
         size = 'l',
         theme = 'normal',
         url,
+        urlTitle,
         img,
         onClick: onClickOrigin,
         text,
@@ -94,6 +96,7 @@ const Button = (props: ButtonProps) => {
             view={toCommonView(buttonTheme as OldButtonTheme)}
             size={toCommonSize(size as OldButtonSize)}
             href={url ? setUrlTld(url, tld) : undefined}
+            title={urlTitle}
             width={width}
             {...buttonProps}
         >

diff --git a/src/components/Button/__stories__/data.json b/src/components/Button/__stories__/data.json
@@ -13,7 +13,8 @@
         }
       ],
       "metrikaGoals": ["one", "two", "three"],
-      "img": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/icons/icon.svg"
+      "img": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/icons/icon.svg",
+      "urlTitle": "Some button title"
     }
   }
 }
diff --git a/src/models/constructor-items/sub-blocks.ts b/src/models/constructor-items/sub-blocks.ts
@@ -93,6 +93,7 @@ export interface QuoteProps extends Themable, CardBaseProps {
     logo: ImageProps;
     color?: string;
     url?: string;
+    urlTitle?: string;
     author?: AuthorItem;
     buttonText?: string;
     theme?: TextTheme;
@@ -115,6 +116,7 @@ export interface BasicCardProps
         AnalyticsEventsBase,
         Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size' | 'theme'> {
     url: string;
+    urlTitle?: string;
     icon?: ImageProps;
     target?: string;
     iconPosition?: IconPosition;

diff --git a/src/schema/validators/common.ts b/src/schema/validators/common.ts
@@ -253,6 +253,9 @@ export const LinkProps = {
         url: {
             type: 'string',
         },
+        urlTitle: {
+            type: 'string',
+        },
         arrow: {
             type: 'boolean',
         },
@@ -339,6 +342,9 @@ export const ButtonProps = {
     url: {
         type: 'string',
     },
+    urlTitle: {
+        type: 'string',
+    },
     primary: {
         type: 'boolean',
     },
@@ -504,6 +510,9 @@ export const AnchorProps = {
         url: {
             type: 'string',
         },
+        urlTitle: {
+            type: 'string',
+        },
     },
 };
 
@@ -538,6 +547,9 @@ export const TitleProps = {
         url: {
             type: 'string',
         },
+        urlTitle: {
+            type: 'string',
+        },
         resetMargin: {
             type: 'boolean',
         },

diff --git a/src/sub-blocks/BackgroundCard/schema.ts b/src/sub-blocks/BackgroundCard/schema.ts
@@ -18,6 +18,9 @@ export const BackgroundCard = {
             url: {
                 type: 'string',
             },
+            urlTitle: {
+                type: 'string',
+            },
             background: withTheme(ImageObjectProps),
             backgroundColor: {
                 type: 'string',

diff --git a/src/sub-blocks/BasicCard/__stories__/data.json b/src/sub-blocks/BasicCard/__stories__/data.json
@@ -14,7 +14,8 @@
   "default": {
     "content": {
       "title": "Lorem ipsum",
-      "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+      "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+      "urlTitle": "Opens in a new tab"
     }
   }
 }
diff --git a/src/sub-blocks/BasicCard/schema.ts b/src/sub-blocks/BasicCard/schema.ts
@@ -17,6 +17,9 @@ export const BasicCard = {
             url: {
                 type: 'string',
             },
+            urlTitle: {
+                type: 'string',
+            },
             icon: ImageProps,
             target: {
                 type: 'string',

diff --git a/src/sub-blocks/Quote/Quote.tsx b/src/sub-blocks/Quote/Quote.tsx
@@ -23,6 +23,7 @@ const Quote = (props: QuoteProps) => {
         logo,
         author,
         url,
+        urlTitle,
         buttonText,
         quoteType = QuoteType.Chevron,
     } = props;
@@ -49,6 +50,7 @@ const Quote = (props: QuoteProps) => {
                     href={url}
                     className={b('link-button', {theme: textTheme})}
                     onClick={handleButtonClick}
+                    title={urlTitle}
                 >
                     {buttonText}
                 </Button>

diff --git a/src/sub-blocks/Quote/__stories__/data.json b/src/sub-blocks/Quote/__stories__/data.json
@@ -34,6 +34,8 @@
         }
       },
       "url": "https://example.com",
+      "urlTitle": "Opens in a new tab",
+      "buttonText": "Button text",
       "author": {
         "firstName": "Lorem",
         "secondName": "ipsum",

diff --git a/src/sub-blocks/Quote/schema.ts b/src/sub-blocks/Quote/schema.ts
@@ -25,6 +25,9 @@ export const Quote = {
             url: {
                 type: 'string',
             },
+            urlTitle: {
+                type: 'string',
+            },
             buttonText: {
                 type: 'string',
             },