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

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

@@ -10,7 +10,8 @@ export declare const MediaCardBlock: {
                 type: string;
             };
             image: {
-                anyOf: ({
+                oneOf: ({
+                    optionName: string;
                     oneOf: ({
                         type: string;
                         properties: {
@@ -21,7 +22,10 @@ export declare const MediaCardBlock: {
                     } | {
                         type: string;
                         pattern: string;
+                        optionName: string;
                     })[];
+                    type?: undefined;
+                    items?: undefined;
                 } | {
                     type: string;
                     items: {
@@ -35,8 +39,10 @@ export declare const MediaCardBlock: {
                         } | {
                             type: string;
                             pattern: string;
+                            optionName: string;
                         })[];
                     };
+                    optionName: string;
                 })[];
             };
             video: {
@@ -51,7 +57,8 @@ export declare const MediaCardBlock: {
                         };
                     };
                     loop: {
-                        anyOf: ({
+                        oneOf: ({
+                            optionName: string;
                             type: string;
                             additionalProperties: boolean;
                             required: string[];
@@ -65,6 +72,7 @@ export declare const MediaCardBlock: {
                             };
                         } | {
                             type: string;
+                            optionName: string;
                         })[];
                     };
                     type: {
@@ -74,13 +82,13 @@ export declare const MediaCardBlock: {
                     muted: {
                         type: string;
                     };
-                    playing: {
+                    autoplay: {
                         type: string;
                     };
                     elapsedTime: {
                         type: string;
                     };
-                    playIcon: {
+                    playButton: {
                         type: string;
                         additionalProperties: boolean;
                         properties: {
@@ -118,6 +126,10 @@ export declare const MediaCardBlock: {
             };
             dataLens: {
                 oneOf: ({
+                    type: string;
+                    optionName: string;
+                } | {
+                    optionName: string;
                     type: string;
                     additionalProperties: boolean;
                     required: string[];
@@ -130,15 +142,97 @@ export declare const MediaCardBlock: {
                             enum: 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;
+                            };
+                        };
+                    };
                 })[];
             };
-            fullscreen: {
+            border: {
                 type: string;
+                enum: string[];
             };
             type: {};
-            when: {};
+            when: {
+                type: string;
+            };
         };
     };
 };

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

@@ -1,8 +1,8 @@
-import { AnimatableProps, BaseProps, MediaProps } from '../../schema/validators/common';
+import { AnimatableProps, BaseProps, CardBase, MediaProps } from '../../schema/validators/common';
 export const MediaCardBlock = {
     'media-card': {
         additionalProperties: false,
         required: [],
-        properties: Object.assign(Object.assign(Object.assign({}, BaseProps), MediaProps), AnimatableProps),
+        properties: Object.assign(Object.assign(Object.assign(Object.assign({}, BaseProps), CardBase), MediaProps), AnimatableProps),
     },
 };

package/build/esm/sub-blocks/PriceDetailed/CombinedPriceDetailed/CombinedPriceDetailed.css

@@ -13,7 +13,7 @@ unpredictable css rules order in build */
   width: 100%;
 }
 .pc-combined-price-detailed-block__row:not(:last-child) {
-  border-bottom: 1px solid var(--yc-color-line-generic);
+  border-bottom: 1px solid var(--g-color-line-generic);
   margin-bottom: 12px !important;
   padding-bottom: 12px;
 }
@@ -22,7 +22,7 @@ unpredictable css rules order in build */
     padding-top: 12px;
   }
   .pc-combined-price-detailed-block__description_delimiter > * {
-    border-top: 1px solid var(--yc-color-line-generic);
+    border-top: 1px solid var(--g-color-line-generic);
   }
   .pc-combined-price-detailed-block__empty-column {
     border-top: 0;

package/build/esm/sub-blocks/PriceDetailed/PriceDescription/PriceDescription.css

@@ -3,26 +3,26 @@ unpredictable css rules order in build */
 .pc-price-description {
   margin-bottom: 12px;
 }
-.pc-price-description__title_size_l, .pc-price-description__description_size_l, .pc-price-description__detailed-title_size_l, .pc-price-description__label_size_l {
-  font-size: var(--yc-text-header-1-font-size);
-  line-height: var(--yc-text-header-1-line-height);
+.pc-price-description__title_size_l, .pc-price-description__description_size_l, .pc-price-description__detailed-title_size_l {
+  font-size: var(--g-text-header-1-font-size);
+  line-height: var(--g-text-header-1-line-height);
 }
-.pc-price-description__title_size_m, .pc-price-description__description_size_m, .pc-price-description__detailed-title_size_m, .pc-price-description__label_size_m {
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
+.pc-price-description__title_size_m, .pc-price-description__description_size_m, .pc-price-description__detailed-title_size_m {
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
 }
-.pc-price-description__title_size_s, .pc-price-description__description_size_s, .pc-price-description__detailed-title_size_s, .pc-price-description__label_size_s {
-  font-size: var(--yc-text-body-1-font-size);
-  line-height: var(--yc-text-body-1-line-height);
+.pc-price-description__title_size_s, .pc-price-description__description_size_s, .pc-price-description__detailed-title_size_s {
+  font-size: var(--g-text-body-1-font-size);
+  line-height: var(--g-text-body-1-line-height);
 }
 .pc-price-description__main-title {
   font-weight: 500;
 }
 .pc-price-description__main-title_color_cornflower {
-  color: var(--yc-my-color-brand-normal);
+  color: var(--g-color-base-brand);
 }
 .pc-price-description__main-title_color_black {
-  color: var(--yc-color-text-primary);
+  color: var(--g-color-text-primary);
 }
 .pc-price-description__title {
   display: flex;
@@ -35,25 +35,13 @@ unpredictable css rules order in build */
 .pc-price-description__detailed-title {
   margin-left: 4px;
 }
-.pc-price-description__label {
-  padding: 4px 12px;
-  border-radius: 4px;
-  width: fit-content;
+.pc-price-description__label_size_s {
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
 }
-.pc-price-description__label_color_blue {
-  background: var(--yc-color-promo-highlight-sky);
-}
-.pc-price-description__label_color_green {
-  background: var(--yc-color-promo-highlight-mint);
-}
-.pc-price-description__label_color_yellow {
-  background: var(--yc-color-promo-highlight-gold);
-}
-.pc-price-description__label_color_purple {
-  background: var(--yc-color-promo-highlight-neon);
-}
-.pc-price-description__label_color_red {
-  background: var(--yc-color-promo-highlight-tomato);
+.pc-price-description__label_size_xs {
+  font-size: var(--g-text-body-1-font-size);
+  line-height: var(--g-text-body-1-line-height);
 }
 @media (max-width: 577px) {
   .pc-price-description {

package/build/esm/sub-blocks/PriceDetailed/PriceDescription/PriceDescription.js

@@ -1,9 +1,24 @@
 import React, { useCallback, useContext, useEffect, useMemo } from 'react';
+import { Label } from '@gravity-ui/uikit';
 import { YFMWrapper } from '../../../components';
 import { StylesContext } from '../../../context/stylesContext';
+import { PriceLabelColor, } from '../../../models';
 import { block } from '../../../utils';
 import './PriceDescription.css';
 const b = block('price-description');
+const LabelColorsMapping = {
+    [PriceLabelColor.BLUE]: 'info',
+    [PriceLabelColor.GREEN]: 'success',
+    [PriceLabelColor.YELLOW]: 'warning',
+    [PriceLabelColor.PURPLE]: 'normal',
+    [PriceLabelColor.RED]: 'dnager',
+};
+const LabelSizeMap = {
+    l: 's',
+    m: 's',
+    s: 'xs',
+    xs: 'xs',
+};
 const PriceDescription = (props) => {
     const { title, detailedTitle = '', description, titleSize = 'l', descriptionSize = 'm', colorTitle = 'cornflower', label, labelsDefaultText, className, } = props;
     const descriptionRef = React.useRef(null);
@@ -36,7 +51,9 @@ const PriceDescription = (props) => {
             return null;
         }
         const labelTitle = label.text || (labelsDefaultText && labelsDefaultText[label.color]);
-        return (React.createElement("div", { className: b('label', { color: label.color, size: label.size || descriptionSize }) }, labelTitle));
+        const labelColor = (LabelColorsMapping[label.color] || 'unknown');
+        const labelSize = LabelSizeMap[label.size || descriptionSize];
+        return (React.createElement(Label, { className: b('label', { size: labelSize }), theme: labelColor, size: labelSize }, labelTitle));
     }, [descriptionSize, label, labelsDefaultText]);
     const titleElement = useMemo(() => {
         return (React.createElement("div", { className: b('title', { size: titleSize }) },

package/build/esm/sub-blocks/PriceDetailed/PriceDetails/Details/Settings.css

@@ -4,17 +4,17 @@ unpredictable css rules order in build */
   font-weight: 400;
 }
 .pc-settings-list__title_size_l, .pc-settings-list__description_size_l {
-  font-size: var(--yc-text-header-1-font-size);
-  line-height: var(--yc-text-header-1-line-height);
+  font-size: var(--g-text-header-1-font-size);
+  line-height: var(--g-text-header-1-line-height);
 }
 .pc-settings-list__title_size_m, .pc-settings-list__description_size_m {
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
 }
 .pc-settings-list__title_size_s, .pc-settings-list__description_size_s {
-  font-size: var(--yc-text-body-1-font-size);
-  line-height: var(--yc-text-body-1-line-height);
+  font-size: var(--g-text-body-1-font-size);
+  line-height: var(--g-text-body-1-line-height);
 }
 .pc-settings-list__title {
-  color: var(--yc-color-text-hint);
+  color: var(--g-color-text-hint);
 }

package/build/esm/sub-blocks/PriceDetailed/PriceDetails/PriceDetails.css

@@ -17,7 +17,7 @@ unpredictable css rules order in build */
   }
 }
 .pc-price-details__delimiter-line {
-  border-top: 1px solid var(--yc-color-line-generic);
+  border-top: 1px solid var(--g-color-line-generic);
 }
 .pc-price-details__arrow {
   margin: auto 10px;
@@ -26,14 +26,14 @@ unpredictable css rules order in build */
   cursor: pointer;
   display: flex;
   font-weight: 400;
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
 }
 .pc-price-details__foldable_title_color_cornflower {
-  color: var(--yc-color-text-link);
+  color: var(--g-color-text-link);
 }
 .pc-price-details__foldable_title_color_black {
-  color: var(--yc-color-text-primary);
+  color: var(--g-color-text-primary);
 }
 .pc-price-details__foldable_block > * {
   padding-top: 12px;

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

@@ -49,6 +49,7 @@ export declare const PriceDetailedBlock: {
             priceType: {
                 type: string;
                 enum: string[];
+                default: string;
             };
             numberGroupItems: {
                 type: string;
@@ -87,7 +88,9 @@ export declare const PriceDetailedBlock: {
                 type: string;
             };
             type: {};
-            when: {};
+            when: {
+                type: string;
+            };
         };
     };
 };

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

@@ -124,7 +124,10 @@ const PriceDetailsListProps = {
 };
 const PriceDetailsProps = {
     items: {
-        anyOf: [filteredArray(PriceDetailsListProps), filteredArray(PriceDetailsSettingsProps)],
+        oneOf: [
+            Object.assign(Object.assign({}, filteredArray(Object.assign({}, PriceDetailsListProps))), { optionName: 'marked-list' }),
+            Object.assign(Object.assign({}, filteredArray(Object.assign({}, PriceDetailsSettingsProps))), { optionName: 'settings' }),
+        ],
     },
 };
 const PriceItem = {
@@ -140,6 +143,7 @@ export const PriceDetailedBlock = {
         properties: Object.assign(Object.assign(Object.assign({}, BaseProps), AnimatableProps), { items: filteredArray(PriceItem), description: PriceDetailedDescriptionProps, details: PriceDetailedDetailsProps, priceType: {
                 type: 'string',
                 enum: PriceDetailedDetailsType,
+                default: 'settings',
             }, numberGroupItems: {
                 type: 'number',
                 enum: [3, 4, 5],

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

@@ -10,14 +10,14 @@ unpredictable css rules order in build */
   height: 100%;
   overflow-x: hidden;
   border-radius: var(--pc-border-radius);
-  background-color: var(--yc-color-base-float);
+  background-color: var(--g-color-base-float);
   transition: box-shadow 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
   display: flex;
   min-height: 400px;
   height: 100%;
 }
 .pc-quote_theme_dark {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
 }
 .pc-quote_theme_dark h1,
 .pc-quote_theme_dark h2,
@@ -26,10 +26,10 @@ unpredictable css rules order in build */
 .pc-quote_theme_dark h5,
 .pc-quote_theme_dark h6,
 .pc-quote_theme_dark .yfm {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
 }
 .pc-quote_border_line {
-  border: 1px solid var(--yc-color-line-generic);
+  border: 1px solid var(--g-color-line-generic);
 }
 .pc-quote_border_line, .pc-quote_border_none {
   cursor: default;
@@ -60,8 +60,8 @@ unpredictable css rules order in build */
 .pc-quote__content {
   margin-top: 24px;
   position: relative;
-  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-quote__content::before {
   position: absolute;
@@ -84,7 +84,7 @@ unpredictable css rules order in build */
   margin-top: 20px;
 }
 .pc-quote__author_theme_dark, .pc-quote_theme_dark {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
 }
 .pc-quote__author_theme_dark h1,
 .pc-quote__author_theme_dark h2,
@@ -99,7 +99,7 @@ unpredictable css rules order in build */
 .pc-quote_theme_dark h5,
 .pc-quote_theme_dark h6,
 .pc-quote_theme_dark .yfm {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
 }
 .pc-quote__author {
   max-width: calc(60% - 20px);
@@ -110,10 +110,10 @@ unpredictable css rules order in build */
   /* stylelint-enable declaration-no-important */
 }
 .pc-quote__link-button_theme_dark {
-  color: var(--yc-color-base-background) !important;
+  color: var(--g-color-base-background) !important;
 }
 .pc-quote__link-button_theme_dark:before {
-  border-color: var(--yc-color-base-background) !important;
+  border-color: var(--g-color-base-background) !important;
 }
 @media (max-width: 1081px) {
   .pc-quote__author-wrapper {

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

@@ -1,8 +1,8 @@
-import React, { useCallback, useContext } from 'react';
+import React, { useCallback } from 'react';
 import { Button } from '@gravity-ui/uikit';
 import { Author, HTML, Image } from '../../components';
 import { getMediaImage } from '../../components/Media/Image/utils';
-import { ThemeValueContext } from '../../context/theme/ThemeValueContext';
+import { useTheme } from '../../context/theme';
 import { useAnalytics } from '../../hooks';
 import { AuthorType, DefaultEventNames } from '../../models';
 import { block, getThemedValue } from '../../utils';
@@ -10,7 +10,7 @@ import './Quote.css';
 const b = block('quote');
 const Quote = (props) => {
     const { theme: textTheme = 'light', color, image, border = 'shadow', text, logo, author, url, buttonText, } = props;
-    const { themeValue: theme } = useContext(ThemeValueContext);
+    const theme = useTheme();
     const imageThemed = getThemedValue(image, theme);
     const imageData = getMediaImage(imageThemed);
     const handleAnalytics = useAnalytics(DefaultEventNames.QuoteButton, url);

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

@@ -8,7 +8,7 @@ export declare const Quote: {
                 contentType: string;
             };
             image: {
-                oneOf: ({
+                oneOf: (({
                     oneOf: ({
                         type: string;
                         properties: {
@@ -19,12 +19,16 @@ export declare const Quote: {
                     } | {
                         type: string;
                         pattern: string;
+                        optionName: string;
                     })[];
-                } | {
+                } & {
+                    optionName: string;
+                }) | {
                     type: string;
                     additionalProperties: boolean;
                     required: import("../..").Theme[];
                     properties: {};
+                    optionName: string;
                 })[];
             };
             logo: {
@@ -36,7 +40,6 @@ export declare const Quote: {
             };
             url: {
                 type: string;
-                pattern: string;
             };
             buttonText: {
                 type: string;
@@ -68,7 +71,9 @@ export declare const Quote: {
                 };
             };
             type: {};
-            when: {};
+            when: {
+                type: string;
+            };
         };
     };
 };

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

@@ -1,4 +1,4 @@
-import { ImageProps, urlPattern } from '../../components/Image/schema';
+import { ImageProps, imageUrlPattern } from '../../components/Image/schema';
 import { BaseProps, ThemeProps, authorItem, withTheme } from '../../schema/validators/common';
 export const Quote = {
     quote: {
@@ -9,12 +9,11 @@ export const Quote = {
                 contentType: 'text',
             }, image: withTheme(ImageProps), logo: {
                 type: 'string',
-                pattern: urlPattern,
+                pattern: imageUrlPattern,
             }, color: {
                 type: 'string',
             }, url: {
                 type: 'string',
-                pattern: urlPattern,
             }, buttonText: {
                 type: 'string',
             }, theme: ThemeProps, author: authorItem }),

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

@@ -48,7 +48,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);
@@ -56,6 +56,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;
@@ -184,6 +192,11 @@ export const config = {
             fields: ['title', 'additionalInfo'],
             transformer: yfmTransformer,
         },
+        {
+            fields: ['list'],
+            transformer: yfmTransformer,
+            parser: createItemsParser(['text']),
+        },
     ],
     [BlockType.MapBlock]: [
         ...blockHeaderTransformer,
@@ -258,6 +271,11 @@ export const config = {
             transformer: typografTransformer,
             parser: parseTitle,
         },
+        {
+            fields: ['list'],
+            transformer: yfmTransformer,
+            parser: createItemsParser(['text']),
+        },
     ],
     [BlockType.InfoBlock]: [
         {

package/build/esm/text-transform/filter.d.ts

@@ -0,0 +1,20 @@
+import { ContentVariables } from './transformers';
+type WhenValue = string | boolean | undefined;
+type OrArray<T> = T | T[];
+type OrArrayRecord<T> = Record<string, OrArray<T>>;
+interface FilteredContentItem extends OrArrayRecord<FilteredContentItem> {
+}
+type FilteredContent = OrArray<FilteredContentItem>;
+type FilterableContentItem = FilteredContentItem & {
+    when: WhenValue;
+};
+export type FilterableContent = OrArray<FilterableContentItem>;
+/**
+ * Filters content recoursively by result of it's 'when' property evaluation applied to vars argument.
+ * e.g. property {..., when: 'someVar == "someValue"' } will be included in result only if vars.someVar === 'someValue'
+ * @param {FilterableContent} content
+ * @param {ContentVariables} vars
+ * @return {FilteredContent}
+ */
+export declare function filterContent(content: FilterableContent | FilteredContent, vars: ContentVariables): FilteredContent;
+export {};