diff --git a/src/blocks/Share/Share.tsx b/src/blocks/Share/Share.tsx index ec3534366..59e01a165 100644 --- a/src/blocks/Share/Share.tsx +++ b/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 ( diff --git a/src/blocks/Share/i18n/en.json b/src/blocks/Share/i18n/en.json index 73020ef8e..2e172a1e2 100644 --- a/src/blocks/Share/i18n/en.json +++ b/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" } diff --git a/src/blocks/Share/i18n/ru.json b/src/blocks/Share/i18n/ru.json index 19dd3e2e3..0093fcb31 100644 --- a/src/blocks/Share/i18n/ru.json +++ b/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 лого" } diff --git a/src/components/Author/Author.tsx b/src/components/Author/Author.tsx index 743dd829b..f3ef78648 100644 --- a/src/components/Author/Author.tsx +++ b/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) => { 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 (
{avatar && (
- {typeof avatar === 'string' ? : avatar} + {isAvatarJSX ? avatar : }
)}
diff --git a/src/components/CardBase/CardBase.tsx b/src/components/CardBase/CardBase.tsx index e5a9e759c..a6ec22b31 100644 --- a/src/components/CardBase/CardBase.tsx +++ b/src/components/CardBase/CardBase.tsx @@ -30,6 +30,7 @@ export interface CardBaseProps extends AnalyticsEventsBase, CardBaseParams { metrikaGoals?: MetrikaGoal; pixelEvents?: ButtonPixel; qa?: string; + extraProps?: React.HTMLAttributes; } 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,6 +135,7 @@ export const Layout = (props: CardBaseProps) => { extraProps={{ draggable: false, onDragStart: (e: React.DragEvent) => e.preventDefault(), + ...extraProps, }} qa={qa} > @@ -140,7 +143,7 @@ export const Layout = (props: CardBaseProps) => { ) : ( -
+
{cardContent}
); diff --git a/src/components/Image/Image.tsx b/src/components/Image/Image.tsx index aa38dfcc7..89f73f264 100644 --- a/src/components/Image/Image.tsx +++ b/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, Partial, 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, diff --git a/src/components/Image/__tests__/Image.test.tsx b/src/components/Image/__tests__/Image.test.tsx index e0124574b..daf8ea9b3 100644 --- a/src/components/Image/__tests__/Image.test.tsx +++ b/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(); const component = screen.getByRole('img'); - expect(component).toHaveAttribute('alt', i18n('img-alt')); + expect(component).not.toHaveAttribute('alt'); }); test('render custom "alt"', () => { diff --git a/src/components/Image/i18n/en.json b/src/components/Image/i18n/en.json deleted file mode 100644 index 215f03981..000000000 --- a/src/components/Image/i18n/en.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "img-alt": "" -} diff --git a/src/components/Image/i18n/index.ts b/src/components/Image/i18n/index.ts deleted file mode 100644 index 7d6c1c0e6..000000000 --- a/src/components/Image/i18n/index.ts +++ /dev/null @@ -1,8 +0,0 @@ -import {registerKeyset} from '../../../utils/registerKeyset'; - -import en from './en.json'; -import ru from './ru.json'; - -const COMPONENT = 'Image'; - -export default registerKeyset({en, ru}, COMPONENT); diff --git a/src/components/Image/i18n/ru.json b/src/components/Image/i18n/ru.json deleted file mode 100644 index 215f03981..000000000 --- a/src/components/Image/i18n/ru.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "img-alt": "" -} diff --git a/src/models/constructor-items/common.ts b/src/models/constructor-items/common.ts index 5906c8b2f..3e5b5c825 100644 --- a/src/models/constructor-items/common.ts +++ b/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 { diff --git a/src/models/constructor-items/sub-blocks.ts b/src/models/constructor-items/sub-blocks.ts index f8e47a888..ebde635f7 100644 --- a/src/models/constructor-items/sub-blocks.ts +++ b/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; diff --git a/src/schema/validators/common.ts b/src/schema/validators/common.ts index 4055111fd..58cdaa10a 100644 --- a/src/schema/validators/common.ts +++ b/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', diff --git a/src/sub-blocks/Quote/Quote.tsx b/src/sub-blocks/Quote/Quote.tsx index bc0295c5c..9873a06e5 100644 --- a/src/sub-blocks/Quote/Quote.tsx +++ b/src/sub-blocks/Quote/Quote.tsx @@ -55,6 +55,8 @@ const Quote = (props: QuoteProps) => {
); + const logoProps = getMediaImage(logo); + return (
{ >
- +
{text} diff --git a/src/sub-blocks/Quote/__stories__/data.json b/src/sub-blocks/Quote/__stories__/data.json index f9e3d7994..55d3f63e0 100644 --- a/src/sub-blocks/Quote/__stories__/data.json +++ b/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" + } } } } diff --git a/src/sub-blocks/Quote/schema.ts b/src/sub-blocks/Quote/schema.ts index ae17ec339..230b92195 100644 --- a/src/sub-blocks/Quote/schema.ts +++ b/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', }, diff --git a/src/text-transform/transformers.ts b/src/text-transform/transformers.ts index 2375ae7cd..68287a4ab 100644 --- a/src/text-transform/transformers.ts +++ b/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;