@gravity-ui/page-constructor 5.28.6 → 5.28.7-alpha.3

package/build/cjs/blocks/Media/Media.js

@@ -8,9 +8,10 @@ const MediaBase_1 = tslib_1.__importDefault(require("../../components/MediaBase/
 const theme_1 = require("../../context/theme");
 const utils_1 = require("../../utils");
 const borderSelector_1 = require("../../utils/borderSelector");
+const microdata_1 = require("../../utils/microdata");
 const b = (0, utils_1.block)('media-block');
 const MediaBlock = (props) => {
-    const { media, border, disableShadow } = props;
+    const { media, border, disableShadow, title, description } = props;
     const borderSelected = (0, borderSelector_1.getMediaBorder)({
         border,
         disableShadow,
@@ -18,9 +19,13 @@ const MediaBlock = (props) => {
     const [play, setPlay] = (0, react_1.useState)(false);
     const theme = (0, theme_1.useTheme)();
     const mediaThemed = (0, utils_1.getThemedValue)(media, theme);
+    const mediaWithMicrodata = (0, microdata_1.mergeVideoMicrodata)(mediaThemed, {
+        name: (0, microdata_1.sanitizeMicrodata)(title),
+        description: description ? (0, microdata_1.sanitizeMicrodata)(description) : undefined,
+    });
     return (react_1.default.createElement(MediaBase_1.default, Object.assign({}, props, { onScroll: () => setPlay(true) }),
         react_1.default.createElement(MediaBase_1.default.Card, null,
-            react_1.default.createElement(Media_1.default, Object.assign({ imageClassName: b('image') }, mediaThemed, { playVideo: play, className: b({ border: borderSelected }) })))));
+            react_1.default.createElement(Media_1.default, Object.assign({ imageClassName: b('image') }, mediaWithMicrodata, { playVideo: play, className: b({ border: borderSelected }) })))));
 };
 exports.MediaBlock = MediaBlock;
 exports.default = exports.MediaBlock;

package/build/cjs/blocks/PromoFeaturesBlock/PromoFeaturesBlock.js

@@ -11,6 +11,7 @@ const YFMWrapper_1 = tslib_1.__importDefault(require("../../components/YFMWrappe
 const constants_1 = require("../../constants");
 const theme_1 = require("../../context/theme");
 const utils_1 = require("../../utils");
+const microdata_1 = require("../../utils/microdata");
 const b = (0, utils_1.block)('PromoFeaturesBlock');
 const breakpointColumns = {
     [constants_1.BREAKPOINTS.lg]: 3,
@@ -28,6 +29,10 @@ const PromoFeaturesBlock = (props) => {
             const blockModifier = backgroundTheme === 'default' ? 'default' : 'light';
             const themeMod = cardTheme || blockModifier || '';
             const themedMedia = (0, utils_1.getThemedValue)(media, globalTheme);
+            const allProps = (0, microdata_1.mergeVideoMicrodata)(themedMedia, {
+                name: (0, microdata_1.sanitizeMicrodata)(cardTitle),
+                description: (0, microdata_1.sanitizeMicrodata)(text),
+            });
             return (react_1.default.createElement("div", { key: index, className: b('card', {
                     'no-media': !media,
                     [themeMod]: Boolean(themeMod),
@@ -36,7 +41,7 @@ const PromoFeaturesBlock = (props) => {
                     react_1.default.createElement("h3", { className: b('card-title') }, cardTitle),
                     react_1.default.createElement("div", { className: b('card-text') },
                         react_1.default.createElement(YFMWrapper_1.default, { content: text, modifiers: { constructor: true } }))),
-                media && react_1.default.createElement(Media_1.default, Object.assign({ className: b('card-media') }, themedMedia))));
+                media && react_1.default.createElement(Media_1.default, Object.assign({ className: b('card-media') }, allProps))));
         }))));
 };
 exports.default = PromoFeaturesBlock;

package/build/cjs/blocks/Questions/Questions.js

@@ -21,7 +21,7 @@ const QuestionsBlock = (props) => {
         }
         setOpened(newState);
     };
-    return (react_1.default.createElement("div", { className: b(), itemScope: true, itemType: models_1.FaqMicrodataValues.PageType },
+    return (react_1.default.createElement("div", { className: b(), itemScope: true, itemType: models_1.FaqMicrodataValues.PageType, itemID: models_1.FaqMicrodataValues.PageId },
         react_1.default.createElement(grid_1.Row, null,
             react_1.default.createElement(grid_1.Col, { sizes: { all: 12, md: 4 } },
                 react_1.default.createElement("div", { className: b('title') },

package/build/cjs/blocks/Questions/models.d.ts

@@ -1,5 +1,6 @@
 export declare const FaqMicrodataValues: {
     readonly PageType: "https://schema.org/FAQPage";
+    readonly PageId: "/faq";
     readonly QuestionType: "https://schema.org/Question";
     readonly QuestionProp: "mainEntity";
     readonly QuestionNameProp: "name";

package/build/cjs/blocks/Questions/models.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FaqMicrodataValues = void 0;
 exports.FaqMicrodataValues = {
     PageType: 'https://schema.org/FAQPage',
+    PageId: '/faq',
     QuestionType: 'https://schema.org/Question',
     QuestionProp: 'mainEntity',
     QuestionNameProp: 'name',

package/build/cjs/blocks/Tabs/Tabs.js

@@ -15,6 +15,7 @@ const YFMWrapper_1 = tslib_1.__importDefault(require("../../components/YFMWrappe
 const theme_1 = require("../../context/theme");
 const grid_1 = require("../../grid");
 const utils_2 = require("../../utils");
+const microdata_1 = require("../../utils/microdata");
 const TabsTextContent_1 = tslib_1.__importDefault(require("./TabsTextContent/TabsTextContent"));
 const b = (0, utils_2.block)('tabs-block');
 const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered, direction = 'media-content', contentSize = 's', }) => {
@@ -63,14 +64,19 @@ const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered
     const showMedia = Boolean((activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) || imageProps);
     const showText = Boolean(activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.text);
     const border = (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.border) || 'shadow';
-    const textContent = activeTabData && showText && (react_1.default.createElement(TabsTextContent_1.default, { showMedia: showMedia, data: activeTabData, imageProps: imageProps ? imageProps : undefined, isReverse: isReverse, contentSize: contentSize, centered: centered }));
+    const textContent = showText && (react_1.default.createElement(TabsTextContent_1.default, { showMedia: showMedia, data: activeTabData, imageProps: imageProps ? imageProps : undefined, isReverse: isReverse, contentSize: contentSize, centered: centered }));
     const mediaContent = showMedia && (react_1.default.createElement(grid_1.Col, { sizes: { all: 12, md: 8 }, orders: {
             all: grid_1.GridColumnOrderClasses.Last,
             md: grid_1.GridColumnOrderClasses.First,
         }, className: b('col', { centered: centered }) },
         (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (react_1.default.createElement("div", { style: { minHeight: mediaVideoHeight || minImageHeight } },
             react_1.default.createElement("div", { ref: ref },
-                react_1.default.createElement(Media_1.default, Object.assign({}, (0, utils_2.getThemedValue)(activeTabData.media, theme), { key: activeTab, className: b('media', { border }), playVideo: play, height: mediaVideoHeight || undefined, onImageLoad: handleImageHeight }))))),
+                react_1.default.createElement(Media_1.default, Object.assign({}, (0, microdata_1.mergeVideoMicrodata)((0, utils_2.getThemedValue)(activeTabData.media, theme), {
+                    name: activeTabData.tabName,
+                    description: activeTabData.caption
+                        ? (0, microdata_1.sanitizeMicrodata)(activeTabData.caption)
+                        : undefined,
+                }), { key: activeTab, className: b('media', { border }), playVideo: play, height: mediaVideoHeight || undefined, onImageLoad: handleImageHeight }))))),
         imageProps && (react_1.default.createElement(react_1.Fragment, null,
             react_1.default.createElement(FullscreenImage_1.default, Object.assign({}, imageProps, { imageClassName: b('image', { border }) })))),
         (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.caption) && (react_1.default.createElement("p", { className: b('caption'), id: captionId },

package/build/cjs/blocks/Tabs/TabsTextContent/TabsTextContent.d.ts

@@ -2,9 +2,9 @@ import { ImageDeviceProps, ImageObjectProps, TabsBlockItem, TabsBlockProps } fro
 interface TextContentProps extends Pick<TabsBlockProps, 'centered' | 'contentSize'> {
     showMedia: boolean;
     isReverse: boolean;
-    data: TabsBlockItem;
+    data?: TabsBlockItem;
     centered?: boolean;
     imageProps?: ImageObjectProps | ImageDeviceProps;
 }
-export declare const TabsTextContent: ({ centered, contentSize, showMedia, data: { media, title, text, additionalInfo, link, links, buttons, list }, imageProps, isReverse, }: TextContentProps) => JSX.Element;
+export declare const TabsTextContent: ({ centered, contentSize, showMedia, data, imageProps, isReverse, }: TextContentProps) => JSX.Element | null;
 export default TabsTextContent;

package/build/cjs/blocks/Tabs/TabsTextContent/TabsTextContent.js

@@ -7,11 +7,17 @@ const grid_1 = require("../../../grid");
 const sub_blocks_1 = require("../../../sub-blocks");
 const utils_1 = require("../../../utils");
 const b = (0, utils_1.block)('tabs-block-text-content');
-const TabsTextContent = ({ centered, contentSize = 's', showMedia, data: { media, title, text, additionalInfo, link, links, buttons, list }, imageProps, isReverse, }) => (react_1.default.createElement(grid_1.Col, { sizes: { all: 12, md: showMedia ? 4 : 8 }, className: b({ centered: centered }) },
-    react_1.default.createElement("div", { className: b('wrapper', {
-            reverse: isReverse,
-            'no-image': !(media || imageProps),
-        }) },
-        react_1.default.createElement(sub_blocks_1.Content, { title: title, text: text, additionalInfo: additionalInfo, size: contentSize, list: list, links: [...(link ? [link] : []), ...(links || [])], buttons: buttons, colSizes: { all: 12 } }))));
+const TabsTextContent = ({ centered, contentSize = 's', showMedia, data, imageProps, isReverse, }) => {
+    if (!data) {
+        return null;
+    }
+    const { media, title, text, additionalInfo, link, links, buttons, list } = data;
+    return (react_1.default.createElement(grid_1.Col, { sizes: { all: 12, md: showMedia ? 4 : 8 }, className: b({ centered: centered }) },
+        react_1.default.createElement("div", { className: b('wrapper', {
+                reverse: isReverse,
+                'no-image': !(media || imageProps),
+            }) },
+            react_1.default.createElement(sub_blocks_1.Content, { title: title, text: text, additionalInfo: additionalInfo, size: contentSize, list: list, links: [...(link ? [link] : []), ...(links || [])], buttons: buttons, colSizes: { all: 12 } }))));
+};
 exports.TabsTextContent = TabsTextContent;
 exports.default = exports.TabsTextContent;

package/build/cjs/components/ContentList/ContentList.css

@@ -53,6 +53,30 @@ unpredictable css rules order in build */
   margin-top: 0;
   margin-bottom: 0;
 }
+.pc-content-list_theme_light .pc-content-list__item *,
+.pc-content-list_theme_light .pc-content-list__item .yfm,
+.pc-content-list_theme_light .pc-content-list__item .yfm * {
+  color: var(--g-color-text-dark-primary);
+}
+.pc-content-list_theme_light .pc-content-list__item .yfm a {
+  color: var(--g-color-text-dark-primary);
+  text-decoration: underline;
+}
+.pc-content-list_theme_light .pc-content-list__item .yfm a:hover {
+  color: var(--g-color-text-dark-secondary);
+}
+.pc-content-list_theme_dark .pc-content-list__item *,
+.pc-content-list_theme_dark .pc-content-list__item .yfm,
+.pc-content-list_theme_dark .pc-content-list__item .yfm * {
+  color: var(--g-color-text-light-primary);
+}
+.pc-content-list_theme_dark .pc-content-list__item .yfm a {
+  color: var(--g-color-text-light-primary);
+  text-decoration: underline;
+}
+.pc-content-list_theme_dark .pc-content-list__item .yfm a:hover {
+  color: var(--g-color-text-light-secondary);
+}
 .pc-content-list__icon {
   display: block;
 }

package/build/cjs/components/ContentList/ContentList.d.ts

@@ -1,4 +1,4 @@
 import { ContentListProps } from '../../models';
 import { QAProps } from '../../models/common';
-declare const ContentList: ({ list, size, qa }: ContentListProps & QAProps) => JSX.Element;
+declare const ContentList: ({ list, size, qa, theme }: ContentListProps & QAProps) => JSX.Element;
 export default ContentList;

package/build/cjs/components/ContentList/ContentList.js

@@ -17,9 +17,9 @@ function getHeadingLevel(size) {
             return 'h3';
     }
 }
-const ContentList = ({ list, size = 'l', qa }) => {
+const ContentList = ({ list, size = 'l', qa, theme }) => {
     const qaAttributes = (0, blocks_1.getQaAttrubutes)(qa, ['image', 'title', 'text']);
-    return (react_1.default.createElement("div", { className: b({ size }), "data-qa": qa }, list === null || list === void 0 ? void 0 : list.map((item) => {
+    return (react_1.default.createElement("div", { className: b({ size, theme }), "data-qa": qa }, list === null || list === void 0 ? void 0 : list.map((item) => {
         const { icon, title, text } = item;
         return (react_1.default.createElement("div", { className: b('item', { 'without-title': !title }), key: (0, uuid_1.v4)() },
             react_1.default.createElement(ContentListItemIcon_1.default, { icon: icon, className: b('icon'), qa: qaAttributes.image }),

package/build/cjs/components/Media/Media.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Media = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
+const innerContext_1 = require("../../context/innerContext");
 const utils_1 = require("../../utils");
 const VideoBlock_1 = tslib_1.__importDefault(require("../VideoBlock/VideoBlock"));
 const DataLens_1 = tslib_1.__importDefault(require("./DataLens/DataLens"));
@@ -12,8 +13,9 @@ const Image_1 = tslib_1.__importDefault(require("./Image/Image"));
 const Video_1 = tslib_1.__importDefault(require("./Video/Video"));
 const b = (0, utils_1.block)('Media');
 const Media = (props) => {
-    const { image, video, youtube, videoIframe, dataLens, color, height, previewImg, parallax = false, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, disableImageSliderForArrayInput, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, ratio, autoplay, onImageLoad, iframe, margins, } = props;
+    const { image, video, youtube, videoIframe, dataLens, color, height, previewImg, parallax = false, fullscreen, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, disableImageSliderForArrayInput, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, ratio, autoplay, onImageLoad, iframe, margins, videoMicrodata, } = props;
     const [hasVideoFallback, setHasVideoFallback] = (0, react_1.useState)(false);
+    const { microdata } = (0, react_1.useContext)(innerContext_1.InnerContext);
     const qaAttributes = (0, utils_1.getQaAttrubutes)(qa, 'video');
     const content = (0, react_1.useMemo)(() => {
         let result = [];
@@ -80,7 +82,14 @@ const Media = (props) => {
         autoplay,
         margins,
     ]);
-    return (react_1.default.createElement("div", { className: b(null, className), style: { backgroundColor: color }, "data-qa": qa }, content));
+    const videoMicrodataScript = (0, react_1.useMemo)(() => {
+        var _a;
+        const json = JSON.stringify(Object.assign({ '@context': 'http://schema.org/', '@type': 'VideoObject', uploadDate: microdata === null || microdata === void 0 ? void 0 : microdata.contentUpdatedDate, contentUrl: ((_a = video === null || video === void 0 ? void 0 : video.src) === null || _a === void 0 ? void 0 : _a[0]) || videoIframe || youtube, thumbnailUrl: previewImg }, videoMicrodata));
+        return video || youtube || videoIframe ? (react_1.default.createElement("script", { type: "application/ld+json" }, json)) : null;
+    }, [microdata === null || microdata === void 0 ? void 0 : microdata.contentUpdatedDate, previewImg, video, videoIframe, videoMicrodata, youtube]);
+    return (react_1.default.createElement("div", { className: b(null, className), style: { backgroundColor: color }, "data-qa": qa },
+        videoMicrodataScript,
+        content));
 };
 exports.Media = Media;
 exports.default = exports.Media;

package/build/cjs/components/Title/TitleItem.d.ts

@@ -1,5 +1,5 @@
 import { QAProps, TextSize, TitleItemProps } from '../../models';
-export declare function getArrowSize(size: TextSize, isMobile: boolean): 16 | 24 | 13 | 22 | 26 | 38 | 20;
+export declare function getArrowSize(size: TextSize, isMobile: boolean): 20 | 24 | 16 | 13 | 22 | 26 | 38;
 export interface TitleItemFullProps extends TitleItemProps, QAProps {
     className?: string;
     onClick?: () => void;

package/build/cjs/containers/PageConstructor/PageConstructor.d.ts

@@ -10,6 +10,9 @@ export interface PageConstructorProps {
     custom?: CustomConfig;
     renderMenu?: () => React.ReactNode;
     navigation?: NavigationData;
+    microdata?: {
+        contentUpdatedDate: string;
+    };
 }
 export declare const Constructor: (props: PageConstructorProps) => JSX.Element;
 export declare const PageConstructor: (props: PageConstructorProps) => JSX.Element;

package/build/cjs/containers/PageConstructor/PageConstructor.js

@@ -20,7 +20,7 @@ const ConstructorItem_1 = require("./components/ConstructorItem");
 const ConstructorRow_1 = require("./components/ConstructorRow");
 const b = (0, utils_1.block)('page-constructor');
 const Constructor = (props) => {
-    const { content: { blocks = [], background } = {}, renderMenu, shouldRenderBlock, navigation, custom, } = props;
+    const { content: { blocks = [], background } = {}, renderMenu, shouldRenderBlock, navigation, custom, microdata, } = props;
     const { context } = (0, react_1.useMemo)(() => ({
         context: {
             blockTypes: [...models_1.BlockTypes, ...(0, utils_1.getCustomTypes)(['blocks', 'headers'], custom)],
@@ -37,8 +37,9 @@ const Constructor = (props) => {
             customization: {
                 decorators: custom === null || custom === void 0 ? void 0 : custom.decorators,
             },
+            microdata,
         },
-    }), [custom, shouldRenderBlock]);
+    }), [custom, shouldRenderBlock, microdata]);
     const theme = (0, theme_1.useTheme)();
     const header = (0, utils_1.getHeaderBlock)(blocks, context.headerBlockTypes);
     const restBlocks = (0, utils_1.getOrderedBlocks)(blocks, context.headerBlockTypes);

package/build/cjs/context/innerContext/InnerContext.d.ts

@@ -11,5 +11,8 @@ export interface InnerContextType {
     loadables?: LoadableConfig;
     shouldRenderBlock?: ShouldRenderBlock;
     customization?: Pick<CustomConfig, 'decorators'>;
+    microdata?: {
+        contentUpdatedDate?: string;
+    };
 }
 export declare const InnerContext: React.Context<InnerContextType>;

package/build/cjs/context/innerContext/InnerContext.js

@@ -10,4 +10,5 @@ exports.InnerContext = react_1.default.createContext({
     navigationBlockTypes: [],
     itemMap: {},
     navItemMap: {},
+    microdata: {},
 });

package/build/cjs/grid/Col/Col.d.ts

@@ -5,4 +5,4 @@ export interface GridColumnProps extends GridColumnClassParams, Refable<HTMLDivE
     style?: CSSProperties;
     children?: React.ReactNode;
 }
-export declare const Col: React.ForwardRefExoticComponent<Pick<React.PropsWithChildren<GridColumnProps>, "style" | "children" | "sizes" | "className" | "hidden" | "role" | "qa" | "reset" | "visible" | "offsets" | "orders" | "alignSelf" | "justifyContent"> & React.RefAttributes<HTMLDivElement>>;
+export declare const Col: React.ForwardRefExoticComponent<Pick<React.PropsWithChildren<GridColumnProps>, "style" | "children" | "sizes" | "className" | "hidden" | "role" | "qa" | "offsets" | "orders" | "visible" | "alignSelf" | "justifyContent" | "reset"> & React.RefAttributes<HTMLDivElement>>;

package/build/cjs/models/constructor-items/common.d.ts

@@ -207,6 +207,14 @@ export interface MediaComponentIframeProps {
 }
 export interface MediaProps extends Animatable, Partial<MediaComponentDataLensProps>, Partial<MediaComponentYoutubeProps>, Partial<MediaComponentVideoIframeProps>, Partial<MediaComponentImageProps>, Partial<MediaComponentIframeProps>, Partial<MediaComponentVideoProps> {
     color?: string;
+    videoMicrodata?: {
+        name?: string;
+        description?: string;
+        duration?: string;
+        uploadDate?: string;
+        contentUrl?: string;
+        thumbnailUrl?: string;
+    };
 }
 export interface BackgroundMediaProps extends MediaProps, Animatable, QAProps {
     fullWidthMedia?: boolean;

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

@@ -87,9 +87,6 @@ unpredictable css rules order in build */
 .pc-content_theme_dark .pc-content__title *,
 .pc-content_theme_dark .pc-content__text .yfm,
 .pc-content_theme_dark .pc-content__text .yfm *,
-.pc-content_theme_dark .pc-content__list *,
-.pc-content_theme_dark .pc-content__list .yfm,
-.pc-content_theme_dark .pc-content__list .yfm *,
 .pc-content_theme_dark .pc-content__links a {
   color: var(--g-color-text-light-primary);
 }
@@ -104,13 +101,11 @@ unpredictable css rules order in build */
 .pc-content_theme_dark .pc-content__notice .yfm a:hover {
   color: var(--g-color-text-light-primary);
 }
-.pc-content_theme_dark .pc-content__text .yfm a,
-.pc-content_theme_dark .pc-content__list .yfm a {
+.pc-content_theme_dark .pc-content__text .yfm a {
   color: var(--g-color-text-light-primary);
   text-decoration: underline;
 }
-.pc-content_theme_dark .pc-content__text .yfm a:hover,
-.pc-content_theme_dark .pc-content__list .yfm a:hover {
+.pc-content_theme_dark .pc-content__text .yfm a:hover {
   color: var(--g-color-text-light-secondary);
 }
 .pc-content_theme_dark .pc-content__title a {
@@ -124,9 +119,6 @@ unpredictable css rules order in build */
 .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__list *,
-.pc-content_theme_light .pc-content__list .yfm,
-.pc-content_theme_light .pc-content__list .yfm *,
 .pc-content_theme_light .pc-content__links a {
   color: var(--g-color-text-dark-primary);
 }
@@ -141,13 +133,11 @@ unpredictable css rules order in build */
 .pc-content_theme_light .pc-content__notice .yfm a:hover {
   color: var(--g-color-text-dark-primary);
 }
-.pc-content_theme_light .pc-content__text .yfm a,
-.pc-content_theme_light .pc-content__list .yfm a {
+.pc-content_theme_light .pc-content__text .yfm a {
   color: var(--g-color-text-dark-primary);
   text-decoration: underline;
 }
-.pc-content_theme_light .pc-content__text .yfm a:hover,
-.pc-content_theme_light .pc-content__list .yfm a:hover {
+.pc-content_theme_light .pc-content__text .yfm a:hover {
   color: var(--g-color-text-dark-secondary);
 }
 .pc-content_theme_light .pc-content__title a {

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

@@ -31,7 +31,7 @@ const Content = (props) => {
         text && (react_1.default.createElement("div", { className: b('text', { ['without-title']: !hasTitle }) },
             react_1.default.createElement(components_1.YFMWrapper, { content: text, modifiers: { constructor: true, [`constructor-size-${size}`]: true }, id: textId }))),
         (list === null || list === void 0 ? void 0 : list.length) ? (react_1.default.createElement("div", { className: b('list') },
-            react_1.default.createElement(components_1.ContentList, { list: list, size: size, qa: qaAttributes.list }))) : null,
+            react_1.default.createElement(components_1.ContentList, { list: list, size: size, qa: qaAttributes.list, theme: theme }))) : null,
         additionalInfo && (react_1.default.createElement("div", { className: b('notice') },
             react_1.default.createElement(components_1.YFMWrapper, { content: additionalInfo, modifiers: {
                     constructor: true,

package/build/cjs/sub-blocks/LayoutItem/LayoutItem.js

@@ -6,6 +6,7 @@ const uikit_1 = require("@gravity-ui/uikit");
 const components_1 = require("../../components");
 const theme_1 = require("../../context/theme");
 const utils_1 = require("../../utils");
+const microdata_1 = require("../../utils/microdata");
 const Content_1 = tslib_1.__importDefault(require("../Content/Content"));
 const utils_2 = require("./utils");
 const b = (0, utils_1.block)('layout-item');
@@ -18,13 +19,20 @@ const LayoutItem = (_a) => {
     const contentProps = Object.assign(Object.assign({ controlPosition: areControlsInFooter ? 'bottom' : 'default' }, content), { links: normalizedLinks, size: 's', colSizes: { all: 12, md: 12 } });
     const titleId = (0, uikit_1.useUniqId)();
     const renderMedia = () => {
+        var _a;
         if (!media) {
             return null;
         }
         const themedMedia = (0, utils_1.getThemedValue)(media, theme);
+        const mediaWithMicrodata = (0, microdata_1.mergeVideoMicrodata)(themedMedia, {
+            name: typeof content.title === 'string'
+                ? (0, microdata_1.sanitizeMicrodata)(content.title)
+                : (0, microdata_1.sanitizeMicrodata)(((_a = content.title) === null || _a === void 0 ? void 0 : _a.text) || ''),
+            description: content.text ? (0, microdata_1.sanitizeMicrodata)(content.text) : undefined,
+        });
         return fullscreen && (0, utils_2.hasFullscreen)(themedMedia) ? (react_1.default.createElement(components_1.FullscreenMedia, { showFullscreenIcon: (0, utils_2.showFullscreenIcon)(themedMedia) }, (_a = {}) => {
             var { className: mediaClassName, fullscreen: _fullscreen } = _a, fullscreenMediaProps = tslib_1.__rest(_a, ["className", "fullscreen"]);
-            return (react_1.default.createElement(components_1.Media, Object.assign({}, themedMedia, fullscreenMediaProps, { className: b('media', { border }, mediaClassName), analyticsEvents: analyticsEvents })));
+            return (react_1.default.createElement(components_1.Media, Object.assign({}, mediaWithMicrodata, fullscreenMediaProps, { className: b('media', { border }, mediaClassName), analyticsEvents: analyticsEvents })));
         })) : (react_1.default.createElement(components_1.Media, Object.assign({}, themedMedia, { className: b('media', { border }), analyticsEvents: analyticsEvents })));
     };
     return (react_1.default.createElement("div", { className: b(null, className) },

package/build/cjs/utils/microdata.d.ts

@@ -0,0 +1,3 @@
+import { MediaProps } from '../models';
+export declare const mergeVideoMicrodata: (values?: MediaProps, newValues?: MediaProps['videoMicrodata']) => MediaProps;
+export declare function sanitizeMicrodata(html: string): string;

package/build/cjs/utils/microdata.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sanitizeMicrodata = exports.mergeVideoMicrodata = void 0;
+const tslib_1 = require("tslib");
+const sanitize_html_1 = tslib_1.__importDefault(require("sanitize-html"));
+const mergeVideoMicrodata = (values = {}, newValues = {}) => (Object.assign(Object.assign({}, values), { videoMicrodata: Object.assign(Object.assign({}, newValues), (values.videoMicrodata || {})) }));
+exports.mergeVideoMicrodata = mergeVideoMicrodata;
+function sanitizeMicrodata(html) {
+    return html && (0, sanitize_html_1.default)(html, { allowedTags: [], allowedAttributes: {} });
+}
+exports.sanitizeMicrodata = sanitizeMicrodata;

package/build/esm/blocks/Media/Media.js

@@ -4,10 +4,11 @@ import MediaBase from '../../components/MediaBase/MediaBase';
 import { useTheme } from '../../context/theme';
 import { block, getThemedValue } from '../../utils';
 import { getMediaBorder } from '../../utils/borderSelector';
+import { mergeVideoMicrodata, sanitizeMicrodata } from '../../utils/microdata';
 import './Media.css';
 const b = block('media-block');
 export const MediaBlock = (props) => {
-    const { media, border, disableShadow } = props;
+    const { media, border, disableShadow, title, description } = props;
     const borderSelected = getMediaBorder({
         border,
         disableShadow,
@@ -15,8 +16,12 @@ export const MediaBlock = (props) => {
     const [play, setPlay] = useState(false);
     const theme = useTheme();
     const mediaThemed = getThemedValue(media, theme);
+    const mediaWithMicrodata = mergeVideoMicrodata(mediaThemed, {
+        name: sanitizeMicrodata(title),
+        description: description ? sanitizeMicrodata(description) : undefined,
+    });
     return (React.createElement(MediaBase, Object.assign({}, props, { onScroll: () => setPlay(true) }),
         React.createElement(MediaBase.Card, null,
-            React.createElement(Media, Object.assign({ imageClassName: b('image') }, mediaThemed, { playVideo: play, className: b({ border: borderSelected }) })))));
+            React.createElement(Media, Object.assign({ imageClassName: b('image') }, mediaWithMicrodata, { playVideo: play, className: b({ border: borderSelected }) })))));
 };
 export default MediaBlock;

package/build/esm/blocks/PromoFeaturesBlock/PromoFeaturesBlock.js

@@ -8,6 +8,7 @@ import YFMWrapper from '../../components/YFMWrapper/YFMWrapper';
 import { BREAKPOINTS } from '../../constants';
 import { useTheme } from '../../context/theme';
 import { block, getThemedValue } from '../../utils';
+import { mergeVideoMicrodata, sanitizeMicrodata } from '../../utils/microdata';
 import './PromoFeaturesBlock.css';
 const b = block('PromoFeaturesBlock');
 const breakpointColumns = {
@@ -26,6 +27,10 @@ const PromoFeaturesBlock = (props) => {
             const blockModifier = backgroundTheme === 'default' ? 'default' : 'light';
             const themeMod = cardTheme || blockModifier || '';
             const themedMedia = getThemedValue(media, globalTheme);
+            const allProps = mergeVideoMicrodata(themedMedia, {
+                name: sanitizeMicrodata(cardTitle),
+                description: sanitizeMicrodata(text),
+            });
             return (React.createElement("div", { key: index, className: b('card', {
                     'no-media': !media,
                     [themeMod]: Boolean(themeMod),
@@ -34,7 +39,7 @@ const PromoFeaturesBlock = (props) => {
                     React.createElement("h3", { className: b('card-title') }, cardTitle),
                     React.createElement("div", { className: b('card-text') },
                         React.createElement(YFMWrapper, { content: text, modifiers: { constructor: true } }))),
-                media && React.createElement(Media, Object.assign({ className: b('card-media') }, themedMedia))));
+                media && React.createElement(Media, Object.assign({ className: b('card-media') }, allProps))));
         }))));
 };
 export default PromoFeaturesBlock;

package/build/esm/blocks/Questions/Questions.js

@@ -19,7 +19,7 @@ const QuestionsBlock = (props) => {
         }
         setOpened(newState);
     };
-    return (React.createElement("div", { className: b(), itemScope: true, itemType: FaqMicrodataValues.PageType },
+    return (React.createElement("div", { className: b(), itemScope: true, itemType: FaqMicrodataValues.PageType, itemID: FaqMicrodataValues.PageId },
         React.createElement(Row, null,
             React.createElement(Col, { sizes: { all: 12, md: 4 } },
                 React.createElement("div", { className: b('title') },

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

@@ -1,5 +1,6 @@
 export declare const FaqMicrodataValues: {
     readonly PageType: "https://schema.org/FAQPage";
+    readonly PageId: "/faq";
     readonly QuestionType: "https://schema.org/Question";
     readonly QuestionProp: "mainEntity";
     readonly QuestionNameProp: "name";

package/build/esm/blocks/Questions/models.js

@@ -1,5 +1,6 @@
 export const FaqMicrodataValues = {
     PageType: 'https://schema.org/FAQPage',
+    PageId: '/faq',
     QuestionType: 'https://schema.org/Question',
     QuestionProp: 'mainEntity',
     QuestionNameProp: 'name',

package/build/esm/blocks/Tabs/Tabs.js

@@ -11,6 +11,7 @@ import YFMWrapper from '../../components/YFMWrapper/YFMWrapper';
 import { useTheme } from '../../context/theme';
 import { Col, GridColumnOrderClasses, Row } from '../../grid';
 import { block, getThemedValue } from '../../utils';
+import { mergeVideoMicrodata, sanitizeMicrodata } from '../../utils/microdata';
 import TabsTextContent from './TabsTextContent/TabsTextContent';
 import './Tabs.css';
 const b = block('tabs-block');
@@ -60,14 +61,19 @@ export const TabsBlock = ({ items, title, description, animated, tabsColSizes, c
     const showMedia = Boolean((activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) || imageProps);
     const showText = Boolean(activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.text);
     const border = (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.border) || 'shadow';
-    const textContent = activeTabData && showText && (React.createElement(TabsTextContent, { showMedia: showMedia, data: activeTabData, imageProps: imageProps ? imageProps : undefined, isReverse: isReverse, contentSize: contentSize, centered: centered }));
+    const textContent = showText && (React.createElement(TabsTextContent, { showMedia: showMedia, data: activeTabData, imageProps: imageProps ? imageProps : undefined, isReverse: isReverse, contentSize: contentSize, centered: centered }));
     const mediaContent = showMedia && (React.createElement(Col, { sizes: { all: 12, md: 8 }, orders: {
             all: GridColumnOrderClasses.Last,
             md: GridColumnOrderClasses.First,
         }, className: b('col', { centered: centered }) },
         (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (React.createElement("div", { style: { minHeight: mediaVideoHeight || minImageHeight } },
             React.createElement("div", { ref: ref },
-                React.createElement(Media, Object.assign({}, getThemedValue(activeTabData.media, theme), { key: activeTab, className: b('media', { border }), playVideo: play, height: mediaVideoHeight || undefined, onImageLoad: handleImageHeight }))))),
+                React.createElement(Media, Object.assign({}, mergeVideoMicrodata(getThemedValue(activeTabData.media, theme), {
+                    name: activeTabData.tabName,
+                    description: activeTabData.caption
+                        ? sanitizeMicrodata(activeTabData.caption)
+                        : undefined,
+                }), { key: activeTab, className: b('media', { border }), playVideo: play, height: mediaVideoHeight || undefined, onImageLoad: handleImageHeight }))))),
         imageProps && (React.createElement(Fragment, null,
             React.createElement(FullscreenImage, Object.assign({}, imageProps, { imageClassName: b('image', { border }) })))),
         (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.caption) && (React.createElement("p", { className: b('caption'), id: captionId },

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

@@ -3,9 +3,9 @@ import './TabsTextContent.css';
 interface TextContentProps extends Pick<TabsBlockProps, 'centered' | 'contentSize'> {
     showMedia: boolean;
     isReverse: boolean;
-    data: TabsBlockItem;
+    data?: TabsBlockItem;
     centered?: boolean;
     imageProps?: ImageObjectProps | ImageDeviceProps;
 }
-export declare const TabsTextContent: ({ centered, contentSize, showMedia, data: { media, title, text, additionalInfo, link, links, buttons, list }, imageProps, isReverse, }: TextContentProps) => JSX.Element;
+export declare const TabsTextContent: ({ centered, contentSize, showMedia, data, imageProps, isReverse, }: TextContentProps) => JSX.Element | null;
 export default TabsTextContent;

package/build/esm/blocks/Tabs/TabsTextContent/TabsTextContent.js

@@ -4,10 +4,16 @@ import { Content } from '../../../sub-blocks';
 import { block } from '../../../utils';
 import './TabsTextContent.css';
 const b = block('tabs-block-text-content');
-export const TabsTextContent = ({ centered, contentSize = 's', showMedia, data: { media, title, text, additionalInfo, link, links, buttons, list }, imageProps, isReverse, }) => (React.createElement(Col, { sizes: { all: 12, md: showMedia ? 4 : 8 }, className: b({ centered: centered }) },
-    React.createElement("div", { className: b('wrapper', {
-            reverse: isReverse,
-            'no-image': !(media || imageProps),
-        }) },
-        React.createElement(Content, { title: title, text: text, additionalInfo: additionalInfo, size: contentSize, list: list, links: [...(link ? [link] : []), ...(links || [])], buttons: buttons, colSizes: { all: 12 } }))));
+export const TabsTextContent = ({ centered, contentSize = 's', showMedia, data, imageProps, isReverse, }) => {
+    if (!data) {
+        return null;
+    }
+    const { media, title, text, additionalInfo, link, links, buttons, list } = data;
+    return (React.createElement(Col, { sizes: { all: 12, md: showMedia ? 4 : 8 }, className: b({ centered: centered }) },
+        React.createElement("div", { className: b('wrapper', {
+                reverse: isReverse,
+                'no-image': !(media || imageProps),
+            }) },
+            React.createElement(Content, { title: title, text: text, additionalInfo: additionalInfo, size: contentSize, list: list, links: [...(link ? [link] : []), ...(links || [])], buttons: buttons, colSizes: { all: 12 } }))));
+};
 export default TabsTextContent;