@gravity-ui/page-constructor 4.51.0 → 4.52.0

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.
Files changed (53) hide show
  1. package/build/cjs/blocks/Banner/schema.d.ts +12 -0
  2. package/build/cjs/blocks/Banner/schema.js +4 -1
  3. package/build/cjs/blocks/Header/schema.js +1 -1
  4. package/build/cjs/components/ReactPlayer/ReactPlayer.js +9 -1
  5. package/build/cjs/components/ReactPlayer/utils/youtube.d.ts +2 -0
  6. package/build/cjs/components/ReactPlayer/utils/youtube.js +7 -0
  7. package/build/cjs/constructor-items.d.ts +1 -0
  8. package/build/cjs/constructor-items.js +1 -0
  9. package/build/cjs/models/constructor-items/common.d.ts +1 -0
  10. package/build/cjs/models/constructor-items/sub-blocks.d.ts +18 -3
  11. package/build/cjs/models/constructor-items/sub-blocks.js +7 -1
  12. package/build/cjs/schema/constants.d.ts +80 -0
  13. package/build/cjs/schema/constants.js +2 -1
  14. package/build/cjs/schema/validators/common.d.ts +1 -0
  15. package/build/cjs/schema/validators/common.js +2 -1
  16. package/build/cjs/schema/validators/sub-blocks.d.ts +1 -0
  17. package/build/cjs/schema/validators/sub-blocks.js +1 -0
  18. package/build/cjs/sub-blocks/ImageCard/ImageCard.css +59 -0
  19. package/build/cjs/sub-blocks/ImageCard/ImageCard.d.ts +3 -0
  20. package/build/cjs/sub-blocks/ImageCard/ImageCard.js +21 -0
  21. package/build/cjs/sub-blocks/ImageCard/schema.d.ts +78 -0
  22. package/build/cjs/sub-blocks/ImageCard/schema.js +24 -0
  23. package/build/cjs/sub-blocks/index.d.ts +1 -0
  24. package/build/cjs/sub-blocks/index.js +3 -1
  25. package/build/esm/blocks/Banner/schema.d.ts +12 -0
  26. package/build/esm/blocks/Banner/schema.js +5 -2
  27. package/build/esm/blocks/Header/schema.js +2 -2
  28. package/build/esm/components/ReactPlayer/ReactPlayer.js +9 -1
  29. package/build/esm/components/ReactPlayer/utils/youtube.d.ts +2 -0
  30. package/build/esm/components/ReactPlayer/utils/youtube.js +3 -0
  31. package/build/esm/constructor-items.d.ts +1 -0
  32. package/build/esm/constructor-items.js +2 -1
  33. package/build/esm/models/constructor-items/common.d.ts +1 -0
  34. package/build/esm/models/constructor-items/sub-blocks.d.ts +18 -3
  35. package/build/esm/models/constructor-items/sub-blocks.js +6 -0
  36. package/build/esm/schema/constants.d.ts +80 -0
  37. package/build/esm/schema/constants.js +3 -2
  38. package/build/esm/schema/validators/common.d.ts +1 -0
  39. package/build/esm/schema/validators/common.js +1 -0
  40. package/build/esm/schema/validators/sub-blocks.d.ts +1 -0
  41. package/build/esm/schema/validators/sub-blocks.js +1 -0
  42. package/build/esm/sub-blocks/ImageCard/ImageCard.css +59 -0
  43. package/build/esm/sub-blocks/ImageCard/ImageCard.d.ts +4 -0
  44. package/build/esm/sub-blocks/ImageCard/ImageCard.js +19 -0
  45. package/build/esm/sub-blocks/ImageCard/schema.d.ts +78 -0
  46. package/build/esm/sub-blocks/ImageCard/schema.js +20 -0
  47. package/build/esm/sub-blocks/index.d.ts +1 -0
  48. package/build/esm/sub-blocks/index.js +1 -0
  49. package/package.json +2 -1
  50. package/server/models/constructor-items/common.d.ts +1 -0
  51. package/server/models/constructor-items/sub-blocks.d.ts +18 -3
  52. package/server/models/constructor-items/sub-blocks.js +7 -1
  53. package/widget/index.js +1 -1
@@ -12,6 +12,7 @@ import { block } from '../../utils';
12
12
  import CustomBarControls from './CustomBarControls';
13
13
  import i18n from './i18n';
14
14
  import { checkYoutubeVideos } from './utils';
15
+ import { isYoutubePlayerInstance } from './utils/youtube';
15
16
  import './ReactPlayer.css';
16
17
  const b = block('ReactPlayer');
17
18
  const FPS = 60;
@@ -49,8 +50,15 @@ export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
49
50
  if (!playerRef) {
50
51
  return;
51
52
  }
53
+ let play, pause, addEventListener;
52
54
  const videoInstance = playerRef.getInternalPlayer();
53
- const { play, pause, addEventListener } = videoInstance;
55
+ if (isYoutubePlayerInstance(videoInstance)) {
56
+ ({ pauseVideo: pause, playVideo: play, addEventListener } = videoInstance);
57
+ }
58
+ else {
59
+ // it is assumed that `videoInstance` is HTMLVideoElement by default
60
+ ({ play, pause, addEventListener } = videoInstance);
61
+ }
54
62
  // eslint-disable-next-line consistent-return
55
63
  return {
56
64
  play: play.bind(videoInstance),
@@ -0,0 +1,2 @@
1
+ import type { YouTubePlayer } from 'youtube-player/dist/types';
2
+ export declare const isYoutubePlayerInstance: (playerInstance: Record<string, unknown> | YouTubePlayer) => playerInstance is YouTubePlayer;
@@ -0,0 +1,3 @@
1
+ export const isYoutubePlayerInstance = (playerInstance) => {
2
+ return Boolean(playerInstance['pauseVideo'] && playerInstance['playVideo']);
3
+ };
@@ -30,6 +30,7 @@ export declare const subBlockMap: {
30
30
  content: (props: import("./sub-blocks/Content/Content").ContentProps) => JSX.Element;
31
31
  quote: (props: import("./models").QuoteProps) => JSX.Element;
32
32
  "price-card": (props: import("./models").PriceCardProps) => JSX.Element;
33
+ "image-card": (props: import("./models").ImageCardProps) => JSX.Element;
33
34
  };
34
35
  export declare const navItemMap: {
35
36
  button: import("react").FC<Pick<import("./navigation/models").NavigationItemProps, "className"> & import("./models").ButtonProps>;
@@ -2,7 +2,7 @@ import { BannerBlock, CardLayoutBlock, CompaniesBlock, ContentLayoutBlock, Exten
2
2
  import { BlockType, NavigationItemType, SubBlockType } from './models';
3
3
  import { GithubButton, NavigationButton, NavigationDropdown, NavigationLink, } from './navigation/components/NavigationItem';
4
4
  import SocialIcon from './navigation/components/SocialIcon/SocialIcon';
5
- import { BackgroundCard, BannerCard, BasicCard, Content, Divider, LayoutItem, MediaCard, PriceCard, PriceDetailed, Quote, } from './sub-blocks';
5
+ import { BackgroundCard, BannerCard, BasicCard, Content, Divider, ImageCard, LayoutItem, MediaCard, PriceCard, PriceDetailed, Quote, } from './sub-blocks';
6
6
  export const blockMap = {
7
7
  [BlockType.SliderBlock]: SliderBlock,
8
8
  [BlockType.ExtendedFeaturesBlock]: ExtendedFeaturesBlock,
@@ -35,6 +35,7 @@ export const subBlockMap = {
35
35
  [SubBlockType.Content]: Content,
36
36
  [SubBlockType.Quote]: Quote,
37
37
  [SubBlockType.PriceCard]: PriceCard,
38
+ [SubBlockType.ImageCard]: ImageCard,
38
39
  };
39
40
  export const navItemMap = {
40
41
  [NavigationItemType.Button]: NavigationButton,
@@ -62,6 +62,7 @@ export type ContentSize = 's' | 'l';
62
62
  export type ContentTextSize = 's' | 'm' | 'l';
63
63
  export type ContentTheme = 'default' | 'dark' | 'light';
64
64
  export type FileLinkType = 'vertical' | 'horizontal';
65
+ export type ImageCardMargins = 's' | 'm';
65
66
  export interface Themable {
66
67
  theme?: TextTheme;
67
68
  }
@@ -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, MediaView, PriceDetailedProps, TextTheme, Themable, ThemedImage } from './common';
6
+ import { AuthorItem, ButtonPixel, ButtonProps, CardBaseProps, ContentTheme, DividerSize, ImageCardMargins, 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",
@@ -22,7 +22,8 @@ export declare enum SubBlockType {
22
22
  * @deprecated Will be removed, use BasicCard instead
23
23
  */
24
24
  Card = "card",
25
- PriceCard = "price-card"
25
+ PriceCard = "price-card",
26
+ ImageCard = "image-card"
26
27
  }
27
28
  export declare enum IconPosition {
28
29
  Top = "top",
@@ -35,6 +36,10 @@ export interface PositionedIcon {
35
36
  export interface IconWrapperProps {
36
37
  icon?: PositionedIcon;
37
38
  }
39
+ export declare enum ImageCardDirection {
40
+ Direct = "direct",
41
+ Reverse = "reverse"
42
+ }
38
43
  export declare const SubBlockTypes: SubBlockType[];
39
44
  export interface DividerProps {
40
45
  size?: DividerSize;
@@ -137,6 +142,13 @@ export interface LayoutItemProps extends ClassNameProps, AnalyticsEventsBase {
137
142
  fullscreen?: boolean;
138
143
  icon?: PositionedIcon;
139
144
  }
145
+ export interface ImageCardProps extends CardBaseProps, Pick<ContentBlockProps, 'title' | 'text'> {
146
+ image: ImageProps;
147
+ enableImageBorderRadius?: boolean;
148
+ margins?: ImageCardMargins;
149
+ direction?: ImageCardDirection;
150
+ backgroundColor?: string;
151
+ }
140
152
  export type DividerModel = {
141
153
  type: SubBlockType.Divider;
142
154
  } & DividerProps;
@@ -167,5 +179,8 @@ export type BasicCardModel = {
167
179
  export type PriceCardModel = {
168
180
  type: SubBlockType.PriceCard;
169
181
  } & PriceCardProps;
170
- export type SubBlockModels = DividerModel | QuoteModel | PriceDetailedModel | MediaCardModel | BackgroundCardModel | HubspotFormModel | BannerCardModel | BasicCardModel | PriceCardModel | LayoutItemModel;
182
+ export type ImageCardModel = {
183
+ type: SubBlockType.ImageCard;
184
+ } & ImageCardProps;
185
+ export type SubBlockModels = DividerModel | QuoteModel | PriceDetailedModel | MediaCardModel | BackgroundCardModel | HubspotFormModel | BannerCardModel | BasicCardModel | PriceCardModel | LayoutItemModel | ImageCardModel;
171
186
  export type SubBlock = SubBlockModels;
@@ -18,10 +18,16 @@ export var SubBlockType;
18
18
  */
19
19
  SubBlockType["Card"] = "card";
20
20
  SubBlockType["PriceCard"] = "price-card";
21
+ SubBlockType["ImageCard"] = "image-card";
21
22
  })(SubBlockType || (SubBlockType = {}));
22
23
  export var IconPosition;
23
24
  (function (IconPosition) {
24
25
  IconPosition["Top"] = "top";
25
26
  IconPosition["Left"] = "left";
26
27
  })(IconPosition || (IconPosition = {}));
28
+ export var ImageCardDirection;
29
+ (function (ImageCardDirection) {
30
+ ImageCardDirection["Direct"] = "direct";
31
+ ImageCardDirection["Reverse"] = "reverse";
32
+ })(ImageCardDirection || (ImageCardDirection = {}));
27
33
  export const SubBlockTypes = Object.values(SubBlockType);
@@ -1,6 +1,82 @@
1
1
  import { BlockType } from '../models';
2
2
  export declare const blockSchemas: Record<BlockType, object>;
3
3
  export declare const cardSchemas: {
4
+ 'image-card': {
5
+ additionalProperties: boolean;
6
+ required: string[];
7
+ properties: {
8
+ image: {
9
+ oneOf: ({
10
+ type: string;
11
+ properties: {
12
+ when: {
13
+ type: string;
14
+ };
15
+ };
16
+ } | {
17
+ type: string;
18
+ pattern: string;
19
+ optionName: string;
20
+ })[];
21
+ };
22
+ direction: {
23
+ type: string;
24
+ enum: string[];
25
+ };
26
+ margins: {
27
+ type: string;
28
+ enum: string[];
29
+ };
30
+ backgroundColor: {
31
+ type: string;
32
+ };
33
+ title: {
34
+ oneOf: ({
35
+ type: string;
36
+ contentType: string;
37
+ optionName: string;
38
+ } | {
39
+ optionName: string;
40
+ type: string;
41
+ additionalProperties: boolean;
42
+ required: string[];
43
+ properties: {
44
+ text: {
45
+ type: string;
46
+ contentType: string;
47
+ };
48
+ textSize: {
49
+ type: string;
50
+ enum: string[];
51
+ };
52
+ url: {
53
+ type: string;
54
+ };
55
+ urlTitle: {
56
+ type: string;
57
+ };
58
+ resetMargin: {
59
+ type: string;
60
+ };
61
+ };
62
+ contentType?: undefined;
63
+ })[];
64
+ };
65
+ text: {
66
+ type: string;
67
+ contentType: string;
68
+ inputType: string;
69
+ };
70
+ border: {
71
+ type: string;
72
+ enum: string[];
73
+ };
74
+ type: {};
75
+ when: {
76
+ type: string;
77
+ };
78
+ };
79
+ };
4
80
  'price-card': {
5
81
  additionalProperties: boolean;
6
82
  required: string[];
@@ -986,6 +1062,10 @@ export declare const cardSchemas: {
986
1062
  optionName: string;
987
1063
  })[];
988
1064
  };
1065
+ mediaView: {
1066
+ type: string;
1067
+ enum: string[];
1068
+ };
989
1069
  disableCompress: {
990
1070
  type: string;
991
1071
  };
@@ -1,7 +1,7 @@
1
1
  import { BannerBlock, BannerCard, CardLayoutBlock, CompaniesBlock, ContentLayoutBlock, ExtendedFeaturesBlock, FilterBlock, FormBlock, HeaderBlock, HeaderSliderBlock, IconsBlock, InfoBlock, MapBlock, MediaBlock, PromoFeaturesBlock, QuestionsBlock, ShareBlock, SliderBlock, TableBlock, TabsBlock, } from './validators/blocks';
2
- import { BackgroundCard, BasicCard, Divider, MediaCardBlock, PriceCardBlock, PriceDetailedBlock, Quote, } from './validators/sub-blocks';
2
+ import { BackgroundCard, BasicCard, Divider, ImageCard, MediaCardBlock, PriceCardBlock, PriceDetailedBlock, Quote, } from './validators/sub-blocks';
3
3
  export const blockSchemas = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, Divider), ExtendedFeaturesBlock), PromoFeaturesBlock), SliderBlock), QuestionsBlock), HeaderBlock), BannerBlock), CompaniesBlock), MediaBlock), MapBlock), InfoBlock), TableBlock), TabsBlock), HeaderSliderBlock), IconsBlock), CardLayoutBlock), ContentLayoutBlock), ShareBlock), FilterBlock), FormBlock);
4
- export const cardSchemas = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, MediaCardBlock), BannerCard), PriceDetailedBlock), BackgroundCard), Quote), BasicCard), PriceCardBlock);
4
+ export const cardSchemas = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, MediaCardBlock), BannerCard), PriceDetailedBlock), BackgroundCard), Quote), BasicCard), PriceCardBlock), ImageCard);
5
5
  export const constructorBlockSchemaNames = [
6
6
  'divider',
7
7
  'quote',
@@ -38,4 +38,5 @@ export const constructorCardSchemaNames = [
38
38
  'basic-card',
39
39
  'layout-item',
40
40
  'price-card',
41
+ 'image-card',
41
42
  ];
@@ -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,
@@ -8,3 +8,4 @@ export * from '../../sub-blocks/Divider/schema';
8
8
  export * from '../../sub-blocks/BasicCard/schema';
9
9
  export * from '../../sub-blocks/PriceCard/schema';
10
10
  export * from '../../sub-blocks/HubspotForm/schema';
11
+ export * from '../../sub-blocks/ImageCard/schema';
@@ -8,3 +8,4 @@ export * from '../../sub-blocks/Divider/schema';
8
8
  export * from '../../sub-blocks/BasicCard/schema';
9
9
  export * from '../../sub-blocks/PriceCard/schema';
10
10
  export * from '../../sub-blocks/HubspotForm/schema';
11
+ export * from '../../sub-blocks/ImageCard/schema';
@@ -0,0 +1,59 @@
1
+ .pc-image-card_border_shadow {
2
+ box-shadow: 0px 4px 24px var(--pc-color-sfx-shadow), 0px 2px 8px var(--pc-color-sfx-shadow);
3
+ }
4
+
5
+ /* use this for style redefinitions to awoid problems with
6
+ unpredictable css rules order in build */
7
+ .pc-image-card {
8
+ min-height: 248px;
9
+ height: 100%;
10
+ overflow-x: hidden;
11
+ border-radius: var(--pc-border-radius);
12
+ background-color: var(--g-color-base-float);
13
+ transition: box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
14
+ min-height: 1px;
15
+ }
16
+ .pc-image-card_border_line {
17
+ border: 1px solid var(--g-color-line-generic);
18
+ }
19
+ .pc-image-card .pc-image-card__content {
20
+ padding: 32px;
21
+ }
22
+ .pc-image-card .pc-image-card__image_inner {
23
+ width: 100%;
24
+ display: block;
25
+ }
26
+ .pc-image-card .pc-image-card__image_inner_radius {
27
+ border-radius: var(--pc-border-radius);
28
+ }
29
+ .pc-image-card .pc-image-card__image_margins_s {
30
+ padding: 4px;
31
+ }
32
+ .pc-image-card .pc-image-card__image_margins_s .pc-image-card__image_inner {
33
+ border-radius: calc(var(--pc-border-radius) - var(--pc-image-padding));
34
+ }
35
+ .pc-image-card .pc-image-card__image_margins_m {
36
+ padding: 32px;
37
+ }
38
+ .pc-image-card .pc-image-card__image_margins_m .pc-image-card__image_inner {
39
+ border-radius: initial;
40
+ }
41
+ .pc-image-card_with-content {
42
+ display: flex;
43
+ flex-direction: column;
44
+ }
45
+ .pc-image-card_with-content.pc-image-card_direction_direct .pc-image-card__image {
46
+ padding-bottom: 0;
47
+ }
48
+ .pc-image-card_with-content.pc-image-card_direction_direct .pc-image-card__content {
49
+ padding-top: 24px;
50
+ }
51
+ .pc-image-card_with-content.pc-image-card_direction_reverse {
52
+ flex-direction: column-reverse;
53
+ }
54
+ .pc-image-card_with-content.pc-image-card_direction_reverse .pc-image-card__image {
55
+ padding-top: 0;
56
+ }
57
+ .pc-image-card_with-content.pc-image-card_direction_reverse .pc-image-card__content {
58
+ padding-bottom: 24px;
59
+ }
@@ -0,0 +1,4 @@
1
+ import { ImageCardProps } from '../../models';
2
+ import './ImageCard.css';
3
+ declare const ImageCard: (props: ImageCardProps) => JSX.Element;
4
+ export default ImageCard;
@@ -0,0 +1,19 @@
1
+ import React from 'react';
2
+ import { Image } from '../../components';
3
+ import { getMediaImage } from '../../components/Media/Image/utils';
4
+ import { ImageCardDirection } from '../../models';
5
+ import { block } from '../../utils';
6
+ import Content from '../Content/Content';
7
+ import './ImageCard.css';
8
+ const b = block('image-card');
9
+ const ImageCard = (props) => {
10
+ const { border = 'shadow', title, text, image, enableImageBorderRadius = false, direction = ImageCardDirection.Direct, margins, backgroundColor, } = props;
11
+ const hasContent = Boolean(text || title);
12
+ const imageProps = getMediaImage(image);
13
+ return (React.createElement("div", { className: b({ border, 'with-content': hasContent, direction }), style: { backgroundColor } },
14
+ React.createElement("div", { className: b('image', { margins }) },
15
+ React.createElement(Image, Object.assign({ className: b('image_inner', { radius: enableImageBorderRadius }) }, imageProps))),
16
+ hasContent && (React.createElement("div", { className: b('content') },
17
+ React.createElement(Content, { title: title, text: text, colSizes: { all: 12, md: 12 }, size: "s" })))));
18
+ };
19
+ export default ImageCard;
@@ -0,0 +1,78 @@
1
+ export declare const ImageCard: {
2
+ 'image-card': {
3
+ additionalProperties: boolean;
4
+ required: string[];
5
+ properties: {
6
+ image: {
7
+ oneOf: ({
8
+ type: string;
9
+ properties: {
10
+ when: {
11
+ type: string;
12
+ };
13
+ };
14
+ } | {
15
+ type: string;
16
+ pattern: string;
17
+ optionName: string;
18
+ })[];
19
+ };
20
+ direction: {
21
+ type: string;
22
+ enum: string[];
23
+ };
24
+ margins: {
25
+ type: string;
26
+ enum: string[];
27
+ };
28
+ backgroundColor: {
29
+ type: string;
30
+ };
31
+ title: {
32
+ oneOf: ({
33
+ type: string;
34
+ contentType: string;
35
+ optionName: string;
36
+ } | {
37
+ optionName: string;
38
+ type: string;
39
+ additionalProperties: boolean;
40
+ required: string[];
41
+ properties: {
42
+ text: {
43
+ type: string;
44
+ contentType: string;
45
+ };
46
+ textSize: {
47
+ type: string;
48
+ enum: string[];
49
+ };
50
+ url: {
51
+ type: string;
52
+ };
53
+ urlTitle: {
54
+ type: string;
55
+ };
56
+ resetMargin: {
57
+ type: string;
58
+ };
59
+ };
60
+ contentType?: undefined;
61
+ })[];
62
+ };
63
+ text: {
64
+ type: string;
65
+ contentType: string;
66
+ inputType: string;
67
+ };
68
+ border: {
69
+ type: string;
70
+ enum: string[];
71
+ };
72
+ type: {};
73
+ when: {
74
+ type: string;
75
+ };
76
+ };
77
+ };
78
+ };
@@ -0,0 +1,20 @@
1
+ import pick from 'lodash/pick';
2
+ import { BaseProps, CardBase } from '../../schema/validators/common';
3
+ import { ImageProps } from '../../schema/validators/components';
4
+ import { ContentBase } from '../Content/schema';
5
+ const ImageCardBlockContentProps = pick(ContentBase, ['title', 'text']);
6
+ export const ImageCard = {
7
+ 'image-card': {
8
+ additionalProperties: false,
9
+ required: ['image'],
10
+ properties: Object.assign(Object.assign(Object.assign(Object.assign({}, BaseProps), CardBase), ImageCardBlockContentProps), { image: ImageProps, direction: {
11
+ type: 'string',
12
+ enum: ['direct', 'reverse'],
13
+ }, margins: {
14
+ type: 'string',
15
+ enum: ['s', 'm'],
16
+ }, backgroundColor: {
17
+ type: 'string',
18
+ } }),
19
+ },
20
+ };
@@ -9,3 +9,4 @@ export { default as BasicCard } from './BasicCard/BasicCard';
9
9
  export { default as Content } from './Content/Content';
10
10
  export { default as HubspotForm } from './HubspotForm';
11
11
  export { default as PriceCard } from './PriceCard/PriceCard';
12
+ export { default as ImageCard } from './ImageCard/ImageCard';
@@ -9,3 +9,4 @@ export { default as BasicCard } from './BasicCard/BasicCard';
9
9
  export { default as Content } from './Content/Content';
10
10
  export { default as HubspotForm } from './HubspotForm';
11
11
  export { default as PriceCard } from './PriceCard/PriceCard';
12
+ export { default as ImageCard } from './ImageCard/ImageCard';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/page-constructor",
3
- "version": "4.51.0",
3
+ "version": "4.52.0",
4
4
  "description": "Gravity UI Page Constructor",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -144,6 +144,7 @@
144
144
  "@types/sanitize-html": "2.6.1",
145
145
  "@types/uuid": "^9.0.0",
146
146
  "@types/webpack-env": "^1.18.1",
147
+ "@types/youtube-player": "^5.5.11",
147
148
  "autoprefixer": "^10.4.14",
148
149
  "babel-loader": "^8.3.0",
149
150
  "css-loader": "^5.2.7",
@@ -62,6 +62,7 @@ export type ContentSize = 's' | 'l';
62
62
  export type ContentTextSize = 's' | 'm' | 'l';
63
63
  export type ContentTheme = 'default' | 'dark' | 'light';
64
64
  export type FileLinkType = 'vertical' | 'horizontal';
65
+ export type ImageCardMargins = 's' | 'm';
65
66
  export interface Themable {
66
67
  theme?: TextTheme;
67
68
  }
@@ -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, MediaView, PriceDetailedProps, TextTheme, Themable, ThemedImage } from './common';
6
+ import { AuthorItem, ButtonPixel, ButtonProps, CardBaseProps, ContentTheme, DividerSize, ImageCardMargins, 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",
@@ -22,7 +22,8 @@ export declare enum SubBlockType {
22
22
  * @deprecated Will be removed, use BasicCard instead
23
23
  */
24
24
  Card = "card",
25
- PriceCard = "price-card"
25
+ PriceCard = "price-card",
26
+ ImageCard = "image-card"
26
27
  }
27
28
  export declare enum IconPosition {
28
29
  Top = "top",
@@ -35,6 +36,10 @@ export interface PositionedIcon {
35
36
  export interface IconWrapperProps {
36
37
  icon?: PositionedIcon;
37
38
  }
39
+ export declare enum ImageCardDirection {
40
+ Direct = "direct",
41
+ Reverse = "reverse"
42
+ }
38
43
  export declare const SubBlockTypes: SubBlockType[];
39
44
  export interface DividerProps {
40
45
  size?: DividerSize;
@@ -137,6 +142,13 @@ export interface LayoutItemProps extends ClassNameProps, AnalyticsEventsBase {
137
142
  fullscreen?: boolean;
138
143
  icon?: PositionedIcon;
139
144
  }
145
+ export interface ImageCardProps extends CardBaseProps, Pick<ContentBlockProps, 'title' | 'text'> {
146
+ image: ImageProps;
147
+ enableImageBorderRadius?: boolean;
148
+ margins?: ImageCardMargins;
149
+ direction?: ImageCardDirection;
150
+ backgroundColor?: string;
151
+ }
140
152
  export type DividerModel = {
141
153
  type: SubBlockType.Divider;
142
154
  } & DividerProps;
@@ -167,5 +179,8 @@ export type BasicCardModel = {
167
179
  export type PriceCardModel = {
168
180
  type: SubBlockType.PriceCard;
169
181
  } & PriceCardProps;
170
- export type SubBlockModels = DividerModel | QuoteModel | PriceDetailedModel | MediaCardModel | BackgroundCardModel | HubspotFormModel | BannerCardModel | BasicCardModel | PriceCardModel | LayoutItemModel;
182
+ export type ImageCardModel = {
183
+ type: SubBlockType.ImageCard;
184
+ } & ImageCardProps;
185
+ export type SubBlockModels = DividerModel | QuoteModel | PriceDetailedModel | MediaCardModel | BackgroundCardModel | HubspotFormModel | BannerCardModel | BasicCardModel | PriceCardModel | LayoutItemModel | ImageCardModel;
171
186
  export type SubBlock = SubBlockModels;
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.SubBlockTypes = exports.IconPosition = exports.SubBlockType = void 0;
3
+ exports.SubBlockTypes = exports.ImageCardDirection = exports.IconPosition = exports.SubBlockType = void 0;
4
4
  var SubBlockType;
5
5
  (function (SubBlockType) {
6
6
  SubBlockType["Divider"] = "divider";
@@ -21,10 +21,16 @@ var SubBlockType;
21
21
  */
22
22
  SubBlockType["Card"] = "card";
23
23
  SubBlockType["PriceCard"] = "price-card";
24
+ SubBlockType["ImageCard"] = "image-card";
24
25
  })(SubBlockType = exports.SubBlockType || (exports.SubBlockType = {}));
25
26
  var IconPosition;
26
27
  (function (IconPosition) {
27
28
  IconPosition["Top"] = "top";
28
29
  IconPosition["Left"] = "left";
29
30
  })(IconPosition = exports.IconPosition || (exports.IconPosition = {}));
31
+ var ImageCardDirection;
32
+ (function (ImageCardDirection) {
33
+ ImageCardDirection["Direct"] = "direct";
34
+ ImageCardDirection["Reverse"] = "reverse";
35
+ })(ImageCardDirection = exports.ImageCardDirection || (exports.ImageCardDirection = {}));
30
36
  exports.SubBlockTypes = Object.values(SubBlockType);