@gravity-ui/page-constructor 5.9.1 → 5.10.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.
Files changed (15) hide show
  1. package/build/cjs/components/Links/Links.css +2 -1
  2. package/build/cjs/models/constructor-items/sub-blocks.d.ts +4 -1
  3. package/build/cjs/schema/constants.d.ts +55 -4
  4. package/build/cjs/sub-blocks/ImageCard/ImageCard.js +10 -4
  5. package/build/cjs/sub-blocks/ImageCard/schema.d.ts +55 -4
  6. package/build/cjs/sub-blocks/ImageCard/schema.js +6 -2
  7. package/build/esm/components/Links/Links.css +2 -1
  8. package/build/esm/models/constructor-items/sub-blocks.d.ts +4 -1
  9. package/build/esm/schema/constants.d.ts +55 -4
  10. package/build/esm/sub-blocks/ImageCard/ImageCard.js +10 -4
  11. package/build/esm/sub-blocks/ImageCard/schema.d.ts +55 -4
  12. package/build/esm/sub-blocks/ImageCard/schema.js +6 -2
  13. package/package.json +12 -11
  14. package/server/models/constructor-items/sub-blocks.d.ts +4 -1
  15. package/widget/index.js +1 -1
package/build/cjs/components/Links/Links.css CHANGED
@@ -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;
package/build/cjs/models/constructor-items/sub-blocks.d.ts CHANGED
@@ -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;
package/build/cjs/schema/constants.d.ts CHANGED
@@ -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[];
package/build/cjs/sub-blocks/ImageCard/ImageCard.js CHANGED
@@ -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;
package/build/cjs/sub-blocks/ImageCard/schema.d.ts CHANGED
@@ -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[];
package/build/cjs/sub-blocks/ImageCard/schema.js CHANGED
@@ -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
  };
package/build/esm/components/Links/Links.css CHANGED
@@ -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;
package/build/esm/models/constructor-items/sub-blocks.d.ts CHANGED
@@ -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;
package/build/esm/schema/constants.d.ts CHANGED
@@ -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[];
package/build/esm/sub-blocks/ImageCard/ImageCard.js CHANGED
@@ -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;
package/build/esm/sub-blocks/ImageCard/schema.d.ts CHANGED
@@ -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[];
package/build/esm/sub-blocks/ImageCard/schema.js CHANGED
@@ -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.1",
4
4
  "description": "Gravity UI Page Constructor",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -65,8 +65,8 @@
65
65
  "lint": "run-p lint:js lint:styles lint:prettier typecheck",
66
66
  "typecheck": "tsc --noEmit",
67
67
  "dev": "npm run storybook:start",
68
- "storybook:start": "sb dev -p 7009",
69
- "storybook:build": "sb build -c .storybook -o storybook-static",
68
+ "storybook:start": "storybook dev -p 7009",
69
+ "storybook:build": "storybook build -c .storybook -o storybook-static",
70
70
  "start": "node dist",
71
71
  "clean": "gulp clean",
72
72
  "build:client": "gulp",
@@ -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",
@@ -131,14 +131,15 @@
131
131
  "@gravity-ui/uikit": "^6.2.0",
132
132
  "@playwright/experimental-ct-react": "^1.38.1",
133
133
  "@playwright/test": "^1.38.1",
134
- "@storybook/addon-actions": "^7.6.17",
135
- "@storybook/addon-essentials": "^7.6.17",
134
+ "@storybook/addon-actions": "8.0.5",
135
+ "@storybook/addon-essentials": "8.0.5",
136
136
  "@storybook/addon-knobs": "^7.0.2",
137
- "@storybook/addon-mdx-gfm": "^7.6.17",
138
- "@storybook/addon-viewport": "^7.6.17",
137
+ "@storybook/addon-mdx-gfm": "8.0.5",
138
+ "@storybook/addon-viewport": "8.0.5",
139
+ "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
139
140
  "@storybook/preset-scss": "^1.0.3",
140
- "@storybook/react": "^7.6.17",
141
- "@storybook/react-webpack5": "^7.6.17",
141
+ "@storybook/react": "8.0.5",
142
+ "@storybook/react-webpack5": "8.0.5",
142
143
  "@testing-library/jest-dom": "^5.16.5",
143
144
  "@testing-library/react": "^13.4.0",
144
145
  "@testing-library/user-event": "^14.4.3",
@@ -191,7 +192,7 @@
191
192
  "rimraf": "^3.0.2",
192
193
  "sass": "^1.63.6",
193
194
  "sass-loader": "^10.4.1",
194
- "storybook": "^7.6.17",
195
+ "storybook": "8.0.5",
195
196
  "string-replace-loader": "^3.1.0",
196
197
  "style-loader": "^2.0.0",
197
198
  "stylelint": "^14.11.0",
package/server/models/constructor-items/sub-blocks.d.ts CHANGED
@@ -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;