@gravity-ui/page-constructor 4.50.0 → 4.51.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/blocks/Banner/schema.d.ts +12 -0
- package/build/cjs/blocks/Banner/schema.js +4 -1
- package/build/cjs/blocks/Header/schema.js +1 -1
- package/build/cjs/models/constructor-items/blocks.d.ts +2 -2
- package/build/cjs/models/constructor-items/common.d.ts +1 -0
- package/build/cjs/models/constructor-items/sub-blocks.d.ts +3 -2
- package/build/cjs/schema/constants.d.ts +4 -0
- package/build/cjs/schema/validators/common.d.ts +1 -0
- package/build/cjs/schema/validators/common.js +2 -1
- package/build/cjs/sub-blocks/BannerCard/BannerCard.css +3 -0
- package/build/cjs/sub-blocks/BannerCard/BannerCard.js +3 -3
- package/build/esm/blocks/Banner/schema.d.ts +12 -0
- package/build/esm/blocks/Banner/schema.js +5 -2
- package/build/esm/blocks/Header/schema.js +2 -2
- package/build/esm/models/constructor-items/blocks.d.ts +2 -2
- package/build/esm/models/constructor-items/common.d.ts +1 -0
- package/build/esm/models/constructor-items/sub-blocks.d.ts +3 -2
- package/build/esm/schema/constants.d.ts +4 -0
- package/build/esm/schema/validators/common.d.ts +1 -0
- package/build/esm/schema/validators/common.js +1 -0
- package/build/esm/sub-blocks/BannerCard/BannerCard.css +3 -0
- package/build/esm/sub-blocks/BannerCard/BannerCard.js +3 -3
- package/package.json +1 -1
- package/server/models/constructor-items/blocks.d.ts +2 -2
- package/server/models/constructor-items/common.d.ts +1 -0
- package/server/models/constructor-items/sub-blocks.d.ts +3 -2
- package/widget/index.js +1 -1
|
@@ -23,6 +23,10 @@ export declare const BannerCardProps: {
|
|
|
23
23
|
optionName: string;
|
|
24
24
|
})[];
|
|
25
25
|
};
|
|
26
|
+
mediaView: {
|
|
27
|
+
type: string;
|
|
28
|
+
enum: string[];
|
|
29
|
+
};
|
|
26
30
|
disableCompress: {
|
|
27
31
|
type: string;
|
|
28
32
|
};
|
|
@@ -326,6 +330,10 @@ export declare const BannerBlock: {
|
|
|
326
330
|
optionName: string;
|
|
327
331
|
})[];
|
|
328
332
|
};
|
|
333
|
+
mediaView: {
|
|
334
|
+
type: string;
|
|
335
|
+
enum: string[];
|
|
336
|
+
};
|
|
329
337
|
disableCompress: {
|
|
330
338
|
type: string;
|
|
331
339
|
};
|
|
@@ -630,6 +638,10 @@ export declare const BannerCard: {
|
|
|
630
638
|
optionName: string;
|
|
631
639
|
})[];
|
|
632
640
|
};
|
|
641
|
+
mediaView: {
|
|
642
|
+
type: string;
|
|
643
|
+
enum: string[];
|
|
644
|
+
};
|
|
633
645
|
disableCompress: {
|
|
634
646
|
type: string;
|
|
635
647
|
};
|
|
@@ -13,7 +13,10 @@ exports.BannerCardProps = {
|
|
|
13
13
|
contentType: 'yfm',
|
|
14
14
|
}, image: (0, common_1.withTheme)({
|
|
15
15
|
type: 'string',
|
|
16
|
-
}),
|
|
16
|
+
}), mediaView: {
|
|
17
|
+
type: 'string',
|
|
18
|
+
enum: common_1.mediaView,
|
|
19
|
+
}, disableCompress: {
|
|
17
20
|
type: 'boolean',
|
|
18
21
|
}, color: (0, common_1.withTheme)({
|
|
19
22
|
type: 'string',
|
|
@@ -3,7 +3,7 @@ import { ButtonSize } from '@gravity-ui/uikit';
|
|
|
3
3
|
import { GridColumnSize, GridColumnSizesType, IndentValue } from '../../grid/types';
|
|
4
4
|
import { ThemeSupporting } from '../../utils';
|
|
5
5
|
import { AnalyticsEventsBase } from '../common';
|
|
6
|
-
import { AnchorProps, Animatable, BackgroundImageProps, ButtonProps, CardBorder, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, ImageDeviceProps, ImageProps, Justify, LegendTableMarkerType, LinkProps, MapProps, MediaDirection, MediaProps, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleItemBaseProps, TitleItemProps, WithBorder, YandexFormProps } from './common';
|
|
6
|
+
import { AnchorProps, Animatable, BackgroundImageProps, ButtonProps, CardBorder, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, ImageDeviceProps, ImageProps, Justify, LegendTableMarkerType, LinkProps, MapProps, MediaDirection, MediaProps, MediaView, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleItemBaseProps, TitleItemProps, WithBorder, YandexFormProps } from './common';
|
|
7
7
|
import { BannerCardProps, HubspotFormProps, SubBlock, SubBlockModels } from './sub-blocks';
|
|
8
8
|
export declare enum BlockType {
|
|
9
9
|
PromoFeaturesBlock = "promo-features-block",
|
|
@@ -108,7 +108,7 @@ export interface HeaderBlockProps {
|
|
|
108
108
|
offset?: HeaderOffset;
|
|
109
109
|
image?: ThemedImage;
|
|
110
110
|
video?: ThemedMediaVideoProps;
|
|
111
|
-
mediaView?:
|
|
111
|
+
mediaView?: MediaView;
|
|
112
112
|
background?: ThemedHeaderBlockBackground;
|
|
113
113
|
theme?: 'light' | 'dark';
|
|
114
114
|
verticalOffset?: '0' | 's' | 'm' | 'l' | 'xl';
|
|
@@ -293,6 +293,7 @@ export interface TitleItemBaseProps {
|
|
|
293
293
|
custom?: string | ReactNode;
|
|
294
294
|
onClick?: () => void;
|
|
295
295
|
}
|
|
296
|
+
export type MediaView = 'fit' | 'full';
|
|
296
297
|
export type MediaBorder = 'shadow' | 'line' | 'none';
|
|
297
298
|
export type CardBorder = MediaBorder;
|
|
298
299
|
export interface CardBaseProps {
|
|
@@ -3,7 +3,7 @@ import { ThemeSupporting } from '../../utils';
|
|
|
3
3
|
import { HubspotEventData, HubspotEventHandlers } from '../../utils/hubspot';
|
|
4
4
|
import { AnalyticsEventsBase, PixelEvent } from '../common';
|
|
5
5
|
import { ContentBlockProps } from './blocks';
|
|
6
|
-
import { AuthorItem, ButtonPixel, ButtonProps, CardBaseProps, ContentTheme, DividerSize, ImageObjectProps, ImageProps, LinkProps, MediaProps, PriceDetailedProps, TextTheme, Themable, ThemedImage } from './common';
|
|
6
|
+
import { AuthorItem, ButtonPixel, ButtonProps, CardBaseProps, ContentTheme, DividerSize, ImageObjectProps, ImageProps, LinkProps, MediaProps, MediaView, PriceDetailedProps, TextTheme, Themable, ThemedImage } from './common';
|
|
7
7
|
export declare enum SubBlockType {
|
|
8
8
|
Divider = "divider",
|
|
9
9
|
Quote = "quote",
|
|
@@ -113,7 +113,8 @@ export interface BannerCardProps {
|
|
|
113
113
|
disableCompress?: boolean;
|
|
114
114
|
color?: ThemeSupporting<string>;
|
|
115
115
|
theme?: TextTheme;
|
|
116
|
-
button: Pick<ButtonProps, 'text' | 'url' | 'target'>;
|
|
116
|
+
button: Pick<ButtonProps, 'text' | 'url' | 'target' | 'theme'>;
|
|
117
|
+
mediaView?: MediaView;
|
|
117
118
|
}
|
|
118
119
|
export interface MediaCardProps extends MediaProps, AnalyticsEventsBase, CardBaseProps {
|
|
119
120
|
}
|
|
@@ -20,6 +20,7 @@ export declare const sizeNumber: {
|
|
|
20
20
|
};
|
|
21
21
|
export declare const contentThemes: string[];
|
|
22
22
|
export declare const quoteTypes: QuoteType[];
|
|
23
|
+
export declare const mediaView: string[];
|
|
23
24
|
export declare const customControlsType: CustomControlsType[];
|
|
24
25
|
export declare const customControlsButtonPositioning: CustomControlsButtonPositioning[];
|
|
25
26
|
export declare const BaseProps: {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.BlockHeaderProps = exports.CardBase = exports.BorderProps = exports.MapProps = exports.YMapMarker = exports.YMapMarkerLabel = exports.MediaProps = exports.ButtonBlock = exports.TitleProps = exports.BlockBaseProps = exports.AnchorProps = exports.withTheme = exports.MenuProps = exports.ButtonProps = exports.authorItem = exports.FileLinkProps = exports.LinkProps = exports.BackgroundProps = exports.DataLensProps = exports.DataLensObjectProps = exports.JustifyProps = exports.ThemeProps = exports.VideoProps = exports.CustomControlsOptionsProps = exports.PlayButtonProps = exports.LoopProps = exports.ChildrenCardsProps = exports.ChildrenProps = exports.AnimatableProps = exports.sliderSizesObject = exports.containerSizesObject = exports.BaseProps = exports.customControlsButtonPositioning = exports.customControlsType = exports.quoteTypes = exports.contentThemes = exports.sizeNumber = exports.dividerEnum = exports.fileLinkTypes = exports.videoControlsTypes = exports.playIconThemes = exports.playIconTypes = exports.videoTypes = exports.contentTextWidth = exports.contentSizes = exports.sliderSizesArray = exports.containerSizesArray = exports.textSize = exports.mediaDirection = void 0;
|
|
3
|
+
exports.BlockHeaderProps = exports.CardBase = exports.BorderProps = exports.MapProps = exports.YMapMarker = exports.YMapMarkerLabel = exports.MediaProps = exports.ButtonBlock = exports.TitleProps = exports.BlockBaseProps = exports.AnchorProps = exports.withTheme = exports.MenuProps = exports.ButtonProps = exports.authorItem = exports.FileLinkProps = exports.LinkProps = exports.BackgroundProps = exports.DataLensProps = exports.DataLensObjectProps = exports.JustifyProps = exports.ThemeProps = exports.VideoProps = exports.CustomControlsOptionsProps = exports.PlayButtonProps = exports.LoopProps = exports.ChildrenCardsProps = exports.ChildrenProps = exports.AnimatableProps = exports.sliderSizesObject = exports.containerSizesObject = exports.BaseProps = exports.customControlsButtonPositioning = exports.customControlsType = exports.mediaView = exports.quoteTypes = exports.contentThemes = exports.sizeNumber = exports.dividerEnum = exports.fileLinkTypes = exports.videoControlsTypes = exports.playIconThemes = exports.playIconTypes = exports.videoTypes = exports.contentTextWidth = exports.contentSizes = exports.sliderSizesArray = exports.containerSizesArray = exports.textSize = exports.mediaDirection = void 0;
|
|
4
4
|
const schema_1 = require("../../components/Image/schema");
|
|
5
5
|
const models_1 = require("../../models");
|
|
6
6
|
const event_1 = require("./event");
|
|
@@ -20,6 +20,7 @@ exports.dividerEnum = { enum: ['0', 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl', 'xx
|
|
|
20
20
|
exports.sizeNumber = { type: 'number', maximum: 12, minimum: 1 };
|
|
21
21
|
exports.contentThemes = ['default', 'dark', 'light'];
|
|
22
22
|
exports.quoteTypes = Object.values(models_1.QuoteType);
|
|
23
|
+
exports.mediaView = ['fit', 'full'];
|
|
23
24
|
exports.customControlsType = [
|
|
24
25
|
models_1.CustomControlsType.WithMuteButton,
|
|
25
26
|
models_1.CustomControlsType.WithPlayPauseButton,
|
|
@@ -87,6 +87,9 @@ unpredictable css rules order in build */
|
|
|
87
87
|
object-fit: cover;
|
|
88
88
|
object-position: left;
|
|
89
89
|
}
|
|
90
|
+
.pc-banner-card_media-view_fit .pc-banner-card__image img {
|
|
91
|
+
object-fit: contain;
|
|
92
|
+
}
|
|
90
93
|
@media (max-width: 576px) {
|
|
91
94
|
.pc-banner-card__image {
|
|
92
95
|
display: none;
|
|
@@ -8,13 +8,13 @@ const theme_1 = require("../../context/theme");
|
|
|
8
8
|
const utils_1 = require("../../utils");
|
|
9
9
|
const b = (0, utils_1.block)('banner-card');
|
|
10
10
|
const BannerCard = (props) => {
|
|
11
|
-
const { title, subtitle, button: { url, text, target }, color, theme: textTheme = 'light', image, disableCompress, } = props;
|
|
11
|
+
const { title, subtitle, button: { url, text, target, theme: buttonTheme = 'raised' }, color, theme: textTheme = 'light', image, disableCompress, mediaView = 'full', } = props;
|
|
12
12
|
const theme = (0, theme_1.useTheme)();
|
|
13
13
|
const contentStyle = {};
|
|
14
14
|
if (color) {
|
|
15
15
|
contentStyle.backgroundColor = (0, utils_1.getThemedValue)(color, theme);
|
|
16
16
|
}
|
|
17
|
-
return (react_1.default.createElement("div", { className: b({ theme: textTheme }) },
|
|
17
|
+
return (react_1.default.createElement("div", { className: b({ theme: textTheme, ['media-view']: mediaView }) },
|
|
18
18
|
react_1.default.createElement("div", { className: b('content'), style: contentStyle },
|
|
19
19
|
react_1.default.createElement("div", { className: b('info') },
|
|
20
20
|
react_1.default.createElement("div", { className: b('text') },
|
|
@@ -22,7 +22,7 @@ const BannerCard = (props) => {
|
|
|
22
22
|
react_1.default.createElement(components_1.HTML, null, title)),
|
|
23
23
|
subtitle && (react_1.default.createElement(components_1.YFMWrapper, { className: b('subtitle'), content: subtitle, modifiers: { constructor: true } }))),
|
|
24
24
|
react_1.default.createElement(components_1.RouterLink, { href: url },
|
|
25
|
-
react_1.default.createElement(components_1.Button, { className: b('button'), theme:
|
|
25
|
+
react_1.default.createElement(components_1.Button, { className: b('button'), theme: buttonTheme, size: "xl", text: text, url: url, target: target }))),
|
|
26
26
|
react_1.default.createElement(components_1.BackgroundImage, { className: b('image'), src: (0, utils_1.getThemedValue)(image, theme), disableCompress: disableCompress }))));
|
|
27
27
|
};
|
|
28
28
|
exports.BannerCard = BannerCard;
|
|
@@ -23,6 +23,10 @@ export declare const BannerCardProps: {
|
|
|
23
23
|
optionName: string;
|
|
24
24
|
})[];
|
|
25
25
|
};
|
|
26
|
+
mediaView: {
|
|
27
|
+
type: string;
|
|
28
|
+
enum: string[];
|
|
29
|
+
};
|
|
26
30
|
disableCompress: {
|
|
27
31
|
type: string;
|
|
28
32
|
};
|
|
@@ -326,6 +330,10 @@ export declare const BannerBlock: {
|
|
|
326
330
|
optionName: string;
|
|
327
331
|
})[];
|
|
328
332
|
};
|
|
333
|
+
mediaView: {
|
|
334
|
+
type: string;
|
|
335
|
+
enum: string[];
|
|
336
|
+
};
|
|
329
337
|
disableCompress: {
|
|
330
338
|
type: string;
|
|
331
339
|
};
|
|
@@ -630,6 +638,10 @@ export declare const BannerCard: {
|
|
|
630
638
|
optionName: string;
|
|
631
639
|
})[];
|
|
632
640
|
};
|
|
641
|
+
mediaView: {
|
|
642
|
+
type: string;
|
|
643
|
+
enum: string[];
|
|
644
|
+
};
|
|
633
645
|
disableCompress: {
|
|
634
646
|
type: string;
|
|
635
647
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { AnimatableProps, BaseProps, ButtonBlock, ThemeProps, withTheme, } from '../../schema/validators/common';
|
|
1
|
+
import { AnimatableProps, BaseProps, ButtonBlock, ThemeProps, mediaView, withTheme, } from '../../schema/validators/common';
|
|
2
2
|
export const BannerCardProps = {
|
|
3
3
|
additionalProperties: false,
|
|
4
4
|
required: ['title', 'button'],
|
|
@@ -10,7 +10,10 @@ export const BannerCardProps = {
|
|
|
10
10
|
contentType: 'yfm',
|
|
11
11
|
}, image: withTheme({
|
|
12
12
|
type: 'string',
|
|
13
|
-
}),
|
|
13
|
+
}), mediaView: {
|
|
14
|
+
type: 'string',
|
|
15
|
+
enum: mediaView,
|
|
16
|
+
}, disableCompress: {
|
|
14
17
|
type: 'boolean',
|
|
15
18
|
}, color: withTheme({
|
|
16
19
|
type: 'string',
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ImageProps } from '../../components/Image/schema';
|
|
2
|
-
import { BlockBaseProps, ButtonBlock, MediaProps, VideoProps, withTheme, } from '../../schema/validators/common';
|
|
2
|
+
import { BlockBaseProps, ButtonBlock, MediaProps, VideoProps, mediaView, withTheme, } from '../../schema/validators/common';
|
|
3
3
|
import { filteredArray } from '../../schema/validators/utils';
|
|
4
4
|
export const HeaderBackgroundProps = {
|
|
5
5
|
type: 'object',
|
|
@@ -34,7 +34,7 @@ export const HeaderProperties = {
|
|
|
34
34
|
video: withTheme(VideoProps),
|
|
35
35
|
mediaView: {
|
|
36
36
|
type: 'string',
|
|
37
|
-
enum:
|
|
37
|
+
enum: mediaView,
|
|
38
38
|
},
|
|
39
39
|
backLink: {
|
|
40
40
|
type: 'object',
|
|
@@ -3,7 +3,7 @@ import { ButtonSize } from '@gravity-ui/uikit';
|
|
|
3
3
|
import { GridColumnSize, GridColumnSizesType, IndentValue } from '../../grid/types';
|
|
4
4
|
import { ThemeSupporting } from '../../utils';
|
|
5
5
|
import { AnalyticsEventsBase } from '../common';
|
|
6
|
-
import { AnchorProps, Animatable, BackgroundImageProps, ButtonProps, CardBorder, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, ImageDeviceProps, ImageProps, Justify, LegendTableMarkerType, LinkProps, MapProps, MediaDirection, MediaProps, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleItemBaseProps, TitleItemProps, WithBorder, YandexFormProps } from './common';
|
|
6
|
+
import { AnchorProps, Animatable, BackgroundImageProps, ButtonProps, CardBorder, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, ImageDeviceProps, ImageProps, Justify, LegendTableMarkerType, LinkProps, MapProps, MediaDirection, MediaProps, MediaView, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleItemBaseProps, TitleItemProps, WithBorder, YandexFormProps } from './common';
|
|
7
7
|
import { BannerCardProps, HubspotFormProps, SubBlock, SubBlockModels } from './sub-blocks';
|
|
8
8
|
export declare enum BlockType {
|
|
9
9
|
PromoFeaturesBlock = "promo-features-block",
|
|
@@ -108,7 +108,7 @@ export interface HeaderBlockProps {
|
|
|
108
108
|
offset?: HeaderOffset;
|
|
109
109
|
image?: ThemedImage;
|
|
110
110
|
video?: ThemedMediaVideoProps;
|
|
111
|
-
mediaView?:
|
|
111
|
+
mediaView?: MediaView;
|
|
112
112
|
background?: ThemedHeaderBlockBackground;
|
|
113
113
|
theme?: 'light' | 'dark';
|
|
114
114
|
verticalOffset?: '0' | 's' | 'm' | 'l' | 'xl';
|
|
@@ -293,6 +293,7 @@ export interface TitleItemBaseProps {
|
|
|
293
293
|
custom?: string | ReactNode;
|
|
294
294
|
onClick?: () => void;
|
|
295
295
|
}
|
|
296
|
+
export type MediaView = 'fit' | 'full';
|
|
296
297
|
export type MediaBorder = 'shadow' | 'line' | 'none';
|
|
297
298
|
export type CardBorder = MediaBorder;
|
|
298
299
|
export interface CardBaseProps {
|
|
@@ -3,7 +3,7 @@ import { ThemeSupporting } from '../../utils';
|
|
|
3
3
|
import { HubspotEventData, HubspotEventHandlers } from '../../utils/hubspot';
|
|
4
4
|
import { AnalyticsEventsBase, PixelEvent } from '../common';
|
|
5
5
|
import { ContentBlockProps } from './blocks';
|
|
6
|
-
import { AuthorItem, ButtonPixel, ButtonProps, CardBaseProps, ContentTheme, DividerSize, ImageObjectProps, ImageProps, LinkProps, MediaProps, PriceDetailedProps, TextTheme, Themable, ThemedImage } from './common';
|
|
6
|
+
import { AuthorItem, ButtonPixel, ButtonProps, CardBaseProps, ContentTheme, DividerSize, ImageObjectProps, ImageProps, LinkProps, MediaProps, MediaView, PriceDetailedProps, TextTheme, Themable, ThemedImage } from './common';
|
|
7
7
|
export declare enum SubBlockType {
|
|
8
8
|
Divider = "divider",
|
|
9
9
|
Quote = "quote",
|
|
@@ -113,7 +113,8 @@ export interface BannerCardProps {
|
|
|
113
113
|
disableCompress?: boolean;
|
|
114
114
|
color?: ThemeSupporting<string>;
|
|
115
115
|
theme?: TextTheme;
|
|
116
|
-
button: Pick<ButtonProps, 'text' | 'url' | 'target'>;
|
|
116
|
+
button: Pick<ButtonProps, 'text' | 'url' | 'target' | 'theme'>;
|
|
117
|
+
mediaView?: MediaView;
|
|
117
118
|
}
|
|
118
119
|
export interface MediaCardProps extends MediaProps, AnalyticsEventsBase, CardBaseProps {
|
|
119
120
|
}
|
|
@@ -20,6 +20,7 @@ export declare const sizeNumber: {
|
|
|
20
20
|
};
|
|
21
21
|
export declare const contentThemes: string[];
|
|
22
22
|
export declare const quoteTypes: QuoteType[];
|
|
23
|
+
export declare const mediaView: string[];
|
|
23
24
|
export declare const customControlsType: CustomControlsType[];
|
|
24
25
|
export declare const customControlsButtonPositioning: CustomControlsButtonPositioning[];
|
|
25
26
|
export declare const BaseProps: {
|
|
@@ -17,6 +17,7 @@ export const dividerEnum = { enum: ['0', 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'
|
|
|
17
17
|
export const sizeNumber = { type: 'number', maximum: 12, minimum: 1 };
|
|
18
18
|
export const contentThemes = ['default', 'dark', 'light'];
|
|
19
19
|
export const quoteTypes = Object.values(QuoteType);
|
|
20
|
+
export const mediaView = ['fit', 'full'];
|
|
20
21
|
export const customControlsType = [
|
|
21
22
|
CustomControlsType.WithMuteButton,
|
|
22
23
|
CustomControlsType.WithPlayPauseButton,
|
|
@@ -87,6 +87,9 @@ unpredictable css rules order in build */
|
|
|
87
87
|
object-fit: cover;
|
|
88
88
|
object-position: left;
|
|
89
89
|
}
|
|
90
|
+
.pc-banner-card_media-view_fit .pc-banner-card__image img {
|
|
91
|
+
object-fit: contain;
|
|
92
|
+
}
|
|
90
93
|
@media (max-width: 576px) {
|
|
91
94
|
.pc-banner-card__image {
|
|
92
95
|
display: none;
|
|
@@ -5,13 +5,13 @@ import { block, getThemedValue } from '../../utils';
|
|
|
5
5
|
import './BannerCard.css';
|
|
6
6
|
const b = block('banner-card');
|
|
7
7
|
export const BannerCard = (props) => {
|
|
8
|
-
const { title, subtitle, button: { url, text, target }, color, theme: textTheme = 'light', image, disableCompress, } = props;
|
|
8
|
+
const { title, subtitle, button: { url, text, target, theme: buttonTheme = 'raised' }, color, theme: textTheme = 'light', image, disableCompress, mediaView = 'full', } = props;
|
|
9
9
|
const theme = useTheme();
|
|
10
10
|
const contentStyle = {};
|
|
11
11
|
if (color) {
|
|
12
12
|
contentStyle.backgroundColor = getThemedValue(color, theme);
|
|
13
13
|
}
|
|
14
|
-
return (React.createElement("div", { className: b({ theme: textTheme }) },
|
|
14
|
+
return (React.createElement("div", { className: b({ theme: textTheme, ['media-view']: mediaView }) },
|
|
15
15
|
React.createElement("div", { className: b('content'), style: contentStyle },
|
|
16
16
|
React.createElement("div", { className: b('info') },
|
|
17
17
|
React.createElement("div", { className: b('text') },
|
|
@@ -19,7 +19,7 @@ export const BannerCard = (props) => {
|
|
|
19
19
|
React.createElement(HTML, null, title)),
|
|
20
20
|
subtitle && (React.createElement(YFMWrapper, { className: b('subtitle'), content: subtitle, modifiers: { constructor: true } }))),
|
|
21
21
|
React.createElement(RouterLink, { href: url },
|
|
22
|
-
React.createElement(Button, { className: b('button'), theme:
|
|
22
|
+
React.createElement(Button, { className: b('button'), theme: buttonTheme, size: "xl", text: text, url: url, target: target }))),
|
|
23
23
|
React.createElement(BackgroundImage, { className: b('image'), src: getThemedValue(image, theme), disableCompress: disableCompress }))));
|
|
24
24
|
};
|
|
25
25
|
export default BannerCard;
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@ import { ButtonSize } from '@gravity-ui/uikit';
|
|
|
3
3
|
import { GridColumnSize, GridColumnSizesType, IndentValue } from '../../grid/types';
|
|
4
4
|
import { ThemeSupporting } from '../../utils';
|
|
5
5
|
import { AnalyticsEventsBase } from '../common';
|
|
6
|
-
import { AnchorProps, Animatable, BackgroundImageProps, ButtonProps, CardBorder, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, ImageDeviceProps, ImageProps, Justify, LegendTableMarkerType, LinkProps, MapProps, MediaDirection, MediaProps, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleItemBaseProps, TitleItemProps, WithBorder, YandexFormProps } from './common';
|
|
6
|
+
import { AnchorProps, Animatable, BackgroundImageProps, ButtonProps, CardBorder, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, ImageDeviceProps, ImageProps, Justify, LegendTableMarkerType, LinkProps, MapProps, MediaDirection, MediaProps, MediaView, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleItemBaseProps, TitleItemProps, WithBorder, YandexFormProps } from './common';
|
|
7
7
|
import { BannerCardProps, HubspotFormProps, SubBlock, SubBlockModels } from './sub-blocks';
|
|
8
8
|
export declare enum BlockType {
|
|
9
9
|
PromoFeaturesBlock = "promo-features-block",
|
|
@@ -108,7 +108,7 @@ export interface HeaderBlockProps {
|
|
|
108
108
|
offset?: HeaderOffset;
|
|
109
109
|
image?: ThemedImage;
|
|
110
110
|
video?: ThemedMediaVideoProps;
|
|
111
|
-
mediaView?:
|
|
111
|
+
mediaView?: MediaView;
|
|
112
112
|
background?: ThemedHeaderBlockBackground;
|
|
113
113
|
theme?: 'light' | 'dark';
|
|
114
114
|
verticalOffset?: '0' | 's' | 'm' | 'l' | 'xl';
|
|
@@ -293,6 +293,7 @@ export interface TitleItemBaseProps {
|
|
|
293
293
|
custom?: string | ReactNode;
|
|
294
294
|
onClick?: () => void;
|
|
295
295
|
}
|
|
296
|
+
export type MediaView = 'fit' | 'full';
|
|
296
297
|
export type MediaBorder = 'shadow' | 'line' | 'none';
|
|
297
298
|
export type CardBorder = MediaBorder;
|
|
298
299
|
export interface CardBaseProps {
|
|
@@ -3,7 +3,7 @@ import { ThemeSupporting } from '../../utils';
|
|
|
3
3
|
import { HubspotEventData, HubspotEventHandlers } from '../../utils/hubspot';
|
|
4
4
|
import { AnalyticsEventsBase, PixelEvent } from '../common';
|
|
5
5
|
import { ContentBlockProps } from './blocks';
|
|
6
|
-
import { AuthorItem, ButtonPixel, ButtonProps, CardBaseProps, ContentTheme, DividerSize, ImageObjectProps, ImageProps, LinkProps, MediaProps, PriceDetailedProps, TextTheme, Themable, ThemedImage } from './common';
|
|
6
|
+
import { AuthorItem, ButtonPixel, ButtonProps, CardBaseProps, ContentTheme, DividerSize, ImageObjectProps, ImageProps, LinkProps, MediaProps, MediaView, PriceDetailedProps, TextTheme, Themable, ThemedImage } from './common';
|
|
7
7
|
export declare enum SubBlockType {
|
|
8
8
|
Divider = "divider",
|
|
9
9
|
Quote = "quote",
|
|
@@ -113,7 +113,8 @@ export interface BannerCardProps {
|
|
|
113
113
|
disableCompress?: boolean;
|
|
114
114
|
color?: ThemeSupporting<string>;
|
|
115
115
|
theme?: TextTheme;
|
|
116
|
-
button: Pick<ButtonProps, 'text' | 'url' | 'target'>;
|
|
116
|
+
button: Pick<ButtonProps, 'text' | 'url' | 'target' | 'theme'>;
|
|
117
|
+
mediaView?: MediaView;
|
|
117
118
|
}
|
|
118
119
|
export interface MediaCardProps extends MediaProps, AnalyticsEventsBase, CardBaseProps {
|
|
119
120
|
}
|