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

package/build/esm/schema/validators/common.js

@@ -1,4 +1,4 @@
-import { ImageProps, urlPattern } from '../../components/Image/schema';
+import { ImageProps, imageUrlPattern } from '../../components/Image/schema';
 import { Theme } from '../../models';
 import { AnalyticsEventSchema } from './event';
 import { pixelEvents } from './pixel';
@@ -18,7 +18,9 @@ export const sizeNumber = { type: 'number', maximum: 12, minimum: 1 };
 export const contentThemes = ['default', 'dark', 'light'];
 export const BaseProps = {
     type: {},
-    when: {},
+    when: {
+        type: 'string',
+    },
 };
 export const containerSizesObject = {
     type: 'object',
@@ -26,14 +28,16 @@ export const containerSizesObject = {
     properties: containerSizesArray.reduce((acc, size) => (Object.assign(Object.assign({}, acc), { [size]: sizeNumber })), {}),
 };
 export const sliderSizesObject = {
-    anyOf: [
+    oneOf: [
         {
             type: 'object',
             additionalProperties: false,
             properties: sliderSizesArray.reduce((acc, size) => (Object.assign(Object.assign({}, acc), { [size]: sizeNumber })), {}),
+            optionName: 'custom',
         },
         {
             type: 'number',
+            optionName: 'constant',
         },
     ],
 };
@@ -63,7 +67,7 @@ export const LoopProps = {
         },
     },
 };
-export const PlayIconProps = {
+export const PlayButtonProps = {
     type: 'object',
     additionalProperties: false,
     properties: {
@@ -93,10 +97,11 @@ export const VideoProps = {
             },
         },
         loop: {
-            anyOf: [
-                LoopProps,
+            oneOf: [
+                Object.assign(Object.assign({}, LoopProps), { optionName: 'options' }),
                 {
                     type: 'boolean',
+                    optionName: 'enabled',
                 },
             ],
         },
@@ -107,13 +112,13 @@ export const VideoProps = {
         muted: {
             type: 'boolean',
         },
-        playing: {
+        autoplay: {
             type: 'boolean',
         },
         elapsedTime: {
             type: 'number',
         },
-        playIcon: PlayIconProps,
+        playButton: PlayButtonProps,
         controls: {
             type: 'string',
             enum: videoControlsTypes,
@@ -140,7 +145,13 @@ export const DataLensObjectProps = {
     },
 };
 export const DataLensProps = {
-    oneOf: [{ type: 'string' }, DataLensObjectProps],
+    oneOf: [
+        {
+            type: 'string',
+            optionName: 'id',
+        },
+        Object.assign(Object.assign({}, DataLensObjectProps), { optionName: 'options' }),
+    ],
 };
 export const BackgroundProps = {
     additionalProperties: false,
@@ -178,7 +189,14 @@ export const LinkProps = {
             type: 'string',
             enum: ['_blank', '_parent', '_top', '_self'],
         }, analyticsEvents: {
-            anyOf: [AnalyticsEventSchema, { type: 'array', items: AnalyticsEventSchema }],
+            oneOf: [
+                Object.assign(Object.assign({}, AnalyticsEventSchema), { optionName: 'single' }),
+                {
+                    type: 'array',
+                    items: AnalyticsEventSchema,
+                    optionName: 'list',
+                },
+            ],
         } }),
 };
 export const FileLinkProps = {
@@ -221,7 +239,7 @@ export const authorItem = {
         },
         avatar: {
             type: 'string',
-            pattern: urlPattern,
+            pattern: imageUrlPattern,
         },
         description: {
             type: 'string',
@@ -287,9 +305,10 @@ export const ButtonProps = {
         ],
     },
     img: {
-        anyOf: [
+        oneOf: [
             {
                 type: 'string',
+                optionName: 'url',
             },
             {
                 type: 'object',
@@ -308,6 +327,7 @@ export const ButtonProps = {
                         contentType: 'text',
                     },
                 },
+                optionName: 'options',
             },
         ],
     },
@@ -315,9 +335,9 @@ export const ButtonProps = {
      * @deprecated Metrika will be deleted
      */
     metrikaGoals: {
-        anyOf: [
-            { type: 'string' },
-            { type: 'array', items: { type: 'string' } },
+        oneOf: [
+            { type: 'string', optionName: 'single' },
+            { type: 'array', items: { type: 'string' }, optionName: 'list' },
             {
                 type: 'array',
                 items: {
@@ -333,6 +353,7 @@ export const ButtonProps = {
                         },
                     },
                 },
+                optionName: 'list-extended',
             },
         ],
     },
@@ -341,7 +362,10 @@ export const ButtonProps = {
      */
     pixelEvents,
     analyticsEvents: {
-        anyOf: [AnalyticsEventSchema, { type: 'array', items: AnalyticsEventSchema }],
+        oneOf: [
+            Object.assign(Object.assign({}, AnalyticsEventSchema), { optionName: 'single' }),
+            { type: 'array', items: AnalyticsEventSchema, optionName: 'list' },
+        ],
     },
     target: {
         type: 'string',
@@ -361,12 +385,13 @@ export const MenuProps = {
 export function withTheme(value) {
     return {
         oneOf: [
-            value,
+            Object.assign(Object.assign({}, value), { optionName: 'no theme' }),
             {
                 type: 'object',
                 additionalProperties: false,
                 required: [Theme.Light],
                 properties: Object.values(Theme).reduce((result, themeName) => (Object.assign(Object.assign({}, result), { [themeName]: value })), {}),
+                optionName: 'themes',
             },
         ],
     };
@@ -437,7 +462,10 @@ export const MediaProps = {
         type: 'string',
     },
     image: {
-        anyOf: [ImageProps, { type: 'array', items: ImageProps }],
+        oneOf: [
+            Object.assign(Object.assign({}, ImageProps), { optionName: 'single' }),
+            { type: 'array', items: ImageProps, optionName: 'list' },
+        ],
     },
     video: VideoProps,
     youtube: {
@@ -456,6 +484,9 @@ export const MediaProps = {
     fullscreen: {
         type: 'boolean',
     },
+    analyticsEvents: {
+        anyOf: [AnalyticsEventSchema, { type: 'array', items: AnalyticsEventSchema }],
+    },
 };
 export const YMapMarkerLabel = {
     type: 'object',
@@ -513,10 +544,17 @@ export const CardBase = {
 };
 export const BlockHeaderProps = {
     title: {
-        oneOf: [{ type: 'string' }, TitleProps],
+        oneOf: [
+            {
+                type: 'string',
+                optionName: 'text',
+            },
+            Object.assign(Object.assign({}, TitleProps), { optionName: 'options' }),
+        ],
     },
     description: {
         type: 'string',
         contentType: 'yfm',
+        inputType: 'textarea',
     },
 };

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

@@ -4,10 +4,10 @@ unpredictable css rules order in build */
   position: relative;
 }
 .pc-background-card_theme_light {
-  background-color: var(--yc-color-promo-base-silver);
+  background-color: var(--pc-color-base-silver);
 }
 .pc-background-card_theme_dark {
-  background-color: var(--yc-color-promo-base-asphalt);
+  background-color: var(--pc-color-base-asphalt);
 }
 .pc-background-card_padding_s {
   padding-bottom: 80px;
@@ -39,8 +39,8 @@ unpredictable css rules order in build */
 }
 
 a.pc-background-card_theme_light {
-  background-color: var(--yc-color-promo-base-silver);
+  background-color: var(--pc-color-base-silver);
 }
 a.pc-background-card_theme_dark {
-  background-color: var(--yc-color-promo-base-asphalt);
+  background-color: var(--pc-color-base-asphalt);
 }

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

@@ -1,13 +1,13 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { BackgroundImage, CardBase } from '../../components/';
-import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
+import { useTheme } from '../../context/theme';
 import { block, getThemedValue } from '../../utils';
 import Content from '../Content/Content';
 import './BackgroundCard.css';
 const b = block('background-card');
 const BackgroundCard = (props) => {
     const { url, title, text, border, background, paddingBottom, backgroundColor, additionalInfo, theme: cardTheme = 'default', links, buttons, } = props;
-    const { themeValue: theme } = useContext(ThemeValueContext);
+    const theme = useTheme();
     const hasBackgroundColor = backgroundColor || cardTheme !== 'default';
     const link = hasBackgroundColor || border === 'line' ? undefined : url;
     const borderType = hasBackgroundColor ? 'none' : border;

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

@@ -7,7 +7,7 @@ export declare const BackgroundCard: {
                 type: string;
             };
             background: {
-                oneOf: ({
+                oneOf: (({
                     type: string;
                     additionalProperties: boolean;
                     required: string[];
@@ -24,11 +24,14 @@ export declare const BackgroundCard: {
                             type: string;
                         };
                     };
-                } | {
+                } & {
+                    optionName: string;
+                }) | {
                     type: string;
                     additionalProperties: boolean;
                     required: import("../..").Theme[];
                     properties: {};
+                    optionName: string;
                 })[];
             };
             backgroundColor: {
@@ -40,6 +43,11 @@ export declare const BackgroundCard: {
             };
             title: {
                 oneOf: ({
+                    type: string;
+                    contentType: string;
+                    optionName: string;
+                } | {
+                    optionName: string;
                     type: string;
                     additionalProperties: boolean;
                     required: string[];
@@ -59,14 +67,13 @@ export declare const BackgroundCard: {
                             type: string;
                         };
                     };
-                } | {
-                    type: string;
-                    contentType: string;
+                    contentType?: undefined;
                 })[];
             };
             text: {
                 type: string;
                 contentType: string;
+                inputType: string;
             };
             theme: {
                 type: string;
@@ -98,12 +105,25 @@ export declare const BackgroundCard: {
                     };
                 };
             };
+            list: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
             border: {
                 type: string;
                 enum: string[];
             };
             type: {};
-            when: {};
+            when: {
+                type: string;
+            };
         };
     };
 };

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

@@ -6,28 +6,28 @@
 unpredictable css rules order in build */
 .pc-banner-card_theme_dark.pc-banner-card_theme_dark .pc-banner-card__title,
 .pc-banner-card_theme_dark.pc-banner-card_theme_dark .pc-banner-card__subtitle {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
 }
 .pc-banner-card_theme_dark.pc-banner-card_theme_dark .pc-banner-card__title p,
 .pc-banner-card_theme_dark.pc-banner-card_theme_dark .pc-banner-card__subtitle p {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
 }
 
 .pc-banner-card__title {
-  font-size: var(--yc-text-display-2-font-size);
-  line-height: var(--yc-text-display-2-line-height);
+  font-size: var(--g-text-display-2-font-size);
+  line-height: var(--g-text-display-2-line-height);
   color: var(--pc-text-header-color);
-  font-weight: var(--yc-text-accent-font-weight);
+  font-weight: var(--g-text-accent-font-weight);
 }
 @media (max-width: 576px) {
   .pc-banner-card__title {
-    font-size: var(--yc-text-display-1-font-size);
-    line-height: var(--yc-text-display-1-line-height);
+    font-size: var(--g-text-display-1-font-size);
+    line-height: var(--g-text-display-1-line-height);
   }
 }
 .pc-banner-card__title a {
   outline: none;
-  color: var(--yc-color-text-link);
+  color: var(--g-color-text-link);
   text-decoration: none;
   cursor: pointer;
 }
@@ -35,8 +35,8 @@ unpredictable css rules order in build */
   outline: 2px solid #ffdb4d;
 }
 .pc-banner-card__title a:hover, .pc-banner-card__title a:active {
-  --pc-text-header-color: var(--yc-color-text-link-hover);
-  color: var(--yc-color-text-link-hover);
+  --pc-text-header-color: var(--g-color-text-link-hover);
+  color: var(--g-color-text-link-hover);
 }
 .pc-banner-card__content {
   width: 100%;
@@ -57,17 +57,17 @@ unpredictable css rules order in build */
 .pc-banner-card__subtitle {
   display: inline-block;
   margin-top: 8px;
-  font-size: var(--yc-text-body-3-font-size);
-  line-height: var(--yc-text-body-3-line-height);
+  font-size: var(--g-text-body-3-font-size);
+  line-height: var(--g-text-body-3-line-height);
   color: var(--pc-text-header-color);
-  font-weight: var(--yc-text-accent-font-weight);
+  font-weight: var(--g-text-accent-font-weight);
   font-weight: normal;
 }
 .pc-banner-card__subtitle p {
-  font-size: var(--yc-text-body-3-font-size);
-  line-height: var(--yc-text-body-3-line-height);
+  font-size: var(--g-text-body-3-font-size);
+  line-height: var(--g-text-body-3-line-height);
   color: var(--pc-text-header-color);
-  font-weight: var(--yc-text-accent-font-weight);
+  font-weight: var(--g-text-accent-font-weight);
   font-weight: normal;
 }
 .pc-banner-card__button.pc-banner-card__button {

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

@@ -1,12 +1,12 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { BackgroundImage, Button, HTML, RouterLink, YFMWrapper } from '../../components';
-import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
+import { useTheme } from '../../context/theme';
 import { block, getThemedValue } from '../../utils';
 import './BannerCard.css';
 const b = block('banner-card');
 export const BannerCard = (props) => {
     const { title, subtitle, button: { url, text, target }, color, theme: textTheme = 'light', image, disableCompress, } = props;
-    const { themeValue: theme } = useContext(ThemeValueContext);
+    const theme = useTheme();
     const contentStyle = {};
     if (color) {
         contentStyle.backgroundColor = getThemedValue(color, theme);

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

@@ -17,6 +17,7 @@ export declare const BasicCard: {
                 } | {
                     type: string;
                     pattern: string;
+                    optionName: string;
                 })[];
             };
             target: {
@@ -25,6 +26,11 @@ export declare const BasicCard: {
             };
             title: {
                 oneOf: ({
+                    type: string;
+                    contentType: string;
+                    optionName: string;
+                } | {
+                    optionName: string;
                     type: string;
                     additionalProperties: boolean;
                     required: string[];
@@ -44,14 +50,13 @@ export declare const BasicCard: {
                             type: string;
                         };
                     };
-                } | {
-                    type: string;
-                    contentType: string;
+                    contentType?: undefined;
                 })[];
             };
             text: {
                 type: string;
                 contentType: string;
+                inputType: string;
             };
             additionalInfo: {
                 type: string;
@@ -79,12 +84,25 @@ export declare const BasicCard: {
                     };
                 };
             };
+            list: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
             border: {
                 type: string;
                 enum: string[];
             };
             type: {};
-            when: {};
+            when: {
+                type: string;
+            };
         };
     };
 };

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

@@ -8,7 +8,7 @@ unpredictable css rules order in build */
 .pc-content {
   --pc-monochrome-button-background-color: #262626;
   --pc-monochrome-button-background-color-hover: #393939;
-  --pc-monochrome-button-color: var(--yc-color-text-light-primary);
+  --pc-monochrome-button-color: var(--g-color-text-light-primary);
 }
 .pc-content__notice .yfm ol,
 .pc-content__notice .yfm ul, .pc-content__text .yfm ol,
@@ -17,14 +17,14 @@ unpredictable css rules order in build */
 }
 .pc-content__notice.pc-content__notice .yfm,
 .pc-content__notice.pc-content__notice .yfm > * {
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
 }
 .pc-content__notice.pc-content__notice .yfm a {
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
   text-decoration: underline;
 }
 .pc-content__notice.pc-content__notice .yfm a:hover {
-  color: var(--yc-color-text-primary);
+  color: var(--g-color-text-primary);
 }
 
 .pc-content__button.pc-content__button {
@@ -82,8 +82,8 @@ unpredictable css rules order in build */
 }
 .pc-content_size_l .pc-content__text .yfm,
 .pc-content_size_l .pc-content__notice .yfm {
-  font-size: var(--yc-text-body-3-font-size);
-  line-height: var(--yc-text-body-3-line-height);
+  font-size: var(--g-text-body-3-font-size);
+  line-height: var(--g-text-body-3-line-height);
 }
 .pc-content_size_l .pc-content__links,
 .pc-content_size_l .pc-content__link,
@@ -95,63 +95,63 @@ unpredictable css rules order in build */
 .pc-content_theme_dark .pc-content__text .yfm,
 .pc-content_theme_dark .pc-content__text .yfm *,
 .pc-content_theme_dark .pc-content__link a {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
 }
 .pc-content_theme_dark .pc-content__notice .yfm,
 .pc-content_theme_dark .pc-content__notice .yfm * {
-  color: var(--yc-color-text-light-secondary);
+  color: var(--g-color-text-light-secondary);
 }
 .pc-content_theme_dark .pc-content__notice .yfm a {
-  color: var(--yc-color-text-light-secondary);
+  color: var(--g-color-text-light-secondary);
   text-decoration: underline;
 }
 .pc-content_theme_dark .pc-content__notice .yfm a:hover {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
 }
 .pc-content_theme_dark .pc-content__text .yfm a {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
   text-decoration: underline;
 }
 .pc-content_theme_dark .pc-content__text .yfm a:hover {
-  color: var(--yc-color-text-light-secondary);
+  color: var(--g-color-text-light-secondary);
 }
 .pc-content_theme_dark .pc-content__title a {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
   text-decoration: underline;
   text-decoration: none;
 }
 .pc-content_theme_dark .pc-content__title a:hover {
-  color: var(--yc-color-text-light-secondary);
+  color: var(--g-color-text-light-secondary);
 }
 .pc-content_theme_light .pc-content__title *,
 .pc-content_theme_light .pc-content__text .yfm,
 .pc-content_theme_light .pc-content__text .yfm *,
 .pc-content_theme_light .pc-content__link a {
-  color: var(--yc-color-text-dark-primary);
+  color: var(--g-color-text-dark-primary);
 }
 .pc-content_theme_light .pc-content__notice .yfm,
 .pc-content_theme_light .pc-content__notice .yfm * {
-  color: var(--yc-color-text-dark-secondary);
+  color: var(--g-color-text-dark-secondary);
 }
 .pc-content_theme_light .pc-content__notice .yfm a {
-  color: var(--yc-color-text-dark-secondary);
+  color: var(--g-color-text-dark-secondary);
   text-decoration: underline;
 }
 .pc-content_theme_light .pc-content__notice .yfm a:hover {
-  color: var(--yc-color-text-dark-primary);
+  color: var(--g-color-text-dark-primary);
 }
 .pc-content_theme_light .pc-content__text .yfm a {
-  color: var(--yc-color-text-dark-primary);
+  color: var(--g-color-text-dark-primary);
   text-decoration: underline;
 }
 .pc-content_theme_light .pc-content__text .yfm a:hover {
-  color: var(--yc-color-text-dark-secondary);
+  color: var(--g-color-text-dark-secondary);
 }
 .pc-content_theme_light .pc-content__title a {
-  color: var(--yc-color-text-dark-primary);
+  color: var(--g-color-text-dark-primary);
   text-decoration: underline;
   text-decoration: none;
 }
 .pc-content_theme_light .pc-content__title a:hover {
-  color: var(--yc-color-text-dark-secondary);
+  color: var(--g-color-text-dark-secondary);
 }

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(--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;
+}