fix(BlockHeader): refactoring

CODEOWNERS

@@ -1,6 +1,5 @@
-* @gorgeousvlad
+* @gorgeousvlad @yuberdysheva
 
 @aapolkovsky
 @aeksandla
 @Lunatic174
-@yuberdysheva

package.json

@@ -133,8 +133,5 @@
     "*.{json,yaml,yml,md}": [
       "prettier --write"
     ]
-  },
-  "publishConfig": {
-    "tag": "alpha"
   }
 }

src/blocks/CardLayout/schema.ts

@@ -3,7 +3,7 @@ import {
     containerSizesObject,
     ChildrenCardsProps,
     BlockBaseProps,
-    TitleProps,
+    BlockHeaderProps,
 } from '../../schema/validators/common';
 
 export const CardLayoutProps = {
@@ -12,13 +12,7 @@ export const CardLayoutProps = {
     properties: {
         ...BlockBaseProps,
         ...AnimatableProps,
-        title: {
-            oneOf: [{type: 'string', contentType: 'text'}, TitleProps],
-        },
-        description: {
-            type: 'string',
-            contentType: 'yfm',
-        },
+        ...BlockHeaderProps,
         colSizes: containerSizesObject,
         children: ChildrenCardsProps,
     },

src/blocks/ExtendedFeatures/schema.ts

@@ -3,7 +3,7 @@ import {
     containerSizesObject,
     LinkProps,
     BlockBaseProps,
-    TitleProps,
+    BlockHeaderProps,
 } from '../../schema/validators/common';
 import {filteredArray} from '../../schema/validators/utils';
 
@@ -37,13 +37,7 @@ export const ExtendedFeaturesBlock = {
         properties: {
             ...BlockBaseProps,
             ...AnimatableProps,
-            title: {
-                oneOf: [{type: 'string', contentType: 'text'}, TitleProps],
-            },
-            description: {
-                type: 'string',
-                contentType: 'yfm',
-            },
+            ...BlockHeaderProps,
             items: filteredArray(ExtendedFeaturesItem),
             colSizes: containerSizesObject,
         },

src/blocks/LinkTable/schema.ts

@@ -1,13 +1,13 @@
 import {filteredArray} from '../../schema/validators/utils';
-import {LinkProps, BlockBaseProps, TitleProps} from '../../schema/validators/common';
+import {LinkProps, BlockBaseProps, BlockHeaderProps} from '../../schema/validators/common';
 
 export const LinkTableBlock = {
     'link-table-block': {
         additionalProperties: false,
         required: ['items'],
         properties: {
             ...BlockBaseProps,
-            title: TitleProps,
+            ...BlockHeaderProps,
             items: {
                 type: 'array',
                 items: filteredArray(LinkProps),

src/blocks/PromoFeaturesBlock/schema.ts

@@ -1,4 +1,4 @@
-import {AnimatableProps, BlockBaseProps, TitleProps} from '../../schema/validators/common';
+import {AnimatableProps, BlockBaseProps, BlockHeaderProps} from '../../schema/validators/common';
 import {filteredArray} from '../../schema/validators/utils';
 import {Media} from '../Media/schema';
 
@@ -28,13 +28,7 @@ export const PromoFeaturesBlock = {
         properties: {
             ...BlockBaseProps,
             ...AnimatableProps,
-            title: {
-                oneOf: [{type: 'string', contentType: 'text'}, TitleProps],
-            },
-            description: {
-                type: 'string',
-                contentType: 'text',
-            },
+            ...BlockHeaderProps,
             theme: {
                 enum: ['grey', 'default'],
             },

src/blocks/Slider/schema.ts

@@ -1,10 +1,10 @@
 import {
     BlockBaseProps,
-    TitleProps,
     AnimatableProps,
     ChildrenCardsProps,
     sliderSizesObject,
     textSize,
+    BlockHeaderProps,
 } from '../../schema/validators/common';
 
 const LoadableProps = {
@@ -58,11 +58,6 @@ export const SliderProps = {
     arrows: {
         type: 'boolean',
     },
-    description: {
-        type: 'string',
-        contentType: 'text',
-    },
-    title: TitleProps,
     randomOrder: {
         type: 'boolean',
     },
@@ -84,6 +79,7 @@ export const SliderBlock = {
             ...BlockBaseProps,
             ...AnimatableProps,
             ...SliderProps,
+            ...BlockHeaderProps,
         },
     },
 };

src/blocks/Tabs/schema.ts

@@ -3,7 +3,7 @@ import {
     LinkProps,
     withTheme,
     BlockBaseProps,
-    TitleProps,
+    BlockHeaderProps,
     MediaProps,
     containerSizesArray,
     sizeNumber,
@@ -44,11 +44,7 @@ export const TabsBlock = {
         required: ['title', 'items'],
         properties: {
             ...BlockBaseProps,
-            title: TitleProps,
-            description: {
-                type: 'string',
-                contentType: 'text',
-            },
+            ...BlockHeaderProps,
             tabsColSizes: containerSizesArray.reduce(
                 (acc, size) => ({...acc, [size]: sizeNumber}),
                 {},

src/components/BlockHeader/BlockHeader.scss

@@ -1,24 +1,22 @@
 @import '../../../styles/variables.scss';
 @import '../../../styles/mixins.scss';
 
-$block: '.#{$ns}BlockHeader';
+$block: '.#{$ns}block-header';
 
 #{$block} {
     &__description {
-        @include text-size(body-2);
+        .yfm {
+            @include text-size(body-3);
+        }
 
-        margin-top: $indentXS;
+        margin-top: $indentXXS;
 
         &_titleSize_s {
-            margin-top: 8px;
-        }
-
-        &_titleSize_l {
-            @include text-size(body-3);
-        }
+            margin-top: $indentXXXS;
 
-        a {
-            @include link();
+            .yfm {
+                @include text-size(body-2);
+            }
         }
     }
 }

src/components/BlockHeader/BlockHeader.tsx

@@ -3,11 +3,12 @@ import React from 'react';
 import {block} from '../../utils';
 import {BlockHeaderProps as BlockHeaderParams, TitleProps, ClassNameProps} from '../../models';
 import {Col, GridColumnSizesType} from '../../grid';
-import {Title, HTML} from '../';
+import {Title} from '../';
+import YFMWrapper from '../YFMWrapper/YFMWrapper';
 
 import './BlockHeader.scss';
 
-const b = block('BlockHeader');
+const b = block('block-header');
 
 export interface BlockHeaderProps extends BlockHeaderParams {
     colSizes?: GridColumnSizesType;
@@ -34,9 +35,9 @@ const BlockHeader = ({
                 </Col>
             )}
             {description && (
-                <Col reset sizes={{all: 12, sm: 8}}>
+                <Col reset sizes={colSizes}>
                     <div className={b('description', {titleSize: titleProps?.textSize})}>
-                        <HTML>{description}</HTML>
+                        <YFMWrapper content={description} modifiers={{constructor: true}} />
                     </div>
                 </Col>
             )}

src/components/BlockHeader/__stories__/BlockHeader.stories.tsx

@@ -1,15 +1,16 @@
+import React from 'react';
 import {Meta, Story} from '@storybook/react/types-6-0';
 import {ClassNameProps, TitleProps} from '../../../models';
-import React from 'react';
 
 import BlockHeader, {BlockHeaderProps} from '../BlockHeader';
-import {COMPONENTS, HEADERS} from '../../../demo/constants';
+import {COMPONENTS} from '../../../demo/constants';
 
 import data from './data.json';
+import {yfmTransform} from '../../../../.storybook/utils';
 
 export default {
     component: BlockHeader,
-    title: `${COMPONENTS}/${HEADERS}/BlockHeader`,
+    title: `${COMPONENTS}/BlockHeader`,
 } as Meta;
 
 const DefaultTemplate: Story<BlockHeaderProps & ClassNameProps> = (args) => (
@@ -30,10 +31,28 @@ const SizesTemplate: Story<BlockHeaderProps & ClassNameProps> = (args) => (
     </div>
 );
 
+const DefaultArgs = {
+    ...data.default.content,
+    description: yfmTransform(data.default.content.description),
+};
+
 export const Default = DefaultTemplate.bind({});
 export const TitleLink = DefaultTemplate.bind({});
+export const CustomTitle = DefaultTemplate.bind({});
 export const Sizes = SizesTemplate.bind({});
 
-Default.args = data.default.content as BlockHeaderProps;
-TitleLink.args = data.titleLink.content as BlockHeaderProps;
-Sizes.args = data.customTitle.content as BlockHeaderProps;
+Default.args = {
+    ...DefaultArgs,
+} as BlockHeaderProps;
+TitleLink.args = {
+    ...DefaultArgs,
+    title: data.titleLink.content.title,
+} as BlockHeaderProps;
+CustomTitle.args = {
+    ...DefaultArgs,
+    title: data.customTitle.content.title,
+} as BlockHeaderProps;
+Sizes.args = {
+    ...DefaultArgs,
+    title: data.customTitle.content.title,
+} as BlockHeaderProps;

src/components/BlockHeader/__stories__/data.json

@@ -1,8 +1,8 @@
 {
   "default": {
     "content": {
-      "title": "Lorem ipsum",
-      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo <a href=\"#\">consequat</a>."
+      "title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
+      "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."
     }
   },
   "customTitle": {
@@ -11,17 +11,15 @@
         "text": "Lorem ipsum",
         "url": "https://example.com",
         "custom": "Some react node"
-      },
-      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo <a href=\"#\">consequat</a>."
+      }
     }
   },
   "titleLink": {
     "content": {
       "title": {
         "text": "Lorem ipsum",
         "url": "https://example.com"
-      },
-      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo <a href=\"#\">consequat</a>."
+      }
     }
   },
   "sizes": {

src/demo/constants.ts

@@ -3,5 +3,4 @@ export const COMPONENTS = 'Components';
 export const CONTAINERS = 'Containers';
 export const BUTTONS_LINKS = 'Links and buttons';
 export const CARDS = 'Cards';
-export const HEADERS = 'Headers';
 export const MEDIA = 'Pics, video, DataLens';

src/schema/validators/common.ts

@@ -500,3 +500,13 @@ export const CardBase = {
         enum: ['border', 'shadow', 'none'],
     },
 };
+
+export const BlockHeaderProps = {
+    title: {
+        oneOf: [{type: 'string'}, TitleProps],
+    },
+    description: {
+        type: 'string',
+        contentType: 'yfm',
+    },
+};