@gravity-ui/page-constructor 3.15.0 → 3.17.0

package/build/cjs/text-transform/config.js

@@ -51,7 +51,7 @@ function parsePriceDetailedBlock(transformer, block) {
 }
 const parseContentLayout = (transformer, content) => {
     if (content) {
-        const { text, additionalInfo } = content;
+        const { text, additionalInfo, list } = content;
         /* eslint-disable no-not-accumulator-reassign/no-not-accumulator-reassign */
         if (text) {
             content.text = transformer(text);
@@ -59,6 +59,14 @@ const parseContentLayout = (transformer, content) => {
         if (additionalInfo) {
             content.additionalInfo = transformer(additionalInfo);
         }
+        if (list) {
+            content.list = list.map((item) => {
+                if (item === null || item === void 0 ? void 0 : item.text) {
+                    return Object.assign(Object.assign({}, item), { text: transformer(item.text) });
+                }
+                return item;
+            });
+        }
         /* eslint-enable no-not-accumulator-reassign/no-not-accumulator-reassign */
     }
     return content;
@@ -187,6 +195,11 @@ exports.config = {
             fields: ['title', 'additionalInfo'],
             transformer: common_1.yfmTransformer,
         },
+        {
+            fields: ['list'],
+            transformer: common_1.yfmTransformer,
+            parser: (0, common_1.createItemsParser)(['text']),
+        },
     ],
     [models_1.BlockType.MapBlock]: [
         ...exports.blockHeaderTransformer,
@@ -261,6 +274,11 @@ exports.config = {
             transformer: common_1.typografTransformer,
             parser: parseTitle,
         },
+        {
+            fields: ['list'],
+            transformer: common_1.yfmTransformer,
+            parser: (0, common_1.createItemsParser)(['text']),
+        },
     ],
     [models_1.BlockType.InfoBlock]: [
         {

package/build/esm/blocks/ContentLayout/ContentLayout.css

@@ -53,7 +53,4 @@ unpredictable css rules order in build */
   .pc-content-layout-block_background {
     padding: 32px;
   }
-  .pc-content-layout-block_background picture {
-    display: none;
-  }
 }

package/build/esm/blocks/ContentLayout/schema.d.ts

@@ -70,7 +70,9 @@ export declare const ContentLayoutBlock: {
                             };
                             contentType?: undefined;
                         })[];
-                    };
+                    }; /**
+                     * @deprecated Use params on top level instead
+                     */
                     text: {
                         type: string;
                         contentType: string;
@@ -108,12 +110,19 @@ export declare const ContentLayoutBlock: {
                     };
                     theme: {
                         type: string;
-                        enum: string[]; /**
-                         * @deprecated Use params on top level instead
-                         */
-                    }; /**
-                     * @deprecated Use params on top level instead
-                     */
+                        enum: string[];
+                    };
+                    list: {
+                        type: string;
+                        items: {
+                            type: string;
+                            properties: {
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        };
+                    };
                 };
             };
             fileContent: {

package/build/esm/blocks/Info/schema.d.ts

@@ -121,6 +121,17 @@ export declare const InfoBlock: {
                         type: string;
                         enum: string[];
                     };
+                    list: {
+                        type: string;
+                        items: {
+                            type: string;
+                            properties: {
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        };
+                    };
                 }>;
             };
             rightContent: {
@@ -194,6 +205,17 @@ export declare const InfoBlock: {
                         type: string;
                         enum: string[];
                     };
+                    list: {
+                        type: string;
+                        items: {
+                            type: string;
+                            properties: {
+                                when: {
+                                    type: string;
+                                };
+                            };
+                        };
+                    };
                 }>;
             };
             type: {};

package/build/esm/blocks/Map/schema.d.ts

@@ -426,6 +426,17 @@ export declare const MapBlock: {
                     };
                 };
             };
+            list: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
             animated: {
                 type: string;
             };

package/build/esm/blocks/Media/schema.d.ts

@@ -542,6 +542,17 @@ export declare const MediaBlockBaseProps: {
             };
         };
     };
+    list: {
+        type: string;
+        items: {
+            type: string;
+            properties: {
+                when: {
+                    type: string;
+                };
+            };
+        };
+    };
     animated: {
         type: string;
     };
@@ -1132,6 +1143,17 @@ export declare const MediaBlock: {
                     };
                 };
             };
+            list: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
             animated: {
                 type: string;
             };

package/build/esm/blocks/Questions/schema.d.ts

@@ -74,6 +74,17 @@ export declare const QuestionsBlock: {
                     };
                 };
             };
+            list: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
             anchor: {
                 type: string;
                 additionalProperties: boolean;

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

@@ -450,6 +450,17 @@ export declare const tabsItem: {
             type: string;
             enum: string[];
         } | undefined;
+        list?: {
+            type: string;
+            items: {
+                type: string;
+                properties: {
+                    when: {
+                        type: string;
+                    };
+                };
+            };
+        } | undefined;
     };
 };
 export declare const TabsBlock: {

package/build/esm/components/MediaBase/MediaBaseContent.js

@@ -4,9 +4,9 @@ import { block } from '../../utils';
 import './MediaBaseContent.css';
 const b = block('media-base-content');
 const MediaContent = (props) => {
-    const { title, description, button, links, buttons = [], additionalInfo, size = 'l' } = props;
+    const { title, description, button, links, buttons = [], additionalInfo, size = 'l', list, } = props;
     const allButtons = button ? [Object.assign(Object.assign({}, button), { size: 'xl' }), ...buttons] : buttons;
     return (React.createElement("div", { className: b() },
-        React.createElement(Content, { title: title, text: description, links: links, theme: "default", buttons: allButtons, additionalInfo: additionalInfo, size: size, colSizes: { all: 12, md: 12 } })));
+        React.createElement(Content, { title: title, text: description, links: links, theme: "default", buttons: allButtons, list: list, additionalInfo: additionalInfo, size: size, colSizes: { all: 12, md: 12 } })));
 };
 export default MediaContent;

package/build/esm/models/constructor-items/blocks.d.ts

@@ -154,14 +154,11 @@ export interface MediaBaseBlockProps extends Animatable, MediaContentProps {
     mediaOnly?: boolean;
     disableShadow?: boolean;
 }
-export interface MediaContentProps {
+export interface MediaContentProps extends Omit<ContentBlockProps, 'colSizes' | 'text' | 'title' | 'theme' | 'centered'> {
     title: string;
     description?: string;
-    additionalInfo?: string;
+    /** @deprecated  Use array of buttons from ContentBlockProps instead**/
     button?: ButtonProps;
-    links?: LinkProps[];
-    buttons?: ButtonProps[];
-    size?: ContentSize;
 }
 export interface MediaBlockProps extends MediaBaseBlockProps {
     media: ThemeSupporting<MediaProps>;
@@ -259,6 +256,11 @@ export interface ContentLayoutBlockProps extends ContentLayoutBlockParams {
     textContent: ContentBlockProps;
     fileContent?: FileLinkProps[];
 }
+export interface ContentItemProps {
+    title?: string;
+    text?: string;
+    icon: ThemedImage;
+}
 export interface ContentBlockProps {
     title?: TitleItemBaseProps | string;
     text?: string;
@@ -269,6 +271,7 @@ export interface ContentBlockProps {
     colSizes?: GridColumnSizesType;
     centered?: boolean;
     theme?: ContentTheme;
+    list?: ContentItemProps[];
 }
 export declare enum PCShareSocialNetwork {
     Vk = "vk",

package/build/esm/models/constructor-items/sub-blocks.d.ts

@@ -23,6 +23,10 @@ export declare enum SubBlockType {
      */
     Card = "card"
 }
+export declare enum IconPosition {
+    Top = "top",
+    Left = "left"
+}
 export declare const SubBlockTypes: SubBlockType[];
 export interface DividerProps {
     size?: DividerSize;
@@ -77,6 +81,7 @@ export interface BasicCardProps extends CardBaseProps, Omit<ContentBlockProps, '
     url: string;
     icon?: ImageProps;
     target?: string;
+    iconPosition?: IconPosition;
 }
 export interface BannerCardProps {
     title: string;

package/build/esm/models/constructor-items/sub-blocks.js

@@ -18,4 +18,9 @@ export var SubBlockType;
      */
     SubBlockType["Card"] = "card";
 })(SubBlockType || (SubBlockType = {}));
+export var IconPosition;
+(function (IconPosition) {
+    IconPosition["Top"] = "top";
+    IconPosition["Left"] = "left";
+})(IconPosition || (IconPosition = {}));
 export const SubBlockTypes = Object.values(SubBlockType);

package/build/esm/schema/constants.d.ts

@@ -26,6 +26,10 @@ export declare const cardSchemas: {
                 type: string;
                 enum: string[];
             };
+            iconPosition: {
+                type: string;
+                enum: string[];
+            };
             title: {
                 oneOf: ({
                     type: string;
@@ -86,6 +90,17 @@ export declare const cardSchemas: {
                     };
                 };
             };
+            list: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
             border: {
                 type: string;
                 enum: string[];
@@ -279,6 +294,17 @@ export declare const cardSchemas: {
                     };
                 };
             };
+            list: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
             border: {
                 type: string;
                 enum: string[];

package/build/esm/sub-blocks/BackgroundCard/schema.d.ts

@@ -105,6 +105,17 @@ export declare const BackgroundCard: {
                     };
                 };
             };
+            list: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
             border: {
                 type: string;
                 enum: string[];

package/build/esm/sub-blocks/BasicCard/BasicCard.css

@@ -10,4 +10,19 @@ unpredictable css rules order in build */
   height: 32px;
   object-fit: contain;
   display: block;
+}
+.pc-basic-card__icon_icon-position_left {
+  height: 22px;
+  width: 22px;
+  margin: 1px 12px 1px 0px;
+}
+.pc-basic-card__content {
+  display: flex;
+  flex-direction: column;
+}
+.pc-basic-card__content_icon-position_left {
+  flex-direction: row;
+}
+.pc-basic-card_content-layout_left.pc-basic-card_content-layout_left {
+  flex: 1 0 0;
 }

package/build/esm/sub-blocks/BasicCard/BasicCard.js

@@ -4,15 +4,17 @@ import { Content } from '../';
 import CardBase from '../../components/CardBase/CardBase';
 import Image from '../../components/Image/Image';
 import { getMediaImage } from '../../components/Media/Image/utils';
+import { IconPosition } from '../../models/constructor-items/sub-blocks';
 import { block } from '../../utils';
 import './BasicCard.css';
 const b = block('basic-card');
 const BasicCard = (props) => {
-    const { title, text, icon, additionalInfo, links, buttons } = props, cardParams = __rest(props, ["title", "text", "icon", "additionalInfo", "links", "buttons"]);
+    const { title, text, icon, additionalInfo, links, buttons, iconPosition = IconPosition.Top } = props, cardParams = __rest(props, ["title", "text", "icon", "additionalInfo", "links", "buttons", "iconPosition"]);
     const iconProps = icon && getMediaImage(icon);
     return (React.createElement(CardBase, Object.assign({ className: b() }, cardParams),
         React.createElement(CardBase.Content, null,
-            iconProps && React.createElement(Image, Object.assign({}, iconProps, { className: b('icon') })),
-            React.createElement(Content, { title: title, text: text, additionalInfo: additionalInfo, links: links, buttons: buttons, colSizes: { all: 12, md: 12 }, size: "s" }))));
+            React.createElement("div", { className: b('content', { ['icon-position']: iconPosition }) },
+                iconProps && (React.createElement(Image, Object.assign({}, iconProps, { className: b('icon', { ['icon-position']: iconPosition }) }))),
+                React.createElement(Content, { title: title, text: text, additionalInfo: additionalInfo, links: links, buttons: buttons, colSizes: { all: 12, md: 12 }, size: "s", className: b({ ['content-layout']: iconPosition }) })))));
 };
 export default BasicCard;

package/build/esm/sub-blocks/BasicCard/schema.d.ts

@@ -24,6 +24,10 @@ export declare const BasicCard: {
                 type: string;
                 enum: string[];
             };
+            iconPosition: {
+                type: string;
+                enum: string[];
+            };
             title: {
                 oneOf: ({
                     type: string;
@@ -84,6 +88,17 @@ export declare const BasicCard: {
                     };
                 };
             };
+            list: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
             border: {
                 type: string;
                 enum: string[];

package/build/esm/sub-blocks/BasicCard/schema.js

@@ -12,6 +12,9 @@ export const BasicCard = {
             }, icon: ImageProps, target: {
                 type: 'string',
                 enum: ['_blank', '_parent', '_top', '_self'],
+            }, iconPosition: {
+                type: 'string',
+                enum: ['top', 'left'],
             } }),
     },
 };

package/build/esm/sub-blocks/Content/Content.js

@@ -3,6 +3,7 @@ import { Button, Title, YFMWrapper } from '../../components';
 import LinkBlock from '../../components/Link/Link';
 import { Col } from '../../grid';
 import { block } from '../../utils';
+import ContentList from './ContentList/ContentList';
 import './Content.css';
 const b = block('content');
 function getTextSize(size) {
@@ -33,7 +34,7 @@ function getButtonSize(size) {
     }
 }
 const Content = (props) => {
-    const { title, text, additionalInfo, size = 'l', links, buttons, colSizes = { all: 12, sm: 8 }, centered, theme, className, } = props;
+    const { title, text, additionalInfo, size = 'l', links, buttons, colSizes = { all: 12, sm: 8 }, centered, theme, className, list, } = props;
     const titleProps = !title || typeof title === 'string'
         ? { text: title, textSize: getTextSize(size) }
         : title;
@@ -42,6 +43,7 @@ const Content = (props) => {
         title && React.createElement(Title, { className: b('title'), title: titleProps, colSizes: { all: 12 } }),
         text && (React.createElement("div", { className: b('text', { ['without-title']: !hasTitle }) },
             React.createElement(YFMWrapper, { content: text, modifiers: { constructor: true, [`constructor-size-${size}`]: true } }))),
+        (list === null || list === void 0 ? void 0 : list.length) ? React.createElement(ContentList, { list: list, size: size }) : null,
         additionalInfo && (React.createElement("div", { className: b('notice') },
             React.createElement(YFMWrapper, { content: additionalInfo, modifiers: {
                     constructor: true,

package/build/esm/sub-blocks/Content/ContentList/ContentList.css

@@ -0,0 +1,48 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-content-list_size_l {
+  margin-top: 24px;
+}
+.pc-content-list_size_l .pc-content-list__title {
+  font-size: var(--yc-text-header-1-font-size);
+  line-height: var(--yc-text-header-1-line-height);
+  margin: 0 0 8px;
+}
+.pc-content-list_size_l .pc-content-list__icon {
+  width: 22px;
+  height: 22px;
+  margin-top: 1px;
+  margin-bottom: 1px;
+  margin-right: 12px;
+}
+.pc-content-list_size_l .pc-content-list__item:not(:last-child) {
+  margin-bottom: 16px;
+}
+.pc-content-list_size_s {
+  margin-top: 16px;
+}
+.pc-content-list_size_s .pc-content-list__title {
+  font-size: var(--yc-text-subheader-3-font-size);
+  line-height: var(--yc-text-subheader-3-line-height);
+  margin: 0 0 calc(8px / 2);
+}
+.pc-content-list_size_s .pc-content-list__icon {
+  width: 20px;
+  height: 20px;
+  margin-top: 2px;
+  margin-bottom: 2px;
+  margin-right: 8px;
+}
+.pc-content-list_size_s .pc-content-list__text {
+  font-size: var(--yc-text-body-1-font-size);
+  line-height: var(--yc-text-body-1-line-height);
+}
+.pc-content-list_size_s .pc-content-list__item:not(:last-child) {
+  margin-bottom: 12px;
+}
+.pc-content-list__icon {
+  display: block;
+}
+.pc-content-list__item {
+  display: flex;
+}

package/build/esm/sub-blocks/Content/ContentList/ContentList.d.ts

@@ -0,0 +1,8 @@
+import { ContentItemProps, ContentSize } from '../../../models';
+import './ContentList.css';
+interface ContentListProps {
+    list: ContentItemProps[];
+    size: ContentSize;
+}
+declare const ContentList: ({ list, size }: ContentListProps) => JSX.Element;
+export default ContentList;

package/build/esm/sub-blocks/Content/ContentList/ContentList.js

@@ -0,0 +1,23 @@
+import React, { useContext } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { YFMWrapper } from '../../../components';
+import Image from '../../../components/Image/Image';
+import { getMediaImage } from '../../../components/Media/Image/utils';
+import { ThemeValueContext } from '../../../context/theme/ThemeValueContext';
+import { block, getThemedValue } from '../../../utils';
+import './ContentList.css';
+const b = block('content-list');
+const ContentList = ({ list, size }) => {
+    const { themeValue: theme } = useContext(ThemeValueContext);
+    return (React.createElement("div", { className: b({ size }) }, list === null || list === void 0 ? void 0 : list.map((item) => {
+        const { icon, title, text } = item;
+        const iconThemed = getThemedValue(icon, theme);
+        const iconData = getMediaImage(iconThemed);
+        return (React.createElement("div", { className: b('item'), key: uuidv4() },
+            React.createElement(Image, Object.assign({}, iconData, { className: b('icon') })),
+            React.createElement("div", null,
+                title && React.createElement("h4", { className: b('title') }, title),
+                text && (React.createElement(YFMWrapper, { className: b('text'), content: text, modifiers: { constructor: true } })))));
+    })));
+};
+export default ContentList;

package/build/esm/sub-blocks/Content/schema.d.ts

@@ -1,3 +1,41 @@
+export declare const ContentItem: {
+    additionalProperties: boolean;
+    required: string[];
+    properties: {
+        title: {
+            type: string;
+            contentType: string;
+        };
+        text: {
+            type: string;
+            contentType: string;
+        };
+        icon: {
+            oneOf: (({
+                oneOf: ({
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                } | {
+                    type: string;
+                    pattern: string;
+                    optionName: string;
+                })[];
+            } & {
+                optionName: string;
+            }) | {
+                type: string;
+                additionalProperties: boolean;
+                required: import("../..").Theme[];
+                properties: {};
+                optionName: string;
+            })[];
+        };
+    };
+};
 export declare const ContentBase: {
     title: {
         oneOf: ({
@@ -67,6 +105,17 @@ export declare const ContentBase: {
         type: string;
         enum: string[];
     };
+    list: {
+        type: string;
+        items: {
+            type: string;
+            properties: {
+                when: {
+                    type: string;
+                };
+            };
+        };
+    };
 };
 export declare const ContentBlock: {
     content: {
@@ -144,6 +193,17 @@ export declare const ContentBlock: {
                 type: string;
                 enum: string[];
             };
+            list: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
         };
     };
 };

package/build/esm/sub-blocks/Content/schema.js

@@ -1,5 +1,21 @@
-import { ButtonBlock, LinkProps, TitleProps, containerSizesArray, contentSizes, contentThemes, sizeNumber, } from '../../schema/validators/common';
+import { ImageProps } from '../../components/Image/schema';
+import { ButtonBlock, LinkProps, TitleProps, containerSizesArray, contentSizes, contentThemes, sizeNumber, withTheme, } from '../../schema/validators/common';
 import { filteredArray } from '../../schema/validators/utils';
+export const ContentItem = {
+    additionalProperties: false,
+    required: ['icon'],
+    properties: {
+        title: {
+            type: 'string',
+            contentType: 'text',
+        },
+        text: {
+            type: 'string',
+            contentType: 'yfm',
+        },
+        icon: withTheme(ImageProps),
+    },
+};
 export const ContentBase = {
     title: {
         oneOf: [
@@ -30,6 +46,7 @@ export const ContentBase = {
         type: 'string',
         enum: contentThemes,
     },
+    list: filteredArray(ContentItem),
 };
 export const ContentBlock = {
     content: {