feat: added description field to companies block (#692)

* feat: added description field to companies block

* feat: use Titel Block instead of h2 and YFMWrapper

* Update src/blocks/Companies/__stories__/Companies.mdx

Co-authored-by: Juli Ovechkina <[email protected]>

* feat: added story with description

* feat: added blockHeaderTransform

* feat: added description to data.json

---------

Co-authored-by: Juli Ovechkina <[email protected]>

Author: VitaliiDC8

src/blocks/Companies/Companies.scss

@@ -8,10 +8,6 @@ $block: '.#{$ns}companies-block';
 
     text-align: center;
 
-    &__title {
-        @include heading2();
-    }
-
     &__images {
         margin-top: $indentM;
     }

src/blocks/Companies/Companies.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Image} from '../../components';
+import {Image, Title} from '../../components';
 import AnimateBlock from '../../components/AnimateBlock/AnimateBlock';
 import {useTheme} from '../../context/theme';
 import {CompaniesBlockProps} from '../../models';
@@ -10,14 +10,14 @@ import './Companies.scss';
 
 const b = block('companies-block');
 
-export const CompaniesBlock = ({title, images, animated}: CompaniesBlockProps) => {
+export const CompaniesBlock = ({title, description, images, animated}: CompaniesBlockProps) => {
     const theme = useTheme();
     const themedImages = getThemedValue(images, theme) || {};
 
     return (
         <AnimateBlock className={b()} offset={150} animate={animated}>
             <div className={b('content')}>
-                <h2 className={b('title')}>{title}</h2>
+                <Title title={title} subtitle={description} colSizes={{all: 12, sm: 12}}></Title>
                 <div className={b('images')}>
                     <Image {...themedImages} className={b('image')} />
                 </div>

src/blocks/Companies/__stories__/Companies.mdx

@@ -11,6 +11,8 @@ import * as CompaniesStories from './Companies.stories.tsx';
 
 `title: string` — Title
 
+`description?: string` — text (with YFM support)
+
 `images: ImageDeviceProps` — Images for different screen sizes (see in common types)
 </StoryTemplate>
 

src/blocks/Companies/__stories__/Companies.stories.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import {Meta, StoryFn} from '@storybook/react';
 
+import {yfmTransform} from '../../../../.storybook/utils';
 import {PageConstructor} from '../../../containers/PageConstructor/PageConstructor';
 import {CompaniesBlockModel, CompaniesBlockProps} from '../../../models';
 import Companies from '../Companies';
@@ -17,6 +18,17 @@ const DefaultTemplate: StoryFn<CompaniesBlockModel> = (args) => (
     <PageConstructor content={{blocks: [args]}} />
 );
 
+const WithDescriptionTemplate: StoryFn<CompaniesBlockModel> = (args) => (
+    <PageConstructor content={{blocks: [args]}} />
+);
+
 export const Default = DefaultTemplate.bind({});
+export const WithDescription = WithDescriptionTemplate.bind({});
+
+const transformedText = yfmTransform(data.withDescription.content.description);
 
 Default.args = data.default.content as CompaniesBlockProps;
+WithDescription.args = {
+    ...data.withDescription.content,
+    description: transformedText,
+} as CompaniesBlockProps;

src/blocks/Companies/__stories__/data.json

@@ -18,5 +18,26 @@
         }
       }
     }
+  },
+  "withDescription": {
+    "content": {
+      "type": "companies-block",
+      "title": "Page constructor",
+      "description": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
+      "images": {
+        "light": {
+          "desktop": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/logo-svg_12-12_desktop_light.svg",
+          "tablet": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/logo-svg_12-12_tablet_light.svg",
+          "mobile": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/logo-svg_12-12_mobile_light.svg",
+          "alt": "Page constructor"
+        },
+        "dark": {
+          "desktop": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/logo-svg_12-12_desktop_dark.svg",
+          "tablet": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/logo-svg_12-12_tablet_dark.svg",
+          "mobile": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/logo-svg_12-12_mobile_dark.svg",
+          "alt": "Page constructor"
+        }
+      }
+    }
   }
 }

src/models/constructor-items/blocks.ts

@@ -212,6 +212,7 @@ export interface BannerBlockProps extends BannerCardProps, Animatable {}
 
 export interface CompaniesBlockProps extends Animatable {
     title: string;
+    description?: string;
     images: ThemeSupporting<ImageDeviceProps>;
 }
 

src/text-transform/config.ts

@@ -214,6 +214,7 @@ export const config: BlocksConfig = {
         },
     ],
     [BlockType.SliderBlock]: blockHeaderTransformer,
+    [BlockType.CompaniesBlock]: blockHeaderTransformer,
     [BlockType.QuestionsBlock]: [
         {
             fields: ['title'],