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

package/build/cjs/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(--g-text-header-1-font-size);
+  line-height: var(--g-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(--g-text-subheader-3-font-size);
+  line-height: var(--g-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(--g-text-body-1-font-size);
+  line-height: var(--g-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/cjs/sub-blocks/Content/ContentList/ContentList.d.ts

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

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

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const uuid_1 = require("uuid");
+const components_1 = require("../../../components");
+const Image_1 = tslib_1.__importDefault(require("../../../components/Image/Image"));
+const utils_1 = require("../../../components/Media/Image/utils");
+const theme_1 = require("../../../context/theme");
+const utils_2 = require("../../../utils");
+const b = (0, utils_2.block)('content-list');
+const ContentList = ({ list, size }) => {
+    const theme = (0, theme_1.useTheme)();
+    return (react_1.default.createElement("div", { className: b({ size }) }, list === null || list === void 0 ? void 0 : list.map((item) => {
+        const { icon, title, text } = item;
+        const iconThemed = (0, utils_2.getThemedValue)(icon, theme);
+        const iconData = (0, utils_1.getMediaImage)(iconThemed);
+        return (react_1.default.createElement("div", { className: b('item'), key: (0, uuid_1.v4)() },
+            react_1.default.createElement(Image_1.default, Object.assign({}, iconData, { className: b('icon') })),
+            react_1.default.createElement("div", null,
+                title && react_1.default.createElement("h4", { className: b('title') }, title),
+                text && (react_1.default.createElement(components_1.YFMWrapper, { className: b('text'), content: text, modifiers: { constructor: true } })))));
+    })));
+};
+exports.default = ContentList;

package/build/cjs/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/cjs/sub-blocks/Content/schema.js

@@ -1,15 +1,39 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ContentBlock = exports.ContentBase = void 0;
+exports.ContentBlock = exports.ContentBase = exports.ContentItem = void 0;
+const schema_1 = require("../../components/Image/schema");
 const common_1 = require("../../schema/validators/common");
 const utils_1 = require("../../schema/validators/utils");
+exports.ContentItem = {
+    additionalProperties: false,
+    required: ['icon'],
+    properties: {
+        title: {
+            type: 'string',
+            contentType: 'text',
+        },
+        text: {
+            type: 'string',
+            contentType: 'yfm',
+        },
+        icon: (0, common_1.withTheme)(schema_1.ImageProps),
+    },
+};
 exports.ContentBase = {
     title: {
-        oneOf: [{ type: 'string', contentType: 'text' }, common_1.TitleProps],
+        oneOf: [
+            {
+                type: 'string',
+                contentType: 'text',
+                optionName: 'text',
+            },
+            Object.assign(Object.assign({}, common_1.TitleProps), { optionName: 'options' }),
+        ],
     },
     text: {
         type: 'string',
         contentType: 'yfm',
+        inputType: 'textarea',
     },
     additionalInfo: {
         type: 'string',
@@ -25,6 +49,7 @@ exports.ContentBase = {
         type: 'string',
         enum: common_1.contentThemes,
     },
+    list: (0, utils_1.filteredArray)(exports.ContentItem),
 };
 exports.ContentBlock = {
     content: {

package/build/cjs/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/cjs/sub-blocks/Divider/schema.d.ts

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

package/build/cjs/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/cjs/sub-blocks/HubspotForm/index.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const mobileContext_1 = require("../../context/mobileContext");
-const ThemeValueContext_1 = require("../../context/theme/ThemeValueContext");
+const theme_1 = require("../../context/theme");
 const hooks_1 = require("../../hooks");
 const useMetrika_1 = require("../../hooks/useMetrika");
 const models_1 = require("../../models");
@@ -15,8 +15,8 @@ const HubspotForm = (0, react_1.forwardRef)((props, ref) => {
     // hubspotEvents, // TODO: decide how to handle them
     analyticsEvents, onBeforeSubmit, onSubmit, onBeforeLoad, onLoad, createDOMElement, onSubmitError, } = props;
     const handleMetrika = (0, useMetrika_1.useMetrika)();
+    const themeValue = (0, theme_1.useTheme)();
     const handleAnalytics = (0, hooks_1.useAnalytics)(models_1.DefaultEventNames.HubspotFormSubmit);
-    const { themeValue } = (0, react_1.useContext)(ThemeValueContext_1.ThemeValueContext);
     const isMobileValue = (0, react_1.useContext)(mobileContext_1.MobileContext);
     const theme = themeProp !== null && themeProp !== void 0 ? themeProp : themeValue;
     const mobile = isMobileProp !== null && isMobileProp !== void 0 ? isMobileProp : isMobileValue;

package/build/cjs/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;