feat: alt attributes and titles, fix yfm plugins bug (#655)

* feat: alt attributes for Quote block and Author avatar
* feat: share links with labels and titles
* feat: alt attributes are not present at all by default
* fix: yfm plugins paramter bug

src/blocks/Share/Share.tsx

@@ -44,6 +44,8 @@ const Share = ({items, title}: ShareBlockProps) => {
                     const url = getAbsolutePath(hostname, pathname);
                     const socialUrl = getShareLink(url, type);
                     const icon = icons[type];
+                    const urlTitle = i18n(`${type}-title`);
+                    const buttonLabel = i18n(`${type}-label`);
 
                     return (
                         <Button
@@ -54,6 +56,10 @@ const Share = ({items, title}: ShareBlockProps) => {
                             href={socialUrl}
                             className={b('item', {type: type.toLowerCase()})}
                             onClick={handleButtonClick}
+                            title={urlTitle}
+                            extraProps={{
+                                'aria-label': buttonLabel,
+                            }}
                         >
                             {icon && <Icon data={icon} size={24} className={b('icon', {type})} />}
                         </Button>

src/blocks/Share/i18n/en.json

@@ -1,3 +1,13 @@
 {
-  "constructor-share": "Share"
+  "constructor-share": "Share",
+  "facebook-title": "Opens in a new tab",
+  "twitter-title": "Opens in a new tab",
+  "linkedin-title": "Opens in a new tab",
+  "vk-title": "Opens in a new tab",
+  "telegram-title": "Opens in a new tab",
+  "facebook-label": "Facebook logo",
+  "twitter-label": "Twitter logo",
+  "linkedin-label": "LinkedIn logo",
+  "vk-label": "VK logo",
+  "telegram-label": "Telegram logo"
 }

src/blocks/Share/i18n/ru.json

@@ -1,3 +1,13 @@
 {
-  "constructor-share": "Поделиться"
+  "constructor-share": "Поделиться",
+  "facebook-title": "Откроется в новой вкладке",
+  "twitter-title": "Откроется в новой вкладке",
+  "linkedin-title": "Откроется в новой вкладке",
+  "vk-title": "Откроется в новой вкладке",
+  "telegram-title": "Откроется в новой вкладке",
+  "facebook-label": "Facebook лого",
+  "twitter-label": "Twitter лого",
+  "linkedin-label": "LinkedIn лого",
+  "vk-label": "VK лого",
+  "telegram-label": "Telegram лого"
 }

src/components/Author/Author.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
 
-import {AuthorProps, AuthorType, WithChildren} from '../../models';
+import {AuthorProps, AuthorType, ImageProps, WithChildren} from '../../models';
 import {block} from '../../utils';
+import {getMediaImage} from '../Media/Image/utils';
 import {Image} from '../index';
 
 import './Author.scss';
@@ -13,12 +14,17 @@ const Author = (props: WithChildren<AuthorProps>) => {
     const {firstName, secondName, description, avatar} = author;
 
     const name = secondName ? `${firstName} ${secondName}` : firstName;
+    const isAvatarJSX = React.isValidElement(avatar);
+    let avatarProps = {};
+    if (!isAvatarJSX && avatar) {
+        avatarProps = getMediaImage(avatar as ImageProps);
+    }
 
     return (
         <div className={b({type}, className)} data-qa={qa}>
             {avatar && (
                 <div className={b('avatar', authorContainerClassName)}>
-                    {typeof avatar === 'string' ? <Image src={avatar} /> : avatar}
+                    {isAvatarJSX ? avatar : <Image {...avatarProps} />}
                 </div>
             )}
             <div className={b('label')}>

src/components/CardBase/CardBase.tsx

@@ -30,6 +30,7 @@ export interface CardBaseProps extends AnalyticsEventsBase, CardBaseParams {
     metrikaGoals?: MetrikaGoal;
     pixelEvents?: ButtonPixel;
     qa?: string;
+    extraProps?: React.HTMLAttributes<HTMLElement>;
 }
 
 export interface CardHeaderBaseProps {
@@ -61,6 +62,7 @@ export const Layout = (props: CardBaseProps) => {
         border = 'shadow',
         urlTitle,
         qa,
+        extraProps = {},
     } = props;
     const handleMetrika = useMetrika();
     const handleAnalytics = useAnalytics(DefaultEventNames.CardBase, url);
@@ -133,14 +135,15 @@ export const Layout = (props: CardBaseProps) => {
                 extraProps={{
                     draggable: false,
                     onDragStart: (e: React.DragEvent<HTMLAnchorElement>) => e.preventDefault(),
+                    ...extraProps,
                 }}
                 qa={qa}
             >
                 {cardContent}
             </Link>
         </RouterLink>
     ) : (
-        <div className={fullClassName} data-qa={qa}>
+        <div className={fullClassName} data-qa={qa} {...extraProps}>
             {cardContent}
         </div>
     );

src/components/Image/Image.tsx

@@ -7,8 +7,6 @@ import {getQaAttrubutes} from '../../utils';
 import {isCompressible} from '../../utils/imageCompress';
 import ImageBase from '../ImageBase/ImageBase';
 
-import i18n from './i18n';
-
 export interface ImageProps extends Partial<ImageObjectProps>, Partial<ImageDeviceProps>, QAProps {
     style?: CSSProperties;
     className?: string;
@@ -49,7 +47,7 @@ const Image = (props: ImageProps) => {
     const projectSettings = useContext(ProjectSettingsContext);
     const {
         src: imageSrc,
-        alt = i18n('img-alt'),
+        alt,
         disableCompress,
         tablet,
         desktop,

src/components/Image/__tests__/Image.test.tsx

@@ -9,7 +9,6 @@ import {
 } from '../../../../test-utils/shared/common';
 import {testSourceProps} from '../../../../test-utils/shared/image';
 import Image, {ImageProps} from '../Image';
-import i18n from '../i18n';
 
 const qaId = 'image-component';
 
@@ -106,11 +105,11 @@ describe('Image', () => {
         });
     });
 
-    test('render default "alt"', () => {
+    test('render without attribute "alt" if not provided', () => {
         render(<Image src={imageSrc} qa={qaId} />);
 
         const component = screen.getByRole('img');
-        expect(component).toHaveAttribute('alt', i18n('img-alt'));
+        expect(component).not.toHaveAttribute('alt');
     });
 
     test('render custom "alt"', () => {

src/models/constructor-items/common.ts

@@ -336,7 +336,7 @@ export interface AuthorItem {
     firstName: string;
     secondName: string;
     description?: string;
-    avatar?: string | JSX.Element;
+    avatar?: ImageProps | JSX.Element;
 }
 
 export interface HeaderBreadCrumbsProps extends ClassNameProps {

src/models/constructor-items/sub-blocks.ts

@@ -90,7 +90,7 @@ export interface HubspotFormProps extends HubspotEventHandlers, AnalyticsEventsB
 export interface QuoteProps extends Themable, CardBaseProps {
     text: string;
     image: ThemedImage;
-    logo: string;
+    logo: ImageProps;
     color?: string;
     url?: string;
     author?: AuthorItem;

src/schema/validators/common.ts

@@ -1,4 +1,4 @@
-import {ImageProps, imageUrlPattern} from '../../components/Image/schema';
+import {ImageProps} from '../../components/Image/schema';
 import {
     CustomControlsButtonPositioning,
     CustomControlsType,
@@ -321,10 +321,7 @@ export const authorItem = {
             type: 'string',
             contentType: 'text',
         },
-        avatar: {
-            type: 'string',
-            pattern: imageUrlPattern,
-        },
+        avatar: ImageProps,
         description: {
             type: 'string',
             contentType: 'yfm',

src/sub-blocks/Quote/Quote.tsx

@@ -55,14 +55,16 @@ const Quote = (props: QuoteProps) => {
         </div>
     );
 
+    const logoProps = getMediaImage(logo);
+
     return (
         <div
             className={b({theme: textTheme, border})}
             style={color ? {backgroundColor: color} : {}}
         >
             <div key={text} className={b('content-wrapper')}>
                 <div>
-                    <Image className={b('logo')} src={logo} />
+                    <Image className={b('logo')} {...logoProps} />
                     <div className={b('content')}>
                         <span className={b('text')}>
                             <HTML>{text}</HTML>

src/sub-blocks/Quote/__stories__/data.json

@@ -38,9 +38,15 @@
         "firstName": "Lorem",
         "secondName": "ipsum",
         "description": "Lorem ipsum",
-        "avatar": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img_6-12_light.png"
+        "avatar": {
+          "src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img_6-12_light.png",
+          "alt": "Avatar alt"
+        }
       },
-      "logo": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-mini_6-12_light.png"
+      "logo": {
+        "src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-mini_6-12_light.png",
+        "alt": "Logo alt"
+      }
     }
   }
 }

src/sub-blocks/Quote/schema.ts

@@ -1,4 +1,4 @@
-import {ImageProps, imageUrlPattern} from '../../components/Image/schema';
+import {ImageProps} from '../../components/Image/schema';
 import {BaseProps, ThemeProps, authorItem, withTheme} from '../../schema/validators/common';
 
 export const Quote = {
@@ -12,10 +12,7 @@ export const Quote = {
                 contentType: 'text',
             },
             image: withTheme(ImageProps),
-            logo: {
-                type: 'string',
-                pattern: imageUrlPattern,
-            },
+            logo: ImageProps,
             color: {
                 type: 'string',
             },

src/text-transform/transformers.ts

@@ -78,7 +78,9 @@ function transformBlock(
     }
 
     if ('children' in block && block.children) {
-        block.children = transformBlocks(block.children as ConstructorBlock[], lang, blocksConfig);
+        block.children = transformBlocks(block.children as ConstructorBlock[], lang, blocksConfig, {
+            plugins,
+        });
     }
 
     return block;