feat(Header): add image out grid

.mocks/page.json

@@ -14,22 +14,13 @@
       {
         "type": "blog-header-block",
         "resetPaddings": true,
-        "width": "s",
         "verticalOffset": "m",
         "theme": "dark",
         "background": {
-          "url": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img_8-12_dark.png",
-          "disableCompress": true,
-          "color": "#CCDAFF",
-          "fullWidth": false
+          "color": "#CCDAFF"
         },
-        "buttons": [
-          {
-            "text": "button 1",
-            "url": "http://example.com/",
-            "theme": "action"
-          }
-        ]
+        "image": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img_8-12_light.png",
+        "imageInGrid": false
       },
       {
         "type": "blog-layout-block",

.mocks/utils.ts

@@ -45,6 +45,39 @@ export const getDefaultStoryArgs = () => {
     };
 };
 
+export const getHeaderWithBackgroundStoryArgs = () => {
+    return {
+        paddingBottom: 'l',
+        paddingTop: 'l',
+        text: 'Lorem ipsum dolor',
+        background: {
+            url: 'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img_8-12_light.png',
+        },
+    };
+};
+
+export const getHeaderWithImageStoryArgs = () => {
+    return {
+        paddingBottom: 'l',
+        paddingTop: 'l',
+        text: 'Lorem ipsum dolor',
+        image: 'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img_8-12_light.png',
+    };
+};
+
+export const getHeaderWithImageOutGridStoryArgs = () => {
+    return {
+        paddingBottom: 'l',
+        paddingTop: 'l',
+        text: 'Lorem ipsum dolor',
+        image: 'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img_8-12_light.png',
+        background: {
+            color: 'rgba(238, 242, 248, 1)',
+        },
+        imageInGrid: false,
+    };
+};
+
 export const getVideoStoryArgs = () => {
     return {
         video: {

package.json

@@ -99,7 +99,7 @@
     "@diplodoc/transform": "^4.10.8",
     "@gravity-ui/eslint-config": "^3.2.0",
     "@gravity-ui/icons": "^2.13.0",
-    "@gravity-ui/page-constructor": "^7.0.0",
+    "@gravity-ui/page-constructor": "^7.5.1-alpha.2",
     "@gravity-ui/prettier-config": "^1.1.0",
     "@gravity-ui/stylelint-config": "^4.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",

src/blocks/Header/Header.scss

@@ -0,0 +1,97 @@
+@import '../../../styles/mixins';
+@import '../../../styles/variables';
+
+$block: '.#{$namespace}header-block';
+
+#{$block} {
+    $root: &;
+    $imageRight: $indentXS;
+    $imageWidth: 456px;
+    $headerMaxWidth: 1440px;
+    $containerWithPadding: calc($newContentWidth + $indentXXXS * 2 + $gridContainerPadding * 2);
+    $blockWidth: var(--block-width);
+
+    &__grid {
+        z-index: 10;
+    }
+
+    &_image-out-grid {
+        #{$root}__image {
+            right: $indentXS;
+            left: 50%;
+            max-width: $headerMaxWidth;
+            width: 100%;
+            transform: translateX(calc(-50% - $indentXS));
+
+            img {
+                margin-left: auto;
+                width: $imageWidth;
+                border-radius: 16px;
+            }
+        }
+
+        #{$root}__content-wrapper {
+            position: static;
+            min-height: 420px;
+        }
+
+        .pc-header-block__content-inner {
+            padding-right: 0;
+        }
+    }
+
+    @media (min-width: map-get($gridBreakpoints, 'lg')) {
+        &_image-out-grid {
+            .pc-header-block__content-inner {
+                max-width: calc(
+                    min($blockWidth, $containerWithPadding) - $gridContainerPadding - $imageWidth -
+                        $imageRight +
+                        (
+                            min(max($blockWidth, $containerWithPadding), $headerMaxWidth) -
+                                $containerWithPadding
+                        ) /
+                        2
+                );
+                padding-right: $indentL;
+            }
+        }
+    }
+
+    @media (max-width: map-get($gridBreakpoints, 'lg')) and (min-width: map-get($gridBreakpoints, 'md')) {
+        $imageWidth: 32vw;
+
+        &_image-out-grid {
+            #{$root}__image {
+                img {
+                    width: $imageWidth;
+                }
+            }
+
+            .pc-header-block__content-inner {
+                max-width: calc(
+                    min($blockWidth, $containerWithPadding) - $gridContainerPadding - $imageWidth -
+                        $imageRight +
+                        (
+                            min(max($blockWidth, $containerWithPadding), $headerMaxWidth) -
+                                $containerWithPadding
+                        ) /
+                        2
+                );
+                padding-right: $indentL;
+            }
+        }
+    }
+
+    @media (max-width: map-get($gridBreakpoints, 'md')) {
+        &_image-out-grid {
+            #{$root}__image {
+                display: none;
+            }
+
+            #{$root}__content-wrapper {
+                max-width: none;
+                min-height: auto;
+            }
+        }
+    }
+}

src/blocks/Header/Header.tsx

@@ -16,6 +16,10 @@ import {
 } from '../../utils/common';
 import {SettingsContext} from '../../contexts/SettingsContext';
 import {AnalyticsCounter} from '../../counters/utils';
+import {block} from '../../utils/cn';
+import './Header.scss';
+
+const b = block('header-block');
 
 const analyticsEventsContainer: Record<string, AnalyticsEventsProp> = {
     sharing: prepareAnalyticsEvent({name: DefaultGoalIds.shareTop}),
@@ -28,11 +32,12 @@ const breadcrumbsGoals = prepareAnalyticsEvent({
 });
 
 export const Header = (props: HeaderProps) => {
-    const {theme, paddingTop, paddingBottom} = props;
+    const {theme, paddingTop, paddingBottom, imageInGrid = true} = props;
     const {post, breadcrumbs: customBreadcrumbs = {}} = React.useContext(PostPageContext);
     const {locale} = React.useContext(LocaleContext);
     const {getBlogPath = getDefaultBlogPath} = React.useContext(SettingsContext);
     const blogPath = getBlogPath(locale.pathPrefix || '');
+    const containerRef = React.useRef<HTMLDivElement>(null);
 
     const {description, title, id, date, readingTime, tags} = post;
 
@@ -44,28 +49,48 @@ export const Header = (props: HeaderProps) => {
 
     breadcrumbs.analyticsEvents = breadcrumbsGoals;
 
+    React.useEffect(() => {
+        const onResize = () => {
+            if (containerRef.current) {
+                const width = containerRef.current?.clientWidth;
+                containerRef.current.style.setProperty('--block-width', `${width}px`);
+            }
+        };
+
+        onResize();
+
+        window.addEventListener('resize', onResize);
+
+        return () => window.removeEventListener('resize', onResize);
+    }, []);
+
     return (
         <Wrapper
             paddings={{
                 [PaddingsDirections.top]: paddingTop,
                 [PaddingsDirections.bottom]: paddingBottom,
             }}
         >
-            <HeaderBlock
-                {...props}
-                title={title}
-                description={description}
-                breadcrumbs={{...breadcrumbs, ...customBreadcrumbs}}
-            >
-                <PostInfo
-                    postId={id}
-                    date={date}
-                    readingTime={readingTime}
-                    analyticsEventsContainer={analyticsEventsContainer}
-                    theme={theme}
-                    qa="blog-header-meta-container"
-                />
-            </HeaderBlock>
+            <div ref={containerRef} className={b({'image-out-grid': !imageInGrid})}>
+                <HeaderBlock
+                    {...props}
+                    title={title}
+                    description={description}
+                    breadcrumbs={{...breadcrumbs, ...customBreadcrumbs}}
+                    mediaClassName={b('image')}
+                    gridClassName={b('grid')}
+                    contentWrapperClassName={b('content-wrapper')}
+                >
+                    <PostInfo
+                        postId={id}
+                        date={date}
+                        readingTime={readingTime}
+                        analyticsEventsContainer={analyticsEventsContainer}
+                        theme={theme}
+                        qa="blog-header-meta-container"
+                    />
+                </HeaderBlock>
+            </div>
         </Wrapper>
     );
 };

src/blocks/Header/__stories__/Header.stories.tsx

@@ -1,7 +1,12 @@
 import {Block, PageConstructor} from '@gravity-ui/page-constructor';
 import {Meta, StoryFn} from '@storybook/react';
 
-import {blockMockData, getDefaultStoryArgs} from '../../../../.mocks/utils';
+import {
+    blockMockData,
+    getHeaderWithBackgroundStoryArgs,
+    getHeaderWithImageOutGridStoryArgs,
+    getHeaderWithImageStoryArgs,
+} from '../../../../.mocks/utils';
 import customBlocks from '../../../constructor/blocksMap';
 import {PostPageContext} from '../../../contexts/PostPageContext';
 import {HeaderProps} from '../../../models/blocks';
@@ -27,8 +32,20 @@ const DefaultTemplate: StoryFn<HeaderModel> = (args) => (
 );
 
 export const Default = DefaultTemplate.bind({});
+export const ImageOutGrid = DefaultTemplate.bind({});
+export const BgImage = DefaultTemplate.bind({});
 
 Default.args = {
     type: BlockType.Header,
-    ...getDefaultStoryArgs(),
+    ...getHeaderWithImageStoryArgs(),
+} as unknown as HeaderModel;
+
+BgImage.args = {
+    type: BlockType.Header,
+    ...getHeaderWithBackgroundStoryArgs(),
+} as unknown as HeaderModel;
+
+ImageOutGrid.args = {
+    type: BlockType.Header,
+    ...getHeaderWithImageOutGridStoryArgs(),
 } as unknown as HeaderModel;

src/models/blocks.ts

@@ -38,7 +38,11 @@ export type CTAProps = QAProps & {
     items: Array<ContentBlockProps>;
 } & PaddingsYFMProps;
 
-export type HeaderProps = HeaderBlockProps & PaddingsYFMProps;
+type HeaderBlogProps = {
+    imageInGrid?: boolean;
+};
+
+export type HeaderProps = HeaderBlockProps & PaddingsYFMProps & HeaderBlogProps;
 
 export type LayoutProps = {
     fullWidth?: boolean;