@gravity-ui/page-constructor 5.9.1 → 5.10.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.
@@ -141,12 +141,15 @@ export interface LayoutItemProps extends ClassNameProps, CardLayoutProps, Analyt
141
141
  fullscreen?: boolean;
142
142
  icon?: PositionedIcon;
143
143
  }
144
- export interface ImageCardProps extends CardBaseProps, Pick<ContentBlockProps, 'title' | 'text'> {
144
+ export interface ImageCardProps extends CardBaseProps, CardLayoutProps, Omit<ContentBlockProps, 'colSizes' | 'centered'> {
145
145
  image: ImageProps;
146
146
  enableImageBorderRadius?: boolean;
147
147
  margins?: ImageCardMargins;
148
148
  direction?: ImageCardDirection;
149
149
  backgroundColor?: string;
150
+ url?: string;
151
+ urlTitle?: string;
152
+ target?: string;
150
153
  }
151
154
  export type DividerModel = {
152
155
  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
  };
@@ -141,12 +141,15 @@ export interface LayoutItemProps extends ClassNameProps, CardLayoutProps, Analyt
141
141
  fullscreen?: boolean;
142
142
  icon?: PositionedIcon;
143
143
  }
144
- export interface ImageCardProps extends CardBaseProps, Pick<ContentBlockProps, 'title' | 'text'> {
144
+ export interface ImageCardProps extends CardBaseProps, CardLayoutProps, Omit<ContentBlockProps, 'colSizes' | 'centered'> {
145
145
  image: ImageProps;
146
146
  enableImageBorderRadius?: boolean;
147
147
  margins?: ImageCardMargins;
148
148
  direction?: ImageCardDirection;
149
149
  backgroundColor?: string;
150
+ url?: string;
151
+ urlTitle?: string;
152
+ target?: string;
150
153
  }
151
154
  export type DividerModel = {
152
155
  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": "5.9.1",
3
+ "version": "5.10.0",
4
4
  "description": "Gravity UI Page Constructor",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -104,7 +104,7 @@
104
104
  "react-slick": "^0.29.0",
105
105
  "react-transition-group": "^4.4.2",
106
106
  "react-waypoint": "^10.1.0",
107
- "sanitize-html": "2.6.1",
107
+ "sanitize-html": "2.12.1",
108
108
  "snakecase-keys": "^5.1.0",
109
109
  "typograf": "^6.14.0",
110
110
  "utility-types": "^3.10.0",
@@ -141,12 +141,15 @@ export interface LayoutItemProps extends ClassNameProps, CardLayoutProps, Analyt
141
141
  fullscreen?: boolean;
142
142
  icon?: PositionedIcon;
143
143
  }
144
- export interface ImageCardProps extends CardBaseProps, Pick<ContentBlockProps, 'title' | 'text'> {
144
+ export interface ImageCardProps extends CardBaseProps, CardLayoutProps, Omit<ContentBlockProps, 'colSizes' | 'centered'> {
145
145
  image: ImageProps;
146
146
  enableImageBorderRadius?: boolean;
147
147
  margins?: ImageCardMargins;
148
148
  direction?: ImageCardDirection;
149
149
  backgroundColor?: string;
150
+ url?: string;
151
+ urlTitle?: string;
152
+ target?: string;
150
153
  }
151
154
  export type DividerModel = {
152
155
  type: SubBlockType.Divider;