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) => (