@gravity-ui/page-constructor 4.57.3 → 4.58.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.
@@ -4,7 +4,8 @@
4
4
  align-items: baseline;
5
5
  }
6
6
  .pc-links__link {
7
- margin-top: 0px;
7
+ /* stylelint-disable-next-line declaration-no-important */
8
+ margin-top: 0px !important;
8
9
  }
9
10
  .pc-links_size_s {
10
11
  gap: 8px;
@@ -142,12 +142,15 @@ export interface LayoutItemProps extends ClassNameProps, CardLayoutProps, Analyt
142
142
  fullscreen?: boolean;
143
143
  icon?: PositionedIcon;
144
144
  }
145
- export interface ImageCardProps extends CardBaseProps, Pick<ContentBlockProps, 'title' | 'text'> {
145
+ export interface ImageCardProps extends CardBaseProps, CardLayoutProps, Omit<ContentBlockProps, 'colSizes' | 'centered'> {
146
146
  image: ImageProps;
147
147
  enableImageBorderRadius?: boolean;
148
148
  margins?: ImageCardMargins;
149
149
  direction?: ImageCardDirection;
150
150
  backgroundColor?: string;
151
+ url?: string;
152
+ urlTitle?: string;
153
+ target?: string;
151
154
  }
152
155
  export type DividerModel = {
153
156
  type: SubBlockType.Divider;
@@ -30,7 +30,13 @@ export declare const cardSchemas: {
30
30
  backgroundColor: {
31
31
  type: string;
32
32
  };
33
- title: {
33
+ url: {
34
+ type: string;
35
+ };
36
+ urlTitle: {
37
+ type: string;
38
+ };
39
+ title?: {
34
40
  oneOf: ({
35
41
  type: string;
36
42
  contentType: string;
@@ -61,12 +67,57 @@ export declare const cardSchemas: {
61
67
  };
62
68
  contentType?: undefined;
63
69
  })[];
64
- };
65
- text: {
70
+ } | undefined;
71
+ text?: {
66
72
  type: string;
67
73
  contentType: string;
68
74
  inputType: string;
69
- };
75
+ } | undefined;
76
+ additionalInfo?: {
77
+ type: string;
78
+ contentType: string;
79
+ } | undefined;
80
+ size?: {
81
+ type: string;
82
+ enum: string[];
83
+ } | undefined;
84
+ links?: {
85
+ type: string;
86
+ items: {
87
+ type: string;
88
+ properties: {
89
+ when: {
90
+ type: string;
91
+ };
92
+ };
93
+ };
94
+ } | undefined;
95
+ buttons?: {
96
+ type: string;
97
+ items: {
98
+ type: string;
99
+ properties: {
100
+ when: {
101
+ type: string;
102
+ };
103
+ };
104
+ };
105
+ } | undefined;
106
+ theme?: {
107
+ type: string;
108
+ enum: string[];
109
+ } | undefined;
110
+ list?: {
111
+ type: string;
112
+ items: {
113
+ type: string;
114
+ properties: {
115
+ when: {
116
+ type: string;
117
+ };
118
+ };
119
+ };
120
+ } | undefined;
70
121
  border: {
71
122
  type: string;
72
123
  enum: string[];
@@ -2,6 +2,7 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const tslib_1 = require("tslib");
4
4
  const react_1 = tslib_1.__importDefault(require("react"));
5
+ const uikit_1 = require("@gravity-ui/uikit");
5
6
  const components_1 = require("../../components");
6
7
  const utils_1 = require("../../components/Media/Image/utils");
7
8
  const models_1 = require("../../models");
@@ -9,13 +10,18 @@ const utils_2 = require("../../utils");
9
10
  const Content_1 = tslib_1.__importDefault(require("../Content/Content"));
10
11
  const b = (0, utils_2.block)('image-card');
11
12
  const ImageCard = (props) => {
12
- const { border = 'shadow', title, text, image, enableImageBorderRadius = false, direction = models_1.ImageCardDirection.Direct, margins, backgroundColor, } = props;
13
- const hasContent = Boolean(text || title);
13
+ const { border = 'shadow', title, text, image, enableImageBorderRadius = false, direction = models_1.ImageCardDirection.Direct, margins, backgroundColor, url, target, urlTitle, additionalInfo, links, buttons, list, theme: cardTheme = 'default', size = 's', } = props;
14
+ const hasContent = Boolean(text || title || buttons || links || list);
14
15
  const imageProps = (0, utils_1.getMediaImage)(image);
15
- return (react_1.default.createElement("div", { className: b({ border, 'with-content': hasContent, direction }), style: { backgroundColor } },
16
+ const titleId = (0, uikit_1.useUniqId)();
17
+ const cardContent = (react_1.default.createElement(react_1.default.Fragment, null,
16
18
  react_1.default.createElement("div", { className: b('image', { margins }) },
17
19
  react_1.default.createElement(components_1.Image, Object.assign({ className: b('image_inner', { radius: enableImageBorderRadius }) }, imageProps))),
18
20
  hasContent && (react_1.default.createElement("div", { className: b('content') },
19
- react_1.default.createElement(Content_1.default, { title: title, text: text, colSizes: { all: 12, md: 12 }, size: "s" })))));
21
+ react_1.default.createElement(Content_1.default, { titleId: titleId, title: title, text: text, links: links, buttons: buttons, list: list, theme: cardTheme, additionalInfo: additionalInfo, size: size, colSizes: { all: 12, md: 12 } })))));
22
+ return url ? (react_1.default.createElement(uikit_1.Link, { href: url, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: b({ border, 'with-content': hasContent, direction }), title: urlTitle, extraProps: {
23
+ draggable: false,
24
+ onDragStart: (e) => e.preventDefault(),
25
+ } }, cardContent)) : (react_1.default.createElement("div", { className: b({ border, 'with-content': hasContent, direction }), style: { backgroundColor } }, cardContent));
20
26
  };
21
27
  exports.default = ImageCard;
@@ -28,7 +28,13 @@ export declare const ImageCard: {
28
28
  backgroundColor: {
29
29
  type: string;
30
30
  };
31
- title: {
31
+ url: {
32
+ type: string;
33
+ };
34
+ urlTitle: {
35
+ type: string;
36
+ };
37
+ title?: {
32
38
  oneOf: ({
33
39
  type: string;
34
40
  contentType: string;
@@ -59,12 +65,57 @@ export declare const ImageCard: {
59
65
  };
60
66
  contentType?: undefined;
61
67
  })[];
62
- };
63
- text: {
68
+ } | undefined;
69
+ text?: {
64
70
  type: string;
65
71
  contentType: string;
66
72
  inputType: string;
67
- };
73
+ } | undefined;
74
+ additionalInfo?: {
75
+ type: string;
76
+ contentType: string;
77
+ } | undefined;
78
+ size?: {
79
+ type: string;
80
+ enum: string[];
81
+ } | undefined;
82
+ links?: {
83
+ type: string;
84
+ items: {
85
+ type: string;
86
+ properties: {
87
+ when: {
88
+ type: string;
89
+ };
90
+ };
91
+ };
92
+ } | undefined;
93
+ buttons?: {
94
+ type: string;
95
+ items: {
96
+ type: string;
97
+ properties: {
98
+ when: {
99
+ type: string;
100
+ };
101
+ };
102
+ };
103
+ } | undefined;
104
+ theme?: {
105
+ type: string;
106
+ enum: string[];
107
+ } | undefined;
108
+ list?: {
109
+ type: string;
110
+ items: {
111
+ type: string;
112
+ properties: {
113
+ when: {
114
+ type: string;
115
+ };
116
+ };
117
+ };
118
+ } | undefined;
68
119
  border: {
69
120
  type: string;
70
121
  enum: string[];
@@ -2,11 +2,11 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.ImageCard = void 0;
4
4
  const tslib_1 = require("tslib");
5
- const pick_1 = tslib_1.__importDefault(require("lodash/pick"));
5
+ const omit_1 = tslib_1.__importDefault(require("lodash/omit"));
6
6
  const common_1 = require("../../schema/validators/common");
7
7
  const components_1 = require("../../schema/validators/components");
8
8
  const schema_1 = require("../Content/schema");
9
- const ImageCardBlockContentProps = (0, pick_1.default)(schema_1.ContentBase, ['title', 'text']);
9
+ const ImageCardBlockContentProps = (0, omit_1.default)(schema_1.ContentBase, ['centered', 'colSizes']);
10
10
  exports.ImageCard = {
11
11
  'image-card': {
12
12
  additionalProperties: false,
@@ -19,6 +19,10 @@ exports.ImageCard = {
19
19
  enum: ['s', 'm'],
20
20
  }, backgroundColor: {
21
21
  type: 'string',
22
+ }, url: {
23
+ type: 'string',
24
+ }, urlTitle: {
25
+ type: 'string',
22
26
  } }),
23
27
  },
24
28
  };
@@ -4,7 +4,8 @@
4
4
  align-items: baseline;
5
5
  }
6
6
  .pc-links__link {
7
- margin-top: 0px;
7
+ /* stylelint-disable-next-line declaration-no-important */
8
+ margin-top: 0px !important;
8
9
  }
9
10
  .pc-links_size_s {
10
11
  gap: 8px;
@@ -142,12 +142,15 @@ export interface LayoutItemProps extends ClassNameProps, CardLayoutProps, Analyt
142
142
  fullscreen?: boolean;
143
143
  icon?: PositionedIcon;
144
144
  }
145
- export interface ImageCardProps extends CardBaseProps, Pick<ContentBlockProps, 'title' | 'text'> {
145
+ export interface ImageCardProps extends CardBaseProps, CardLayoutProps, Omit<ContentBlockProps, 'colSizes' | 'centered'> {
146
146
  image: ImageProps;
147
147
  enableImageBorderRadius?: boolean;
148
148
  margins?: ImageCardMargins;
149
149
  direction?: ImageCardDirection;
150
150
  backgroundColor?: string;
151
+ url?: string;
152
+ urlTitle?: string;
153
+ target?: string;
151
154
  }
152
155
  export type DividerModel = {
153
156
  type: SubBlockType.Divider;
@@ -30,7 +30,13 @@ export declare const cardSchemas: {
30
30
  backgroundColor: {
31
31
  type: string;
32
32
  };
33
- title: {
33
+ url: {
34
+ type: string;
35
+ };
36
+ urlTitle: {
37
+ type: string;
38
+ };
39
+ title?: {
34
40
  oneOf: ({
35
41
  type: string;
36
42
  contentType: string;
@@ -61,12 +67,57 @@ export declare const cardSchemas: {
61
67
  };
62
68
  contentType?: undefined;
63
69
  })[];
64
- };
65
- text: {
70
+ } | undefined;
71
+ text?: {
66
72
  type: string;
67
73
  contentType: string;
68
74
  inputType: string;
69
- };
75
+ } | undefined;
76
+ additionalInfo?: {
77
+ type: string;
78
+ contentType: string;
79
+ } | undefined;
80
+ size?: {
81
+ type: string;
82
+ enum: string[];
83
+ } | undefined;
84
+ links?: {
85
+ type: string;
86
+ items: {
87
+ type: string;
88
+ properties: {
89
+ when: {
90
+ type: string;
91
+ };
92
+ };
93
+ };
94
+ } | undefined;
95
+ buttons?: {
96
+ type: string;
97
+ items: {
98
+ type: string;
99
+ properties: {
100
+ when: {
101
+ type: string;
102
+ };
103
+ };
104
+ };
105
+ } | undefined;
106
+ theme?: {
107
+ type: string;
108
+ enum: string[];
109
+ } | undefined;
110
+ list?: {
111
+ type: string;
112
+ items: {
113
+ type: string;
114
+ properties: {
115
+ when: {
116
+ type: string;
117
+ };
118
+ };
119
+ };
120
+ } | undefined;
70
121
  border: {
71
122
  type: string;
72
123
  enum: string[];
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ import { Link, useUniqId } from '@gravity-ui/uikit';
2
3
  import { Image } from '../../components';
3
4
  import { getMediaImage } from '../../components/Media/Image/utils';
4
5
  import { ImageCardDirection } from '../../models';
@@ -7,13 +8,18 @@ import Content from '../Content/Content';
7
8
  import './ImageCard.css';
8
9
  const b = block('image-card');
9
10
  const ImageCard = (props) => {
10
- const { border = 'shadow', title, text, image, enableImageBorderRadius = false, direction = ImageCardDirection.Direct, margins, backgroundColor, } = props;
11
- const hasContent = Boolean(text || title);
11
+ const { border = 'shadow', title, text, image, enableImageBorderRadius = false, direction = ImageCardDirection.Direct, margins, backgroundColor, url, target, urlTitle, additionalInfo, links, buttons, list, theme: cardTheme = 'default', size = 's', } = props;
12
+ const hasContent = Boolean(text || title || buttons || links || list);
12
13
  const imageProps = getMediaImage(image);
13
- return (React.createElement("div", { className: b({ border, 'with-content': hasContent, direction }), style: { backgroundColor } },
14
+ const titleId = useUniqId();
15
+ const cardContent = (React.createElement(React.Fragment, null,
14
16
  React.createElement("div", { className: b('image', { margins }) },
15
17
  React.createElement(Image, Object.assign({ className: b('image_inner', { radius: enableImageBorderRadius }) }, imageProps))),
16
18
  hasContent && (React.createElement("div", { className: b('content') },
17
- React.createElement(Content, { title: title, text: text, colSizes: { all: 12, md: 12 }, size: "s" })))));
19
+ React.createElement(Content, { titleId: titleId, title: title, text: text, links: links, buttons: buttons, list: list, theme: cardTheme, additionalInfo: additionalInfo, size: size, colSizes: { all: 12, md: 12 } })))));
20
+ return url ? (React.createElement(Link, { href: url, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: b({ border, 'with-content': hasContent, direction }), title: urlTitle, extraProps: {
21
+ draggable: false,
22
+ onDragStart: (e) => e.preventDefault(),
23
+ } }, cardContent)) : (React.createElement("div", { className: b({ border, 'with-content': hasContent, direction }), style: { backgroundColor } }, cardContent));
18
24
  };
19
25
  export default ImageCard;
@@ -28,7 +28,13 @@ export declare const ImageCard: {
28
28
  backgroundColor: {
29
29
  type: string;
30
30
  };
31
- title: {
31
+ url: {
32
+ type: string;
33
+ };
34
+ urlTitle: {
35
+ type: string;
36
+ };
37
+ title?: {
32
38
  oneOf: ({
33
39
  type: string;
34
40
  contentType: string;
@@ -59,12 +65,57 @@ export declare const ImageCard: {
59
65
  };
60
66
  contentType?: undefined;
61
67
  })[];
62
- };
63
- text: {
68
+ } | undefined;
69
+ text?: {
64
70
  type: string;
65
71
  contentType: string;
66
72
  inputType: string;
67
- };
73
+ } | undefined;
74
+ additionalInfo?: {
75
+ type: string;
76
+ contentType: string;
77
+ } | undefined;
78
+ size?: {
79
+ type: string;
80
+ enum: string[];
81
+ } | undefined;
82
+ links?: {
83
+ type: string;
84
+ items: {
85
+ type: string;
86
+ properties: {
87
+ when: {
88
+ type: string;
89
+ };
90
+ };
91
+ };
92
+ } | undefined;
93
+ buttons?: {
94
+ type: string;
95
+ items: {
96
+ type: string;
97
+ properties: {
98
+ when: {
99
+ type: string;
100
+ };
101
+ };
102
+ };
103
+ } | undefined;
104
+ theme?: {
105
+ type: string;
106
+ enum: string[];
107
+ } | undefined;
108
+ list?: {
109
+ type: string;
110
+ items: {
111
+ type: string;
112
+ properties: {
113
+ when: {
114
+ type: string;
115
+ };
116
+ };
117
+ };
118
+ } | undefined;
68
119
  border: {
69
120
  type: string;
70
121
  enum: string[];
@@ -1,8 +1,8 @@
1
- import pick from 'lodash/pick';
1
+ import omit from 'lodash/omit';
2
2
  import { BaseProps, CardBase } from '../../schema/validators/common';
3
3
  import { ImageProps } from '../../schema/validators/components';
4
4
  import { ContentBase } from '../Content/schema';
5
- const ImageCardBlockContentProps = pick(ContentBase, ['title', 'text']);
5
+ const ImageCardBlockContentProps = omit(ContentBase, ['centered', 'colSizes']);
6
6
  export const ImageCard = {
7
7
  'image-card': {
8
8
  additionalProperties: false,
@@ -15,6 +15,10 @@ export const ImageCard = {
15
15
  enum: ['s', 'm'],
16
16
  }, backgroundColor: {
17
17
  type: 'string',
18
+ }, url: {
19
+ type: 'string',
20
+ }, urlTitle: {
21
+ type: 'string',
18
22
  } }),
19
23
  },
20
24
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/page-constructor",
3
- "version": "4.57.3",
3
+ "version": "4.58.1",
4
4
  "description": "Gravity UI Page Constructor",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -142,12 +142,15 @@ export interface LayoutItemProps extends ClassNameProps, CardLayoutProps, Analyt
142
142
  fullscreen?: boolean;
143
143
  icon?: PositionedIcon;
144
144
  }
145
- export interface ImageCardProps extends CardBaseProps, Pick<ContentBlockProps, 'title' | 'text'> {
145
+ export interface ImageCardProps extends CardBaseProps, CardLayoutProps, Omit<ContentBlockProps, 'colSizes' | 'centered'> {
146
146
  image: ImageProps;
147
147
  enableImageBorderRadius?: boolean;
148
148
  margins?: ImageCardMargins;
149
149
  direction?: ImageCardDirection;
150
150
  backgroundColor?: string;
151
+ url?: string;
152
+ urlTitle?: string;
153
+ target?: string;
151
154
  }
152
155
  export type DividerModel = {
153
156
  type: SubBlockType.Divider;