@gravity-ui/page-constructor 4.0.0-beta.0 → 4.0.1

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 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 { useTheme } from '../../../context/theme';
+import { block, getThemedValue } from '../../../utils';
+import './ContentList.css';
+const b = block('content-list');
+const ContentList = ({ list, size }) => {
+    const theme = useTheme();
+    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,6 +1,49 @@
+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: ({
+            type: string;
+            contentType: string;
+            optionName: string;
+        } | {
+            optionName: string;
             type: string;
             additionalProperties: boolean;
             required: string[];
@@ -20,14 +63,13 @@ export declare const ContentBase: {
                     type: string;
                 };
             };
-        } | {
-            type: string;
-            contentType: string;
+            contentType?: undefined;
         })[];
     };
     text: {
         type: string;
         contentType: string;
+        inputType: string;
     };
     additionalInfo: {
         type: string;
@@ -63,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: {
@@ -74,6 +127,11 @@ export declare const ContentBlock: {
             };
             title: {
                 oneOf: ({
+                    type: string;
+                    contentType: string;
+                    optionName: string;
+                } | {
+                    optionName: string;
                     type: string;
                     additionalProperties: boolean;
                     required: string[];
@@ -93,14 +151,13 @@ export declare const ContentBlock: {
                             type: string;
                         };
                     };
-                } | {
-                    type: string;
-                    contentType: string;
+                    contentType?: undefined;
                 })[];
             };
             text: {
                 type: string;
                 contentType: string;
+                inputType: string;
             };
             additionalInfo: {
                 type: string;
@@ -136,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,12 +1,36 @@
-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: [{ type: 'string', contentType: 'text' }, TitleProps],
+        oneOf: [
+            {
+                type: 'string',
+                contentType: 'text',
+                optionName: 'text',
+            },
+            Object.assign(Object.assign({}, TitleProps), { optionName: 'options' }),
+        ],
     },
     text: {
         type: 'string',
         contentType: 'yfm',
+        inputType: 'textarea',
     },
     additionalInfo: {
         type: 'string',
@@ -22,6 +46,7 @@ export const ContentBase = {
         type: 'string',
         enum: contentThemes,
     },
+    list: filteredArray(ContentItem),
 };
 export const ContentBlock = {
     content: {

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

@@ -23,5 +23,5 @@
   padding-top: 128px;
 }
 .pc-divider-block_border {
-  border-top: 1px solid var(--yc-color-line-generic);
+  border-top: 1px solid var(--g-color-line-generic);
 }

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

@@ -9,7 +9,9 @@ export declare const Divider: {
                 enum: (string | number)[];
             };
             type: {};
-            when: {};
+            when: {
+                type: string;
+            };
         };
     };
 };

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

@@ -8,8 +8,8 @@ unpredictable css rules order in build */
   padding-left: 10px;
 }
 .pc-hubspot-form .hs-form-field > label {
-  color: var(--yc-color-text-primary);
-  font-size: var(--yc-text-body-2-font-size);
+  color: var(--g-color-text-primary);
+  font-size: var(--g-text-body-2-font-size);
   display: flex;
   width: 200px;
   max-width: 100%;
@@ -42,11 +42,11 @@ unpredictable css rules order in build */
   font-size: 15px;
   line-height: 16px;
   font-weight: normal;
-  font-family: var(--yc-text-body-font-family);
-  color: var(--yc-color-text-primary);
+  font-family: var(--g-text-body-font-family);
+  color: var(--g-color-text-primary);
   background-color: transparent;
-  border: 1px solid var(--yc-color-line-generic);
-  border-radius: var(--yc-border-radius-l);
+  border: 1px solid var(--g-color-line-generic);
+  border-radius: var(--g-border-radius-l);
 }
 .pc-hubspot-form .hs-form-field .input input[type=text]:hover,
 .pc-hubspot-form .hs-form-field .input input[type=number]:hover,
@@ -54,7 +54,7 @@ unpredictable css rules order in build */
 .pc-hubspot-form .hs-form-field .input input[type=email]:hover,
 .pc-hubspot-form .hs-form-field .input textarea:hover,
 .pc-hubspot-form .hs-form-field .input select:hover {
-  border: 1px solid var(--yc-color-line-generic-hover);
+  border: 1px solid var(--g-color-line-generic-hover);
 }
 .pc-hubspot-form .hs-form-field .input input[type=text]::placeholder,
 .pc-hubspot-form .hs-form-field .input input[type=number]::placeholder,
@@ -62,7 +62,7 @@ unpredictable css rules order in build */
 .pc-hubspot-form .hs-form-field .input input[type=email]::placeholder,
 .pc-hubspot-form .hs-form-field .input textarea::placeholder,
 .pc-hubspot-form .hs-form-field .input select::placeholder {
-  color: var(--yc-color-text-hint);
+  color: var(--g-color-text-hint);
 }
 .pc-hubspot-form .hs-form-field .input input[type=text]:focus,
 .pc-hubspot-form .hs-form-field .input input[type=number]:focus,
@@ -77,7 +77,7 @@ unpredictable css rules order in build */
 .pc-hubspot-form .hs-form-field .input input[type=tel]:focus,
 .pc-hubspot-form .hs-form-field .input input[type=email]:focus,
 .pc-hubspot-form .hs-form-field .input textarea:focus {
-  border: 2px solid var(--yc-color-base-special);
+  border: 2px solid var(--g-color-base-brand);
   outline: none;
 }
 .pc-hubspot-form .hs-form-field .input textarea {
@@ -97,7 +97,7 @@ unpredictable css rules order in build */
   padding-right: 30px;
 }
 .pc-hubspot-form .hs-form-field .input select:focus {
-  border: 1px solid var(--yc-color-line-generic-active);
+  border: 1px solid var(--g-color-line-generic-active);
 }
 .pc-hubspot-form .hs-form-field:not(.hs-fieldtype-textarea):not(.hs-fieldtype-booleancheckbox) {
   display: flex;
@@ -129,8 +129,8 @@ unpredictable css rules order in build */
 .pc-hubspot-form .hs-form-field .hs-form-checkbox-display span:not(.hs-form-required),
 .pc-hubspot-form .hs-form-field .hs-form-booleancheckbox-display span:not(.hs-form-required),
 .pc-hubspot-form .hs-form-field .hs-form-radio-display span:not(.hs-form-required) {
-  color: var(--yc-color-text-primary);
-  font-size: var(--yc-text-body-2-font-size);
+  color: var(--g-color-text-primary);
+  font-size: var(--g-text-body-2-font-size);
   line-height: 16px;
   padding-left: 7px;
   margin: 0;
@@ -155,7 +155,7 @@ unpredictable css rules order in build */
   width: 17px;
   background-color: transparent;
   border-radius: 4px;
-  border: 1px solid var(--yc-color-line-generic-accent);
+  border: 1px solid var(--g-color-line-generic-accent);
   transition: background-color 0.1s linear;
 }
 .pc-hubspot-form .hs-form-field .hs-form-booleancheckbox-display span:not(.hs-form-required):after,
@@ -188,7 +188,7 @@ unpredictable css rules order in build */
   width: 17px;
   background-color: transparent;
   border-radius: 50%;
-  border: 1px solid var(--yc-color-line-generic-accent);
+  border: 1px solid var(--g-color-line-generic-accent);
   transition: background-color 0.1s linear;
 }
 .pc-hubspot-form .hs-form-field .hs-form-radio-display span:after {
@@ -217,18 +217,18 @@ unpredictable css rules order in build */
   padding-left: 10px;
 }
 .pc-hubspot-form .hs-richtext p {
-  color: var(--yc-color-text-primary);
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
-  font-weight: var(--yc-text-body-font-weight);
+  color: var(--g-color-text-primary);
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+  font-weight: var(--g-text-body-font-weight);
   margin: 0 0 20px;
 }
 .pc-hubspot-form .hs_error_rollup {
   padding-left: 10px;
-  font-size: var(--yc-text-body-1-font-size);
-  line-height: var(--yc-text-body-1-line-height);
-  font-weight: var(--yc-text-body-font-weight);
-  color: var(--yc-color-text-danger);
+  font-size: var(--g-text-body-1-font-size);
+  line-height: var(--g-text-body-1-line-height);
+  font-weight: var(--g-text-body-font-weight);
+  color: var(--g-color-text-danger);
 }
 .pc-hubspot-form .inputs-list {
   list-style: none;
@@ -236,7 +236,7 @@ unpredictable css rules order in build */
   margin: 0;
 }
 .pc-hubspot-form .hs-form-required {
-  color: var(--yc-color-text-hint);
+  color: var(--g-color-text-hint);
   width: 10px;
   order: 1;
   position: absolute;
@@ -246,8 +246,8 @@ unpredictable css rules order in build */
   order: 3;
   padding: 0;
   margin: 3px 0 0;
-  font-size: var(--yc-text-body-1-font-size);
-  color: var(--yc-color-text-complementary);
+  font-size: var(--g-text-body-1-font-size);
+  color: var(--g-color-text-complementary);
 }
 .pc-hubspot-form .hs-error-msgs {
   width: 100%;
@@ -255,10 +255,10 @@ unpredictable css rules order in build */
   order: 4;
 }
 .pc-hubspot-form .hs-error-msg {
-  font-size: var(--yc-text-body-1-font-size);
-  line-height: var(--yc-text-body-1-line-height);
-  font-weight: var(--yc-text-body-font-weight);
-  color: var(--yc-color-text-danger);
+  font-size: var(--g-text-body-1-font-size);
+  line-height: var(--g-text-body-1-line-height);
+  font-weight: var(--g-text-body-font-weight);
+  color: var(--g-color-text-danger);
   display: block;
 }
 .pc-hubspot-form .actions {
@@ -268,7 +268,7 @@ unpredictable css rules order in build */
 .pc-hubspot-form .hs-button.primary {
   margin: 0;
   padding: 0;
-  font-family: var(--yc-text-body-font-family);
+  font-family: var(--g-font-family-sans);
   font-size: inherit;
   font-weight: 400;
   color: inherit;
@@ -282,11 +282,11 @@ unpredictable css rules order in build */
   box-sizing: border-box;
   height: 44px;
   padding: 0 20px;
-  border-radius: var(--yc-border-radius-xl);
-  background-color: var(--yc-color-base-special);
-  color: var(--yc-my-color-brand-text-contrast);
+  border-radius: var(--g-border-radius-xl);
+  background-color: var(--g-color-base-brand);
+  color: var(--g-color-text-brand-contrast);
   line-height: 44px;
-  font-size: var(--yc-text-body-2-font-size);
+  font-size: var(--g-text-body-2-font-size);
   font-weight: normal;
   user-select: none;
   text-align: center;
@@ -294,16 +294,16 @@ unpredictable css rules order in build */
   appearance: none;
 }
 .pc-hubspot-form .hs-button.primary:hover {
-  background-color: var(--yc-color-base-special-hover);
+  background-color: var(--g-color-base-brand-hover);
 }
 .pc-hubspot-form .grecaptcha-badge {
   box-shadow: none !important;
-  border: 1px solid var(--yc-color-line-generic);
+  border: 1px solid var(--g-color-line-generic);
 }
 .pc-hubspot-form .hs_recaptcha div {
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
-  font-weight: var(--yc-text-body-font-weight);
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+  font-weight: var(--g-text-body-font-weight);
 }
 .pc-hubspot-form_mobile .hs-richtext,
 .pc-hubspot-form_mobile .hs-form-field,

package/build/esm/sub-blocks/HubspotForm/index.js

@@ -1,6 +1,6 @@
 import React, { forwardRef, useContext, useMemo } from 'react';
 import { MobileContext } from '../../context/mobileContext';
-import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
+import { useTheme } from '../../context/theme';
 import { useAnalytics, useHandleHubspotEvents } from '../../hooks';
 import { useMetrika } from '../../hooks/useMetrika';
 import { DefaultEventNames } from '../../models';
@@ -13,8 +13,8 @@ const HubspotForm = forwardRef((props, ref) => {
     // hubspotEvents, // TODO: decide how to handle them
     analyticsEvents, onBeforeSubmit, onSubmit, onBeforeLoad, onLoad, createDOMElement, onSubmitError, } = props;
     const handleMetrika = useMetrika();
+    const themeValue = useTheme();
     const handleAnalytics = useAnalytics(DefaultEventNames.HubspotFormSubmit);
-    const { themeValue } = useContext(ThemeValueContext);
     const isMobileValue = useContext(MobileContext);
     const theme = themeProp !== null && themeProp !== void 0 ? themeProp : themeValue;
     const mobile = isMobileProp !== null && isMobileProp !== void 0 ? isMobileProp : isMobileValue;

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

@@ -6,7 +6,7 @@ unpredictable css rules order in build */
   border-radius: var(--pc-border-radius);
 }
 .pc-layout-item__media_border {
-  border: 1px solid var(--yc-color-line-generic);
+  border: 1px solid var(--g-color-line-generic);
 }
 .pc-layout-item__meta-info {
   margin: 16px 0 -8px 0;

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

@@ -8,7 +8,8 @@ export declare const LayoutItem: {
                 type: string;
             };
             image: {
-                anyOf: ({
+                oneOf: ({
+                    optionName: string;
                     oneOf: ({
                         type: string;
                         properties: {
@@ -19,7 +20,10 @@ export declare const LayoutItem: {
                     } | {
                         type: string;
                         pattern: string;
+                        optionName: string;
                     })[];
+                    type?: undefined;
+                    items?: undefined;
                 } | {
                     type: string;
                     items: {
@@ -33,8 +37,10 @@ export declare const LayoutItem: {
                         } | {
                             type: string;
                             pattern: string;
+                            optionName: string;
                         })[];
                     };
+                    optionName: string;
                 })[];
             };
             video: {
@@ -49,7 +55,8 @@ export declare const LayoutItem: {
                         };
                     };
                     loop: {
-                        anyOf: ({
+                        oneOf: ({
+                            optionName: string;
                             type: string;
                             additionalProperties: boolean;
                             required: string[];
@@ -63,6 +70,7 @@ export declare const LayoutItem: {
                             };
                         } | {
                             type: string;
+                            optionName: string;
                         })[];
                     };
                     type: {
@@ -72,13 +80,13 @@ export declare const LayoutItem: {
                     muted: {
                         type: string;
                     };
-                    playing: {
+                    autoplay: {
                         type: string;
                     };
                     elapsedTime: {
                         type: string;
                     };
-                    playIcon: {
+                    playButton: {
                         type: string;
                         additionalProperties: boolean;
                         properties: {
@@ -116,6 +124,10 @@ export declare const LayoutItem: {
             };
             dataLens: {
                 oneOf: ({
+                    type: string;
+                    optionName: string;
+                } | {
+                    optionName: string;
                     type: string;
                     additionalProperties: boolean;
                     required: string[];
@@ -128,17 +140,98 @@ export declare const LayoutItem: {
                             enum: string[];
                         };
                     };
-                } | {
-                    type: string;
                 })[];
             };
             fullscreen: {
                 type: string;
             };
+            analyticsEvents: {
+                anyOf: ({
+                    type: string;
+                    additionalProperties: {
+                        type: string;
+                    };
+                    required: string[];
+                    properties: {
+                        name: {
+                            type: string;
+                        };
+                        type: {
+                            type: string;
+                        };
+                        counters: {
+                            type: string;
+                            additionalProperties: boolean;
+                            required: never[];
+                            properties: {
+                                include: {
+                                    type: string;
+                                    items: {
+                                        type: string;
+                                    };
+                                };
+                                exclude: {
+                                    type: string;
+                                    items: {
+                                        type: string;
+                                    };
+                                };
+                            };
+                        };
+                        context: {
+                            type: string;
+                        };
+                    };
+                } | {
+                    type: string;
+                    items: {
+                        type: string;
+                        additionalProperties: {
+                            type: string;
+                        };
+                        required: string[];
+                        properties: {
+                            name: {
+                                type: string;
+                            };
+                            type: {
+                                type: string;
+                            };
+                            counters: {
+                                type: string;
+                                additionalProperties: boolean;
+                                required: never[];
+                                properties: {
+                                    include: {
+                                        type: string;
+                                        items: {
+                                            type: string;
+                                        };
+                                    };
+                                    exclude: {
+                                        type: string;
+                                        items: {
+                                            type: string;
+                                        };
+                                    };
+                                };
+                            };
+                            context: {
+                                type: string;
+                            };
+                        };
+                    };
+                })[];
+            };
         };
         content: Partial<{
             title: {
                 oneOf: ({
+                    type: string;
+                    contentType: string;
+                    optionName: string;
+                } | {
+                    optionName: string;
                     type: string;
                     additionalProperties: boolean;
                     required: string[];
@@ -158,14 +251,13 @@ export declare const LayoutItem: {
                             type: string;
                         };
                     };
-                } | {
-                    type: string;
-                    contentType: string;
+                    contentType?: undefined;
                 })[];
             };
             text: {
                 type: string;
                 contentType: string;
+                inputType: string;
             };
             additionalInfo: {
                 type: string;
@@ -201,6 +293,17 @@ export declare const LayoutItem: {
                 type: string;
                 enum: string[];
             };
+            list: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
         }>;
         metaInfo: {
             type: string;
@@ -216,6 +319,8 @@ export declare const LayoutItem: {
             type: string;
         };
         type: {};
-        when: {};
+        when: {
+            type: string;
+        };
     };
 };