feat: add translations for components and sub blocks stories

Author: gorgeousvlad

src/components/Author/__stories__/Author.stories.tsx

@@ -2,45 +2,22 @@ import {Meta, Story} from '@storybook/react/types-6-0';
 import React from 'react';
 
 import Author from '../Author';
-import {AuthorProps, AuthorType} from '../../../models';
+import {AuthorProps} from '../../../models';
 import {COMPONENTS} from '../../../demo/constants';
 
+import data from './data.json';
+
 export default {
     component: Author,
     title: `${COMPONENTS}/Author`,
 } as Meta;
 
-const avatarNoWebp = 'https://storage.cloud-preprod.yandex.net/cloud-www-community-images/oleg.png';
-const avatarWebp =
-    'https://storage.cloud-preprod.yandex.net/cloud-www-assets/blog-assets/ru/posts/2022/oleg.png';
-const author = {
-    firstName: 'Олег',
-    secondName: 'Коверзнев',
-    description:
-        'В Яндексе с июля 2017 года. Возглавляет команду, которая формирует стратегию развития бизнеса Yandex.Cloud и выстраивает работу с клиентами и партнерами.',
-    avatar: avatarWebp,
-};
-
 const DefaultTemplate: Story<AuthorProps> = (args) => <Author {...args} />;
 
 export const Default = DefaultTemplate.bind({});
 export const TextUnderImage = DefaultTemplate.bind({});
 export const NoWebpInAvatar = DefaultTemplate.bind({});
 
-Default.args = {
-    author,
-    type: AuthorType.Line,
-};
-
-TextUnderImage.args = {
-    author,
-    type: AuthorType.Column,
-};
-
-NoWebpInAvatar.args = {
-    author: {
-        ...author,
-        avatar: avatarNoWebp,
-    },
-    type: AuthorType.Line,
-};
+Default.args = data.default.content as AuthorProps;
+TextUnderImage.args = data.textUnderImage.content as AuthorProps;
+NoWebpInAvatar.args = data.noWebpInAvatar.content as AuthorProps;

src/components/Author/__stories__/Author_content.json

@@ -0,0 +1,35 @@
+{
+  "default": {
+    "content": {
+      "author": {
+        "firstName": "Oleg",
+        "secondName": "Koverznev",
+        "description": "Joined Yandex in July 2017. Leads the team that is responsible for the Yandex Cloud business development strategy and customer and partner relations.",
+        "avatar": "https://storage.cloud-preprod.yandex.net/cloud-www-assets/blog-assets/ru/posts/2022/oleg.png"
+      },
+      "type": "line"
+    }
+  },
+  "textUnderImage": {
+    "content": {
+      "author": {
+        "firstName": "Oleg",
+        "secondName": "Koverznev",
+        "description": "Joined Yandex in July 2017. Leads the team that is responsible for the Yandex Cloud business development strategy and customer and partner relations.",
+        "avatar": "https://storage.cloud-preprod.yandex.net/cloud-www-assets/blog-assets/ru/posts/2022/oleg.png"
+      },
+      "type": "column"
+    }
+  },
+  "noWebpInAvatar": {
+    "content": {
+      "author": {
+        "firstName": "Oleg",
+        "secondName": "Koverznev",
+        "description": "Joined Yandex in July 2017. Leads the team that is responsible for the Yandex Cloud business development strategy and customer and partner relations.",
+        "avatar": "https://storage.cloud-preprod.yandex.net/cloud-www-community-images/oleg.png"
+      },
+      "type": "line"
+    }
+  }
+}

src/components/Author/__stories__/data.json

@@ -5,6 +5,8 @@ import BackLink, {BackLinkProps} from '../BackLink';
 import {BUTTONS_LINKS, COMPONENTS} from '../../../demo/constants';
 import {Col, Row} from '../../../grid';
 
+import data from './data.json';
+
 export default {
     component: BackLink,
     title: `${COMPONENTS}/${BUTTONS_LINKS}/BackLink`,
@@ -47,15 +49,5 @@ const ThemesSizesTemplate: Story<BackLinkProps> = (args) => (
 export const Default = DefaultTemplate.bind({});
 export const ThemesSizes = ThemesSizesTemplate.bind({});
 
-Default.args = {
-    url: '#',
-    title: 'ReactNode',
-    theme: 'default',
-    size: 'l',
-    shouldHandleBackAction: true,
-};
-
-ThemesSizes.args = {
-    url: '#',
-    shouldHandleBackAction: true,
-};
+Default.args = data.default.content as BackLinkProps;
+ThemesSizes.args = data.themesSizes.content as BackLinkProps;

src/components/BackLink/__stories__/BackLink.stories.tsx

@@ -0,0 +1,17 @@
+{
+  "default": {
+    "content": {
+      "url": "#",
+      "title": "ReactNode",
+      "theme": "default",
+      "size": "l",
+      "shouldHandleBackAction": true
+    }
+  },
+  "themesSizes": {
+    "content": {
+      "url": "#",
+      "shouldHandleBackAction": true
+    }
+  }
+}

src/components/BackLink/__stories__/BackLink_content.json

@@ -5,6 +5,8 @@ import BackgroundImage from '../BackgroundImage';
 import {COMPONENTS, MEDIA} from '../../../demo/constants';
 import {BackgroundImageProps} from '../../../models';
 
+import data from './data.json';
+
 export default {
     component: BackgroundImage,
     title: `${COMPONENTS}/${MEDIA}/BackgroundImage`,
@@ -18,13 +20,4 @@ const DefaultTemplate: Story<BackgroundImageProps> = (args) => (
 
 export const Default = DefaultTemplate.bind({});
 
-Default.args = {
-    src: 'https://storage.cloud-preprod.yandex.net/berdysheva-test/bg_card_0001.png',
-    alt: 'string',
-    disableCompress: true,
-    style: {
-        height: '500px',
-    },
-    imageClassName: '',
-    hide: false,
-};
+Default.args = data.default.content as BackgroundImageProps;

src/components/BackLink/__stories__/data.json

@@ -0,0 +1,14 @@
+{
+  "default": {
+    "content": {
+      "src": "https://storage.cloud-preprod.yandex.net/berdysheva-test/bg_card_0001.png",
+      "alt": "string",
+      "disableCompress": true,
+      "style": {
+        "height": "500px"
+      },
+      "imageClassName": "",
+      "hide": false
+    }
+  }
+}

src/components/BackgroundImage/__stories__/BackgroundImage.stories.tsx

@@ -4,6 +4,8 @@ import React from 'react';
 import BackgroundMedia, {FullProps} from '../BackgroundMedia';
 import {COMPONENTS, MEDIA} from '../../../demo/constants';
 
+import data from './data.json';
+
 export default {
     component: BackgroundMedia,
     title: `${COMPONENTS}/${MEDIA}/BackgroundMedia`,
@@ -24,30 +26,6 @@ export const Image = DefaultTemplate.bind({});
 export const ImageSlider = DefaultTemplate.bind({});
 export const Video = DefaultTemplate.bind({});
 
-Image.args = {
-    image: {
-        src: 'https://storage.yandexcloud.net/cloud-www-assets/constructor/services/tracker/background_tracker_x2.png',
-        alt: 'Картинка',
-        disableCompress: true,
-    },
-};
-
-ImageSlider.args = {
-    image: [
-        'https://storage.yandexcloud.net/cloud-www-assets/constructor/services/tracker/background_tracker_x2.png',
-        'https://storage.yandexcloud.net/cloud-www-assets/constructor/services/datalens/background_datalens_2x.png',
-    ],
-};
-
-Video.args = {
-    video: {
-        src: [
-            'https://storage.yandexcloud.net/cloud-www-assets/constructor/main/main-visual/main_video.mp4',
-            'https://storage.yandexcloud.net/cloud-www-assets/constructor/main/main-visual/main_video.ogv',
-            'https://storage.yandexcloud.net/cloud-www-assets/constructor/main/main-visual/main_video.webm',
-            'https://storage.yandexcloud.net/cloud-www-assets/constructor/main/main-visual/mobile.png',
-        ],
-        loop: {start: 0},
-    },
-    image: 'https://storage.yandexcloud.net/cloud-www-assets/constructor/main/main-visual/main.png',
-};
+Image.args = data.image.content;
+ImageSlider.args = data.imageSlider.content;
+Video.args = data.video.content;