@gravity-ui/page-constructor 1.11.1 → 1.12.1-alpha.0

package/build/cjs/blocks/Slider/Slider.d.ts

@@ -1,10 +1,5 @@
-import SlickSlider, { Settings } from 'react-slick';
+import { Settings } from 'react-slick';
 import { Refable, SliderProps as SliderParams, ClassNameProps, WithChildren } from '../../models';
-export interface SlickSliderFull extends SlickSlider {
-    innerSlider?: {
-        list: HTMLElement;
-    };
-}
 export interface SliderProps extends Omit<SliderParams, 'children'>, Refable<HTMLDivElement>, ClassNameProps, Pick<Settings, 'lazyLoad'> {
     type?: string;
     anchorId?: string;

package/build/cjs/blocks/Slider/schema.d.ts

@@ -5,29 +5,6 @@ export declare const SliderProps: {
     arrows: {
         type: string;
     };
-    description: {
-        type: string;
-    };
-    title: {
-        type: string;
-        additionalProperties: boolean;
-        required: string[];
-        properties: {
-            text: {
-                type: string;
-            };
-            textSize: {
-                type: string;
-                enum: string[];
-            };
-            url: {
-                type: string;
-            };
-            resetMargin: {
-                type: string;
-            };
-        };
-    };
     randomOrder: {
         type: string;
     };
@@ -56,6 +33,7 @@ export declare const SliderProps: {
         properties: {
             text: {
                 type: string;
+                contentType: string;
             };
             size: {
                 type: string;
@@ -105,34 +83,40 @@ export declare const SliderBlock: {
         additionalProperties: boolean;
         required: never[];
         properties: {
-            dots: {
-                type: string;
+            title: {
+                oneOf: ({
+                    type: string;
+                    additionalProperties: boolean;
+                    required: string[];
+                    properties: {
+                        text: {
+                            type: string;
+                            contentType: string;
+                        };
+                        textSize: {
+                            type: string;
+                            enum: string[];
+                        };
+                        url: {
+                            type: string;
+                        };
+                        resetMargin: {
+                            type: string;
+                        };
+                    };
+                } | {
+                    type: string;
+                })[];
             };
-            arrows: {
+            description: {
                 type: string;
+                contentType: string;
             };
-            description: {
+            dots: {
                 type: string;
             };
-            title: {
+            arrows: {
                 type: string;
-                additionalProperties: boolean;
-                required: string[];
-                properties: {
-                    text: {
-                        type: string;
-                    };
-                    textSize: {
-                        type: string;
-                        enum: string[];
-                    };
-                    url: {
-                        type: string;
-                    };
-                    resetMargin: {
-                        type: string;
-                    };
-                };
             };
             randomOrder: {
                 type: string;
@@ -162,6 +146,7 @@ export declare const SliderBlock: {
                 properties: {
                     text: {
                         type: string;
+                        contentType: string;
                     };
                     size: {
                         type: string;
@@ -212,6 +197,7 @@ export declare const SliderBlock: {
                 properties: {
                     text: {
                         type: string;
+                        contentType: string;
                     };
                     url: {
                         type: string;

package/build/cjs/blocks/Slider/schema.js

@@ -36,6 +36,7 @@ const DisclaimerProps = {
     properties: {
         text: {
             type: 'string',
+            contentType: 'text',
         },
         size: {
             type: 'string',
@@ -50,10 +51,6 @@ exports.SliderProps = {
     arrows: {
         type: 'boolean',
     },
-    description: {
-        type: 'string',
-    },
-    title: common_1.TitleProps,
     randomOrder: {
         type: 'boolean',
     },
@@ -70,6 +67,6 @@ exports.SliderBlock = {
     'slider-block': {
         additionalProperties: false,
         required: [],
-        properties: Object.assign(Object.assign(Object.assign({}, common_1.BlockBaseProps), common_1.AnimatableProps), exports.SliderProps),
+        properties: Object.assign(Object.assign(Object.assign(Object.assign({}, common_1.BlockBaseProps), common_1.AnimatableProps), exports.SliderProps), common_1.BlockHeaderProps),
     },
 };

package/build/cjs/blocks/Table/schema.d.ts

@@ -5,6 +5,7 @@ export declare const TableBlock: {
         properties: {
             title: {
                 type: string;
+                contentType: string;
             };
             table: {
                 additionalProperties: boolean;
@@ -16,6 +17,7 @@ export declare const TableBlock: {
                             type: string;
                             items: {
                                 type: string[];
+                                contentType: string;
                             };
                         };
                     };
@@ -23,6 +25,7 @@ export declare const TableBlock: {
                         type: string;
                         items: {
                             type: string;
+                            contentType: string;
                         };
                     };
                     justify: {
@@ -47,6 +50,7 @@ export declare const TableBlock: {
                 properties: {
                     text: {
                         type: string;
+                        contentType: string;
                     };
                     url: {
                         type: string;

package/build/cjs/blocks/Table/schema.js

@@ -8,6 +8,7 @@ exports.TableBlock = {
         required: ['title', 'table'],
         properties: Object.assign(Object.assign({}, common_1.BlockBaseProps), { title: {
                 type: 'string',
+                contentType: 'text',
             }, table: {
                 additionalProperties: false,
                 required: ['content'],
@@ -17,12 +18,14 @@ exports.TableBlock = {
                             type: 'array',
                             items: {
                                 type: ['string', 'number'],
+                                contentType: 'text',
                             },
                         },
                     }, legend: {
                         type: 'array',
                         items: {
                             type: 'string',
+                            contentType: 'yfm',
                         },
                     }, justify: {
                         type: 'array',

package/build/cjs/blocks/Tabs/schema.d.ts

@@ -8,6 +8,7 @@ export declare const tabsItem: {
         };
         caption: {
             type: string;
+            contentType: string;
         };
         media: {
             oneOf: ({
@@ -101,6 +102,7 @@ export declare const tabsItem: {
                                     };
                                     text: {
                                         type: string;
+                                        contentType: string;
                                     };
                                 };
                             };
@@ -155,6 +157,7 @@ export declare const tabsItem: {
             properties: {
                 text: {
                     type: string;
+                    contentType: string;
                 };
                 url: {
                     type: string;
@@ -206,6 +209,7 @@ export declare const tabsItem: {
                 properties: {
                     text: {
                         type: string;
+                        contentType: string;
                     };
                     textSize: {
                         type: string;
@@ -220,13 +224,16 @@ export declare const tabsItem: {
                 };
             } | {
                 type: string;
+                contentType: string;
             })[];
         } | undefined;
         text?: {
             type: string;
+            contentType: string;
         } | undefined;
         additionalInfo?: {
             type: string;
+            contentType: string;
         } | undefined;
         size?: {
             type: string;
@@ -265,29 +272,6 @@ export declare const TabsBlock: {
         additionalProperties: boolean;
         required: string[];
         properties: {
-            title: {
-                type: string;
-                additionalProperties: boolean;
-                required: string[];
-                properties: {
-                    text: {
-                        type: string;
-                    };
-                    textSize: {
-                        type: string;
-                        enum: string[];
-                    };
-                    url: {
-                        type: string;
-                    };
-                    resetMargin: {
-                        type: string;
-                    };
-                };
-            };
-            description: {
-                type: string;
-            };
             tabsColSizes: {};
             direction: {
                 type: string;
@@ -307,6 +291,35 @@ export declare const TabsBlock: {
                     };
                 };
             };
+            title: {
+                oneOf: ({
+                    type: string;
+                    additionalProperties: boolean;
+                    required: string[];
+                    properties: {
+                        text: {
+                            type: string;
+                            contentType: string;
+                        };
+                        textSize: {
+                            type: string;
+                            enum: string[];
+                        };
+                        url: {
+                            type: string;
+                        };
+                        resetMargin: {
+                            type: string;
+                        };
+                    };
+                } | {
+                    type: string;
+                })[];
+            };
+            description: {
+                type: string;
+                contentType: string;
+            };
             anchor: {
                 type: string;
                 additionalProperties: boolean;
@@ -314,6 +327,7 @@ export declare const TabsBlock: {
                 properties: {
                     text: {
                         type: string;
+                        contentType: string;
                     };
                     url: {
                         type: string;

package/build/cjs/blocks/Tabs/schema.js

@@ -16,6 +16,7 @@ exports.tabsItem = {
             type: 'string',
         }, caption: {
             type: 'string',
+            contentType: 'text',
         }, media: (0, common_1.withTheme)({
             type: 'object',
             properties: common_1.MediaProps,
@@ -27,9 +28,7 @@ exports.TabsBlock = {
     'tabs-block': {
         additionalProperties: false,
         required: ['title', 'items'],
-        properties: Object.assign(Object.assign({}, common_1.BlockBaseProps), { title: common_1.TitleProps, description: {
-                type: 'string',
-            }, tabsColSizes: common_1.containerSizesArray.reduce((acc, size) => (Object.assign(Object.assign({}, acc), { [size]: common_1.sizeNumber })), {}), direction: {
+        properties: Object.assign(Object.assign(Object.assign({}, common_1.BlockBaseProps), common_1.BlockHeaderProps), { tabsColSizes: common_1.containerSizesArray.reduce((acc, size) => (Object.assign(Object.assign({}, acc), { [size]: common_1.sizeNumber })), {}), direction: {
                 type: 'string',
                 enum: common_1.mediaDirection,
             }, centered: { type: 'boolean' }, items: (0, utils_1.filteredArray)(exports.tabsItem) }),

package/build/cjs/components/Author/Author.js

@@ -7,10 +7,10 @@ const models_1 = require("../../models");
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('author');
 const Author = (props) => {
-    const { author, className, authorContainerClassName, type = models_1.AuthorType.Column } = props;
+    const { author, className, authorContainerClassName, type = models_1.AuthorType.Column, dataQa } = props;
     const { firstName, secondName, description, avatar } = author;
     const name = secondName ? `${firstName} ${secondName}` : firstName;
-    return (react_1.default.createElement("div", { className: b({ type }, className) },
+    return (react_1.default.createElement("div", { className: b({ type }, className), "data-qa": dataQa },
         avatar && (react_1.default.createElement("div", { className: b('avatar', authorContainerClassName) }, typeof avatar === 'string' ? react_1.default.createElement(index_1.Image, { src: avatar }) : avatar)),
         react_1.default.createElement("div", { className: b('label') },
             react_1.default.createElement("div", { className: b('name') }, name),

package/build/cjs/components/Author/__tests__/Author.test.d.ts

@@ -0,0 +1 @@
+export {};

package/build/cjs/components/Author/__tests__/Author.test.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_2 = require("@testing-library/react");
+const models_1 = require("../../../models");
+const Author_1 = tslib_1.__importDefault(require("../Author"));
+const testId = 'author';
+const author = {
+    firstName: 'John',
+    secondName: 'Doe',
+    description: 'Web designer',
+    avatar: 'https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-gray.png',
+};
+describe('Author', () => {
+    test('Render author by default', async () => {
+        (0, react_2.render)(react_1.default.createElement(Author_1.default, { author: author, dataQa: testId }));
+        const object = react_2.screen.getByTestId(testId);
+        expect(object).toBeInTheDocument();
+    });
+    test('Has full name', async () => {
+        const name = `${author.firstName} ${author.secondName}`;
+        (0, react_2.render)(react_1.default.createElement(Author_1.default, { author: author, dataQa: testId }));
+        const object = react_2.screen.getByText(name);
+        expect(object).toBeInTheDocument();
+    });
+    test('Has first name only', async () => {
+        const name = author.firstName;
+        (0, react_2.render)(react_1.default.createElement(Author_1.default, { author: Object.assign(Object.assign({}, author), { secondName: '' }), dataQa: testId }));
+        const object = react_2.screen.getByText(name);
+        expect(object).toBeInTheDocument();
+    });
+    test('Has avatar', async () => {
+        (0, react_2.render)(react_1.default.createElement(Author_1.default, { author: author, dataQa: testId }));
+        const avatar = react_2.screen.getByRole('img');
+        expect(avatar).toBeInTheDocument();
+        expect(avatar).toHaveAttribute('src', author.avatar);
+    });
+    test('Has description', async () => {
+        (0, react_2.render)(react_1.default.createElement(Author_1.default, { author: author, dataQa: testId }));
+        const object = react_2.screen.getByText(author.description);
+        expect(object).toBeInTheDocument();
+    });
+    test.each(new Array(models_1.AuthorType.Column, models_1.AuthorType.Line))('Render with given "%s" type', (type) => {
+        (0, react_2.render)(react_1.default.createElement(Author_1.default, { author: author, dataQa: testId, type: type }));
+        const object = react_2.screen.getByTestId(testId);
+        expect(object).toHaveClass(`pc-author_type_${type}`);
+    });
+});

package/build/cjs/components/Author/schema.d.ts

@@ -10,9 +10,11 @@ export declare const author: {
                 properties: {
                     firstName: {
                         type: string;
+                        contentType: string;
                     };
                     secondName: {
                         type: string;
+                        contentType: string;
                     };
                     avatar: {
                         type: string;
@@ -20,6 +22,7 @@ export declare const author: {
                     };
                     description: {
                         type: string;
+                        contentType: string;
                     };
                 };
             };

package/build/cjs/components/BlockHeader/BlockHeader.css

@@ -1,27 +1,16 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
-.pc-BlockHeader__description {
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
-  margin-top: 16px;
-}
-.pc-BlockHeader__description_titleSize_s {
-  margin-top: 8px;
+.pc-block-header__description {
+  margin-top: 12px;
 }
-.pc-BlockHeader__description_titleSize_l {
+.pc-block-header__description .yfm {
   font-size: var(--yc-text-body-3-font-size);
   line-height: var(--yc-text-body-3-line-height);
 }
-.pc-BlockHeader__description a {
-  outline: none;
-  color: var(--yc-color-text-link);
-  text-decoration: none;
-  cursor: pointer;
-}
-.utilityfocus .pc-BlockHeader__description a:focus {
-  outline: 2px solid #ffdb4d;
+.pc-block-header__description_titleSize_s {
+  margin-top: 8px;
 }
-.pc-BlockHeader__description a:hover, .pc-BlockHeader__description a:active {
-  --pc-text-header-color: var(--yc-color-text-link-hover);
-  color: var(--yc-color-text-link-hover);
+.pc-block-header__description_titleSize_s .yfm {
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
 }

package/build/cjs/components/BlockHeader/BlockHeader.js

@@ -5,7 +5,8 @@ const react_1 = tslib_1.__importDefault(require("react"));
 const utils_1 = require("../../utils");
 const grid_1 = require("../../grid");
 const __1 = require("../");
-const b = (0, utils_1.block)('BlockHeader');
+const YFMWrapper_1 = tslib_1.__importDefault(require("../YFMWrapper/YFMWrapper"));
+const b = (0, utils_1.block)('block-header');
 const BlockHeader = ({ title, description, className, colSizes = { all: 12, sm: 8 }, }) => {
     if (!title && !description) {
         return null;
@@ -14,8 +15,8 @@ const BlockHeader = ({ title, description, className, colSizes = { all: 12, sm:
     return (react_1.default.createElement("div", { className: b(null, className) },
         text && (react_1.default.createElement(grid_1.Col, { reset: true, sizes: colSizes },
             react_1.default.createElement(__1.Title, Object.assign({ text: text }, titleProps)))),
-        description && (react_1.default.createElement(grid_1.Col, { reset: true, sizes: { all: 12, sm: 8 } },
+        description && (react_1.default.createElement(grid_1.Col, { reset: true, sizes: colSizes },
             react_1.default.createElement("div", { className: b('description', { titleSize: titleProps === null || titleProps === void 0 ? void 0 : titleProps.textSize }) },
-                react_1.default.createElement(__1.HTML, null, description))))));
+                react_1.default.createElement(YFMWrapper_1.default, { content: description, modifiers: { constructor: true } }))))));
 };
 exports.default = BlockHeader;

package/build/cjs/components/Image/schema.d.ts

@@ -18,6 +18,7 @@ export declare const ImageDeviceProps: {
         };
         alt: {
             type: string;
+            contentType: string;
         };
         disableCompress: {
             type: string;
@@ -35,6 +36,7 @@ export declare const ImageObjectProps: {
         };
         alt: {
             type: string;
+            contentType: string;
         };
         disableCompress: {
             type: string;

package/build/cjs/components/Image/schema.js

@@ -3,44 +3,35 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ImageProps = exports.ImageObjectProps = exports.ImageDeviceProps = exports.urlPattern = void 0;
 const utils_1 = require("../../schema/validators/utils");
 exports.urlPattern = '^((http[s]?|ftp):\\/)?\\/?([^:\\/\\s]+)((\\/\\w+)*\\/)([\\w\\-\\.]+[^#?\\s]+)(.*)?(#[\\w\\-]+)?$';
+const ImageBase = {
+    alt: {
+        type: 'string',
+        contentType: 'text',
+    },
+    disableCompress: {
+        type: 'boolean',
+    },
+};
 exports.ImageDeviceProps = {
     type: 'object',
     additionalProperties: false,
     required: ['desktop', 'mobile'],
-    properties: {
-        desktop: { type: 'string', pattern: exports.urlPattern },
-        tablet: {
+    properties: Object.assign(Object.assign({}, ImageBase), { desktop: { type: 'string', pattern: exports.urlPattern }, tablet: {
             type: 'string',
             pattern: exports.urlPattern,
-        },
-        mobile: {
+        }, mobile: {
             type: 'string',
             pattern: exports.urlPattern,
-        },
-        alt: {
-            type: 'string',
-        },
-        disableCompress: {
-            type: 'boolean',
-        },
-    },
+        } }),
 };
 exports.ImageObjectProps = {
     type: 'object',
     additionalProperties: false,
     required: ['src'],
-    properties: {
-        src: {
+    properties: Object.assign(Object.assign({}, ImageBase), { src: {
             type: 'string',
             pattern: exports.urlPattern,
-        },
-        alt: {
-            type: 'string',
-        },
-        disableCompress: {
-            type: 'boolean',
-        },
-    },
+        } }),
 };
 exports.ImageProps = {
     oneOf: [

package/build/cjs/grid/Grid/Grid.css

@@ -21,64 +21,64 @@
 }
 @media only screen and (max-width: 577px) {
   .pc-Grid .container,
-.pc-Grid .container-fluid {
+  .pc-Grid .container-fluid {
     padding: 0 16px;
   }
   .pc-Grid .col,
-.pc-Grid .col-sm-auto,
-.pc-Grid .col-auto {
+  .pc-Grid .col-sm-auto,
+  .pc-Grid .col-auto {
     padding: 0 8px;
   }
   .pc-Grid .col-sm-0,
-.pc-Grid .col-0 {
+  .pc-Grid .col-0 {
     padding: 0 8px;
   }
   .pc-Grid .col-sm-1,
-.pc-Grid .col-1 {
+  .pc-Grid .col-1 {
     padding: 0 8px;
   }
   .pc-Grid .col-sm-2,
-.pc-Grid .col-2 {
+  .pc-Grid .col-2 {
     padding: 0 8px;
   }
   .pc-Grid .col-sm-3,
-.pc-Grid .col-3 {
+  .pc-Grid .col-3 {
     padding: 0 8px;
   }
   .pc-Grid .col-sm-4,
-.pc-Grid .col-4 {
+  .pc-Grid .col-4 {
     padding: 0 8px;
   }
   .pc-Grid .col-sm-5,
-.pc-Grid .col-5 {
+  .pc-Grid .col-5 {
     padding: 0 8px;
   }
   .pc-Grid .col-sm-6,
-.pc-Grid .col-6 {
+  .pc-Grid .col-6 {
     padding: 0 8px;
   }
   .pc-Grid .col-sm-7,
-.pc-Grid .col-7 {
+  .pc-Grid .col-7 {
     padding: 0 8px;
   }
   .pc-Grid .col-sm-8,
-.pc-Grid .col-8 {
+  .pc-Grid .col-8 {
     padding: 0 8px;
   }
   .pc-Grid .col-sm-9,
-.pc-Grid .col-9 {
+  .pc-Grid .col-9 {
     padding: 0 8px;
   }
   .pc-Grid .col-sm-10,
-.pc-Grid .col-10 {
+  .pc-Grid .col-10 {
     padding: 0 8px;
   }
   .pc-Grid .col-sm-11,
-.pc-Grid .col-11 {
+  .pc-Grid .col-11 {
     padding: 0 8px;
   }
   .pc-Grid .col-sm-12,
-.pc-Grid .col-12 {
+  .pc-Grid .col-12 {
     padding: 0 8px;
   }
   .pc-Grid .row .row {

package/build/cjs/models/constructor-items/common.d.ts

@@ -332,6 +332,7 @@ export interface AuthorProps {
     className?: string;
     authorContainerClassName?: string;
     type?: AuthorType;
+    dataQa?: string;
 }
 export interface BlockHeaderProps {
     title?: TitleProps | string;

package/build/cjs/navigation/components/Header/Header.css

@@ -18,10 +18,11 @@ unpredictable css rules order in build */
   height: var(--header-height);
 }
 @media (min-width: 769px) {
-  .pc-header__mobile-menu-button {
+  .pc-header__mobile-menu-button.pc-header__mobile-menu-button {
     display: none;
   }
 }
+
 .pc-header__navigation, .pc-header__left, .pc-header__right {
   display: flex;
   align-items: center;