feat: add title to feed block (#284)

Author: qradle-yndx

.mocks/blogPage.json

@@ -15,10 +15,7 @@
         "type": "blog-feed-block",
         "resetPaddings": true,
         "image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img_8-12_light.png",
-        "title": {
-          "text": "Blog",
-          "textSize": "l"
-        }
+        "title": "Blog"
       }
     ]
   },

.mocks/utils.ts

@@ -42,6 +42,7 @@ export const getDefaultStoryArgs = () => {
         paddingTop: 'l',
         text: 'Lorem ipsum dolor',
         image: 'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img_8-12_light.png',
+        title: 'Blog',
     };
 };
 

src/blocks/Feed/Feed.tsx

@@ -21,7 +21,7 @@ const CONTAINER_ID = 'blog-cards';
 const PAGE_QUERY = 'page';
 const FIRST_PAGE = 1;
 
-export const Feed = ({image}: FeedProps) => {
+export const Feed = ({image, title}: FeedProps) => {
     const {
         posts,
         totalCount,
@@ -239,6 +239,7 @@ export const Feed = ({image}: FeedProps) => {
                     url: image,
                     disableCompress: true,
                 }}
+                title={title}
             />
             {errorLoad ? (
                 <PostsError onButtonClick={handleOnErrorReload} />

src/blocks/Feed/README.md

@@ -3,3 +3,4 @@ The data in this component is taken from contexts.
 | Property | Type     | Required | Description           |
 | :------- | :------- | :------- | :-------------------- |
 | image    | `string` | `true`   | Image for feed header |
+| title    | `string` | `false`  | Title for feed header |

src/blocks/Feed/schema.ts

@@ -1,28 +1,22 @@
 import {validators} from '@gravity-ui/page-constructor';
 
 const {
-    common: {TitleProps, BlockBaseProps},
+    common: {BlockBaseProps},
 } = validators;
 
 import {BlockType} from '../../models/common';
 
 export const Feed = {
     [BlockType.Feed]: {
         additionalProperties: false,
-        required: [],
+        required: 'image',
         properties: {
             ...BlockBaseProps,
-            title: TitleProps,
-            image: {
-                type: 'string',
-            },
-            description: {
+            title: {
                 type: 'string',
-                contentType: 'text',
             },
-            size: {
+            image: {
                 type: 'string',
-                enum: ['s', 'm'],
             },
         },
     },

src/components/FeedHeader/FeedHeader.tsx

@@ -31,6 +31,7 @@ export const FeedHeader = ({
     verticalOffset = 'l',
     className,
     queryParams,
+    title,
 }: FeedHeaderContainerProps) => {
     const backgroundThemed = background && getThemedValue(background, theme as Theme);
 
@@ -57,6 +58,7 @@ export const FeedHeader = ({
                     />
                 ) : null}
                 <Controls
+                    title={title}
                     tags={tags}
                     services={services}
                     handleLoadData={handleLoadData}

src/components/FeedHeader/components/Controls/Controls.tsx

@@ -31,6 +31,7 @@ export type ControlsProps = {
     tags?: SelectItem[];
     services?: SelectItem[];
     queryParams: Query;
+    title?: string;
 };
 
 const ICON_SIZE = 16;
@@ -42,6 +43,7 @@ export const Controls = ({
     tags = [],
     services = [],
     queryParams,
+    title = i18n(Keyset.Title),
 }: ControlsProps) => {
     const {hasLikes} = React.useContext(LikesContext);
     const handleAnalyticsTag = useAnalytics(DefaultEventNames.Tag);
@@ -142,7 +144,7 @@ export const Controls = ({
     return (
         <MobileProvider mobile={false}>
             <div className={b('header')}>
-                <h1 className={b('header-item', {title: true})}>{i18n(Keyset.Title)}</h1>
+                <h1 className={b('header-item', {title: true})}>{title}</h1>
                 <div className={b('header-item', {filters: true})}>
                     <div className={b('filter-item')}>
                         <Search

src/models/blocks.ts

@@ -84,6 +84,7 @@ export type YFMProps = {
 
 export type FeedProps = {
     image: string;
+    title?: string;
 };
 
 export type FormProps = {