feat: add additional info (#1171)

Author: aeksandla

src/blocks/Header/Header.scss

@@ -5,6 +5,8 @@ $block: '.#{$ns}header-block';
 $backgroundWidth: 1440px;
 
 #{$block} {
+    $root: &;
+
     position: relative;
 
     &_full-width {
@@ -36,6 +38,14 @@ $backgroundWidth: 1440px;
                     color: var(--g-color-text-light-primary);
                 }
             }
+
+            #{$block}__additional-info {
+                .yfm p {
+                    color: var(
+                        --g-color-text-light-secondary
+                    ) !important; /* stylelint-disable-line declaration-no-important */ // the selector that interrupts this color is too big;
+                }
+            }
         }
 
         &_vertical-offset {
@@ -97,6 +107,17 @@ $backgroundWidth: 1440px;
         }
     }
 
+    &__additional-info {
+        margin-top: $indentXS;
+
+        .yfm p {
+            @include text-size(body-2);
+            color: var(
+                --g-color-text-secondary
+            ) !important; /* stylelint-disable-line declaration-no-important */ // the selector that interrupts this color is too big
+        }
+    }
+
     &__buttons {
         margin-top: $indentXS;
     }
@@ -106,7 +127,7 @@ $backgroundWidth: 1440px;
             margin-top: $indentXS;
 
             &:not(:last-child) {
-                margin-right: $indentXS;
+                margin-right: $indentXXS;
             }
         }
     }

src/blocks/Header/Header.tsx

@@ -83,6 +83,7 @@ export const HeaderBlock = (props: React.PropsWithChildren<HeaderBlockFullProps>
         children,
         mediaView = 'full',
         centered,
+        additionalInfo,
     } = props;
     const isMobile = React.useContext(MobileContext);
     const theme = useTheme();
@@ -165,6 +166,17 @@ export const HeaderBlock = (props: React.PropsWithChildren<HeaderBlockFullProps>
                                             />
                                         </div>
                                     )}
+                                    {additionalInfo && (
+                                        <div className={b('additional-info', {theme: textTheme})}>
+                                            <YFMWrapper
+                                                content={additionalInfo}
+                                                modifiers={{
+                                                    constructor: true,
+                                                    constructorTheme: textTheme,
+                                                }}
+                                            />
+                                        </div>
+                                    )}
                                     {buttons && (
                                         <div className={b('buttons')} data-qa="header-buttons">
                                             {buttons.map((button, index) => (

src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Background-light-chromium-linux.png

@@ -38,6 +38,7 @@ export default {
 const DefaultArgs = {
     ...data.default.content,
     description: yfmTransform(data.default.content.description),
+    additionalInfo: yfmTransform(data.default.content.additionalInfo),
 };
 
 const DefaultTemplate: StoryFn<HeaderBlockModel> = (args) => (

src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Background-light-webkit-linux.png

@@ -52,6 +52,7 @@
       "type": "header-block",
       "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.",
+      "additionalInfo": "**Ut enim ad minim veniam** ut aliquip ex ea commodo consequat. Duis aute irure  [quis nostrud](https://example.com) dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
       "buttons": [
         {
           "text": "Button\r",

src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Breadcrumbs-light-chromium-linux.png

@@ -167,6 +167,7 @@ export interface HeaderBlockProps {
     title: string;
     overtitle?: string | JSX.Element;
     description?: string;
+    additionalInfo?: string;
     buttons?: Pick<ButtonProps, 'url' | 'text' | 'theme' | 'primary' | 'size' | 'extraProps'>[];
     width?: HeaderWidth;
     /** @deprecated imageSize now depends on width */

src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Breadcrumbs-light-webkit-linux.png

@@ -137,7 +137,7 @@ export const blockHeaderTransformer = [
         parser: parseTitle,
     },
     {
-        fields: ['description'],
+        fields: ['description', 'additionalInfo'],
         transformer: yfmTransformer,
     },
 ];