diff --git a/src/blocks/Header/Header.scss b/src/blocks/Header/Header.scss index 967fbe855..2cafc88ec 100644 --- a/src/blocks/Header/Header.scss +++ b/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; } } } diff --git a/src/blocks/Header/Header.tsx b/src/blocks/Header/Header.tsx index 76501a177..ecd07ec65 100644 --- a/src/blocks/Header/Header.tsx +++ b/src/blocks/Header/Header.tsx @@ -83,6 +83,7 @@ export const HeaderBlock = (props: React.PropsWithChildren children, mediaView = 'full', centered, + additionalInfo, } = props; const isMobile = React.useContext(MobileContext); const theme = useTheme(); @@ -165,6 +166,17 @@ export const HeaderBlock = (props: React.PropsWithChildren /> )} + {additionalInfo && ( +
+ +
+ )} {buttons && (
{buttons.map((button, index) => ( diff --git a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Background-light-chromium-linux.png b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Background-light-chromium-linux.png index 2fda5d771..af92ce7e7 100644 Binary files a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Background-light-chromium-linux.png and b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Background-light-chromium-linux.png differ diff --git a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Background-light-webkit-linux.png b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Background-light-webkit-linux.png index 8a8c99599..fc9ccd150 100644 Binary files a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Background-light-webkit-linux.png and b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Background-light-webkit-linux.png differ diff --git a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Breadcrumbs-light-chromium-linux.png b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Breadcrumbs-light-chromium-linux.png index 33f3bd91e..372e06894 100644 Binary files a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Breadcrumbs-light-chromium-linux.png and b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Breadcrumbs-light-chromium-linux.png differ diff --git a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Breadcrumbs-light-webkit-linux.png b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Breadcrumbs-light-webkit-linux.png index 2d9b06b0b..af16a7736 100644 Binary files a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Breadcrumbs-light-webkit-linux.png and b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Breadcrumbs-light-webkit-linux.png differ diff --git a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Centered-light-chromium-linux.png b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Centered-light-chromium-linux.png index cbd6d7fed..0926fb2d2 100644 Binary files a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Centered-light-chromium-linux.png and b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Centered-light-chromium-linux.png differ diff --git a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Centered-light-webkit-linux.png b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Centered-light-webkit-linux.png index d84ea64f0..babd67cbb 100644 Binary files a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Centered-light-webkit-linux.png and b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Centered-light-webkit-linux.png differ diff --git a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-DarkTheme-light-chromium-linux.png b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-DarkTheme-light-chromium-linux.png index b1eae7cfb..a02e03d2e 100644 Binary files a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-DarkTheme-light-chromium-linux.png and b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-DarkTheme-light-chromium-linux.png differ diff --git a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-DarkTheme-light-webkit-linux.png b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-DarkTheme-light-webkit-linux.png index eeb1b004c..a83ba3a5f 100644 Binary files a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-DarkTheme-light-webkit-linux.png and b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-DarkTheme-light-webkit-linux.png differ diff --git a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Default-light-chromium-linux.png b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Default-light-chromium-linux.png index 7fb9e9d6e..90aab6a2d 100644 Binary files a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Default-light-chromium-linux.png and b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Default-light-chromium-linux.png differ diff --git a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Default-light-webkit-linux.png b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Default-light-webkit-linux.png index 23660c3b6..9c5b46a21 100644 Binary files a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Default-light-webkit-linux.png and b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Default-light-webkit-linux.png differ diff --git a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-FullWidthMediaBackground-light-chromium-linux.png b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-FullWidthMediaBackground-light-chromium-linux.png index 582e2cc67..dc64bad29 100644 Binary files a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-FullWidthMediaBackground-light-chromium-linux.png and b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-FullWidthMediaBackground-light-chromium-linux.png differ diff --git a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-FullWidthMediaBackground-light-webkit-linux.png b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-FullWidthMediaBackground-light-webkit-linux.png index 79310dd08..464187024 100644 Binary files a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-FullWidthMediaBackground-light-webkit-linux.png and b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-FullWidthMediaBackground-light-webkit-linux.png differ diff --git a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-FullWithBackground-light-chromium-linux.png b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-FullWithBackground-light-chromium-linux.png index 582e2cc67..dc64bad29 100644 Binary files a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-FullWithBackground-light-chromium-linux.png and b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-FullWithBackground-light-chromium-linux.png differ diff --git a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-FullWithBackground-light-webkit-linux.png b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-FullWithBackground-light-webkit-linux.png index 69c28aa7d..d9e2fe12d 100644 Binary files a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-FullWithBackground-light-webkit-linux.png and b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-FullWithBackground-light-webkit-linux.png differ diff --git a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Image-light-chromium-linux.png b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Image-light-chromium-linux.png index fd5f9bac1..a843075b8 100644 Binary files a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Image-light-chromium-linux.png and b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Image-light-chromium-linux.png differ diff --git a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Image-light-webkit-linux.png b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Image-light-webkit-linux.png index c1cd749b8..3900b6fdf 100644 Binary files a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Image-light-webkit-linux.png and b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Image-light-webkit-linux.png differ diff --git a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-MediaViewFit-light-chromium-linux.png b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-MediaViewFit-light-chromium-linux.png index 94ea62b5d..52b844fbd 100644 Binary files a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-MediaViewFit-light-chromium-linux.png and b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-MediaViewFit-light-chromium-linux.png differ diff --git a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-MediaViewFit-light-webkit-linux.png b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-MediaViewFit-light-webkit-linux.png index 93c4aa1e9..324d307d3 100644 Binary files a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-MediaViewFit-light-webkit-linux.png and b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-MediaViewFit-light-webkit-linux.png differ diff --git a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Size-light-chromium-linux.png b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Size-light-chromium-linux.png index c2e767f1d..c836ac0bb 100644 Binary files a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Size-light-chromium-linux.png and b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Size-light-chromium-linux.png differ diff --git a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Size-light-webkit-linux.png b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Size-light-webkit-linux.png index a9cc020f9..990651f9e 100644 Binary files a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Size-light-webkit-linux.png and b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-Size-light-webkit-linux.png differ diff --git a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-VerticalOffset-light-chromium-linux.png b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-VerticalOffset-light-chromium-linux.png index 10d8c8527..47be3d2f2 100644 Binary files a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-VerticalOffset-light-chromium-linux.png and b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-VerticalOffset-light-chromium-linux.png differ diff --git a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-VerticalOffset-light-webkit-linux.png b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-VerticalOffset-light-webkit-linux.png index e4bafb432..6991e57f6 100644 Binary files a/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-VerticalOffset-light-webkit-linux.png and b/src/blocks/Header/__snapshots__/Header.visual.test.tsx-snapshots/Header-render-stories-VerticalOffset-light-webkit-linux.png differ diff --git a/src/blocks/Header/__stories__/Header.stories.tsx b/src/blocks/Header/__stories__/Header.stories.tsx index edbf1297b..720294961 100644 --- a/src/blocks/Header/__stories__/Header.stories.tsx +++ b/src/blocks/Header/__stories__/Header.stories.tsx @@ -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 = (args) => ( diff --git a/src/blocks/Header/__stories__/data.json b/src/blocks/Header/__stories__/data.json index 3dce0c22c..d0b6cd784 100644 --- a/src/blocks/Header/__stories__/data.json +++ b/src/blocks/Header/__stories__/data.json @@ -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", diff --git a/src/models/constructor-items/blocks.ts b/src/models/constructor-items/blocks.ts index 11a6c70b6..ceea101f2 100644 --- a/src/models/constructor-items/blocks.ts +++ b/src/models/constructor-items/blocks.ts @@ -167,6 +167,7 @@ export interface HeaderBlockProps { title: string; overtitle?: string | JSX.Element; description?: string; + additionalInfo?: string; buttons?: Pick[]; width?: HeaderWidth; /** @deprecated imageSize now depends on width */ diff --git a/src/text-transform/config.ts b/src/text-transform/config.ts index 3b9e7e720..8cbc51421 100644 --- a/src/text-transform/config.ts +++ b/src/text-transform/config.ts @@ -137,7 +137,7 @@ export const blockHeaderTransformer = [ parser: parseTitle, }, { - fields: ['description'], + fields: ['description', 'additionalInfo'], transformer: yfmTransformer, }, ];