Skip to content

Commit 707ccb9

Browse files
aeksandlaaeksandla
authored
feat(Header): add image out grid (#274)
1 parent 618a6fd commit 707ccb9

14 files changed

+202
-31
lines changed

‎.mocks/utils.ts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,39 @@ export const getDefaultStoryArgs = () => {
4545
};
4646
};
4747

48+
export const getHeaderWithBackgroundStoryArgs = () => {
49+
return {
50+
paddingBottom: 'l',
51+
paddingTop: 'l',
52+
text: 'Lorem ipsum dolor',
53+
background: {
54+
url: 'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img_8-12_light.png',
55+
},
56+
};
57+
};
58+
59+
export const getHeaderWithImageStoryArgs = () => {
60+
return {
61+
paddingBottom: 'l',
62+
paddingTop: 'l',
63+
text: 'Lorem ipsum dolor',
64+
image: 'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img_8-12_light.png',
65+
};
66+
};
67+
68+
export const getHeaderWithImageOutGridStoryArgs = () => {
69+
return {
70+
paddingBottom: 'l',
71+
paddingTop: 'l',
72+
text: 'Lorem ipsum dolor',
73+
image: 'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img_8-12_light.png',
74+
background: {
75+
color: 'rgba(238, 242, 248, 1)',
76+
},
77+
imageInGrid: false,
78+
};
79+
};
80+
4881
export const getVideoStoryArgs = () => {
4982
return {
5083
video: {

‎package-lock.json‎

Lines changed: 10 additions & 9 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@
9999
"@diplodoc/transform": "^4.10.8",
100100
"@gravity-ui/eslint-config": "^3.2.0",
101101
"@gravity-ui/icons": "^2.13.0",
102-
"@gravity-ui/page-constructor": "^7.0.0",
102+
"@gravity-ui/page-constructor": "^7.7.0",
103103
"@gravity-ui/prettier-config": "^1.1.0",
104104
"@gravity-ui/stylelint-config": "^4.0.1",
105105
"@gravity-ui/tsconfig": "^1.0.0",

‎src/blocks/Header/Header.scss‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
@import '../../../styles/mixins';
2+
@import '../../../styles/variables';
3+
4+
$block: '.#{$namespace}header-block';
5+
6+
#{$block} {
7+
$root: &;
8+
$headerMaxWidth: 1440px;
9+
$columnWidth: calc(100% / 12);
10+
$imageWidth: calc($columnWidth * 4);
11+
12+
&__grid {
13+
z-index: 10;
14+
}
15+
16+
&_image-out-grid {
17+
#{$root}__image {
18+
right: $indentXS;
19+
left: 50%;
20+
max-width: $headerMaxWidth;
21+
width: 100%;
22+
transform: translateX(calc(-50% - $indentXS));
23+
24+
img {
25+
margin-left: auto;
26+
width: $imageWidth;
27+
border-radius: 16px;
28+
}
29+
}
30+
31+
#{$root}__content-wrapper {
32+
position: static;
33+
min-height: 420px;
34+
}
35+
36+
#{$root}__content-inner {
37+
padding-right: 0;
38+
}
39+
}
40+
41+
@media (min-width: map-get($gridBreakpoints, 'lg')) {
42+
&_image-out-grid {
43+
#{$root}__content-inner {
44+
$textWidth: calc($columnWidth * 8);
45+
max-width: $textWidth;
46+
padding-right: $indentL;
47+
}
48+
}
49+
}
50+
51+
@media (max-width: map-get($gridBreakpoints, 'lg')) and (min-width: map-get($gridBreakpoints, 'lg')) {
52+
&_image-out-grid {
53+
#{$root}__content-inner {
54+
$textWidth: calc($columnWidth * 8 + $indentL);
55+
max-width: $textWidth;
56+
padding-right: $indentL;
57+
}
58+
}
59+
}
60+
61+
@media (max-width: map-get($gridBreakpoints, 'lg')) and (min-width: map-get($gridBreakpoints, 'md')) {
62+
$imageWidth: calc($columnWidth * 6 - $indentXS);
63+
64+
&_image-out-grid {
65+
#{$root}__image {
66+
img {
67+
width: $imageWidth;
68+
}
69+
}
70+
71+
#{$root}__content-inner {
72+
$textWidth: calc($columnWidth * 6);
73+
max-width: $textWidth;
74+
padding-right: $indentL;
75+
}
76+
}
77+
}
78+
79+
@media (max-width: map-get($gridBreakpoints, 'md')) {
80+
&_image-out-grid {
81+
#{$root}__image {
82+
display: none;
83+
}
84+
85+
#{$root}__content-wrapper {
86+
max-width: none;
87+
min-height: auto;
88+
}
89+
}
90+
}
91+
}

‎src/blocks/Header/Header.tsx‎

Lines changed: 27 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,17 @@ import {SettingsContext} from '../../contexts/SettingsContext';
1111
import {AnalyticsCounter} from '../../counters/utils';
1212
import {HeaderProps} from '../../models/blocks';
1313
import {PaddingsDirections} from '../../models/paddings';
14+
import {block} from '../../utils/cn';
1415
import {
1516
getBreadcrumbs,
1617
getBlogPath as getDefaultBlogPath,
1718
prepareAnalyticsEvent,
1819
} from '../../utils/common';
1920

21+
import './Header.scss';
22+
23+
const b = block('header-block');
24+
2025
const analyticsEventsContainer: Record<string, AnalyticsEventsProp> = {
2126
sharing: prepareAnalyticsEvent({name: DefaultGoalIds.shareTop}),
2227
save: prepareAnalyticsEvent({name: DefaultGoalIds.saveTop}),
@@ -28,7 +33,7 @@ const breadcrumbsGoals = prepareAnalyticsEvent({
2833
});
2934

3035
export const Header = (props: HeaderProps) => {
31-
const {theme, paddingTop, paddingBottom} = props;
36+
const {theme, paddingTop, paddingBottom, imageInGrid = true} = props;
3237
const {post, breadcrumbs: customBreadcrumbs = {}} = React.useContext(PostPageContext);
3338
const {locale} = React.useContext(LocaleContext);
3439
const {getBlogPath = getDefaultBlogPath} = React.useContext(SettingsContext);
@@ -51,21 +56,27 @@ export const Header = (props: HeaderProps) => {
5156
[PaddingsDirections.bottom]: paddingBottom,
5257
}}
5358
>
54-
<HeaderBlock
55-
{...props}
56-
title={title}
57-
description={description}
58-
breadcrumbs={{...breadcrumbs, ...customBreadcrumbs}}
59-
>
60-
<PostInfo
61-
postId={id}
62-
date={date}
63-
readingTime={readingTime}
64-
analyticsEventsContainer={analyticsEventsContainer}
65-
theme={theme}
66-
qa="blog-header-meta-container"
67-
/>
68-
</HeaderBlock>
59+
<div className={b({'image-out-grid': !imageInGrid})}>
60+
<HeaderBlock
61+
{...props}
62+
title={title}
63+
description={description}
64+
breadcrumbs={{...breadcrumbs, ...customBreadcrumbs}}
65+
mediaClassName={b('image')}
66+
gridClassName={b('grid')}
67+
contentWrapperClassName={b('content-wrapper')}
68+
contentInnerClassName={b('content-inner')}
69+
>
70+
<PostInfo
71+
postId={id}
72+
date={date}
73+
readingTime={readingTime}
74+
analyticsEventsContainer={analyticsEventsContainer}
75+
theme={theme}
76+
qa="blog-header-meta-container"
77+
/>
78+
</HeaderBlock>
79+
</div>
6980
</Wrapper>
7081
);
7182
};

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

110 KB
Loading

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

278 KB
Loading

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

75.2 KB
Loading

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

179 KB
Loading

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

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
import {Block, PageConstructor} from '@gravity-ui/page-constructor';
22
import {Meta, StoryFn} from '@storybook/react';
33

4-
import {blockMockData, getDefaultStoryArgs} from '../../../../.mocks/utils';
4+
import {
5+
blockMockData,
6+
getHeaderWithBackgroundStoryArgs,
7+
getHeaderWithImageOutGridStoryArgs,
8+
getHeaderWithImageStoryArgs,
9+
} from '../../../../.mocks/utils';
510
import customBlocks from '../../../constructor/blocksMap';
611
import {PostPageContext} from '../../../contexts/PostPageContext';
712
import {HeaderProps} from '../../../models/blocks';
@@ -27,8 +32,20 @@ const DefaultTemplate: StoryFn<HeaderModel> = (args) => (
2732
);
2833

2934
export const Default = DefaultTemplate.bind({});
35+
export const ImageOutGrid = DefaultTemplate.bind({});
36+
export const BgImage = DefaultTemplate.bind({});
3037

3138
Default.args = {
3239
type: BlockType.Header,
33-
...getDefaultStoryArgs(),
40+
...getHeaderWithImageStoryArgs(),
41+
} as unknown as HeaderModel;
42+
43+
BgImage.args = {
44+
type: BlockType.Header,
45+
...getHeaderWithBackgroundStoryArgs(),
46+
} as unknown as HeaderModel;
47+
48+
ImageOutGrid.args = {
49+
type: BlockType.Header,
50+
...getHeaderWithImageOutGridStoryArgs(),
3451
} as unknown as HeaderModel;

0 commit comments

Comments
 (0)