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

package/build/esm/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/esm/components/ContentList/ContentList.d.ts

@@ -1,5 +1,5 @@
 import { ContentListProps } from '../../models';
 import { QAProps } from '../../models/common';
 import './ContentList.css';
-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/esm/components/ContentList/ContentList.js

@@ -15,9 +15,9 @@ function getHeadingLevel(size) {
             return 'h3';
     }
 }
-const ContentList = ({ list, size = 'l', qa }) => {
+const ContentList = ({ list, size = 'l', qa, theme }) => {
     const qaAttributes = getQaAttrubutes(qa, ['image', 'title', 'text']);
-    return (React.createElement("div", { className: b({ size }), "data-qa": qa }, list === null || list === void 0 ? void 0 : list.map((item) => {
+    return (React.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.createElement("div", { className: b('item', { 'without-title': !title }), key: uuidv4() },
             React.createElement(ItemIcon, { icon: icon, className: b('icon'), qa: qaAttributes.image }),

package/build/esm/components/Media/Media.js

@@ -1,4 +1,5 @@
-import React, { useMemo, useState } from 'react';
+import React, { useContext, useMemo, useState } from 'react';
+import { InnerContext } from '../../context/innerContext';
 import { block, getQaAttrubutes } from '../../utils';
 import IframeVideoBlock from '../VideoBlock/VideoBlock';
 import DataLens from './DataLens/DataLens';
@@ -9,8 +10,9 @@ import Video from './Video/Video';
 import './Media.css';
 const b = block('Media');
 export 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] = useState(false);
+    const { microdata } = useContext(InnerContext);
     const qaAttributes = getQaAttrubutes(qa, 'video');
     const content = useMemo(() => {
         let result = [];
@@ -77,6 +79,13 @@ export const Media = (props) => {
         autoplay,
         margins,
     ]);
-    return (React.createElement("div", { className: b(null, className), style: { backgroundColor: color }, "data-qa": qa }, content));
+    const videoMicrodataScript = 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.createElement("script", { type: "application/ld+json" }, json)) : null;
+    }, [microdata === null || microdata === void 0 ? void 0 : microdata.contentUpdatedDate, previewImg, video, videoIframe, videoMicrodata, youtube]);
+    return (React.createElement("div", { className: b(null, className), style: { backgroundColor: color }, "data-qa": qa },
+        videoMicrodataScript,
+        content));
 };
 export default Media;

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

@@ -1,6 +1,6 @@
 import { QAProps, TextSize, TitleItemProps } from '../../models';
 import './TitleItem.css';
-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/esm/containers/PageConstructor/PageConstructor.d.ts

@@ -11,6 +11,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/esm/containers/PageConstructor/PageConstructor.js

@@ -18,7 +18,7 @@ import { ConstructorRow } from './components/ConstructorRow';
 import './PageConstructor.css';
 const b = cnBlock('page-constructor');
 export const Constructor = (props) => {
-    const { content: { blocks = [], background } = {}, renderMenu, shouldRenderBlock, navigation, custom, } = props;
+    const { content: { blocks = [], background } = {}, renderMenu, shouldRenderBlock, navigation, custom, microdata, } = props;
     const { context } = useMemo(() => ({
         context: {
             blockTypes: [...BlockTypes, ...getCustomTypes(['blocks', 'headers'], custom)],
@@ -35,8 +35,9 @@ export const Constructor = (props) => {
             customization: {
                 decorators: custom === null || custom === void 0 ? void 0 : custom.decorators,
             },
+            microdata,
         },
-    }), [custom, shouldRenderBlock]);
+    }), [custom, shouldRenderBlock, microdata]);
     const theme = useTheme();
     const header = getHeaderBlock(blocks, context.headerBlockTypes);
     const restBlocks = getOrderedBlocks(blocks, context.headerBlockTypes);

package/build/esm/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/esm/context/innerContext/InnerContext.js

@@ -6,4 +6,5 @@ export const InnerContext = React.createContext({
     navigationBlockTypes: [],
     itemMap: {},
     navItemMap: {},
+    microdata: {},
 });

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

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

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

@@ -4,6 +4,7 @@ import { useUniqId } from '@gravity-ui/uikit';
 import { FullscreenMedia, IconWrapper, Media, MetaInfo } from '../../components';
 import { useTheme } from '../../context/theme';
 import { block, getThemedValue } from '../../utils';
+import { mergeVideoMicrodata, sanitizeMicrodata } from '../../utils/microdata';
 import Content from '../Content/Content';
 import { getLayoutItemLinks, hasFullscreen, showFullscreenIcon } from './utils';
 import './LayoutItem.css';
@@ -17,13 +18,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 = useUniqId();
     const renderMedia = () => {
+        var _a;
         if (!media) {
             return null;
         }
         const themedMedia = getThemedValue(media, theme);
+        const mediaWithMicrodata = mergeVideoMicrodata(themedMedia, {
+            name: typeof content.title === 'string'
+                ? sanitizeMicrodata(content.title)
+                : sanitizeMicrodata(((_a = content.title) === null || _a === void 0 ? void 0 : _a.text) || ''),
+            description: content.text ? sanitizeMicrodata(content.text) : undefined,
+        });
         return fullscreen && hasFullscreen(themedMedia) ? (React.createElement(FullscreenMedia, { showFullscreenIcon: showFullscreenIcon(themedMedia) }, (_a = {}) => {
             var { className: mediaClassName, fullscreen: _fullscreen } = _a, fullscreenMediaProps = __rest(_a, ["className", "fullscreen"]);
-            return (React.createElement(Media, Object.assign({}, themedMedia, fullscreenMediaProps, { className: b('media', { border }, mediaClassName), analyticsEvents: analyticsEvents })));
+            return (React.createElement(Media, Object.assign({}, mediaWithMicrodata, fullscreenMediaProps, { className: b('media', { border }, mediaClassName), analyticsEvents: analyticsEvents })));
         })) : (React.createElement(Media, Object.assign({}, themedMedia, { className: b('media', { border }), analyticsEvents: analyticsEvents })));
     };
     return (React.createElement("div", { className: b(null, className) },

package/build/esm/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/esm/utils/microdata.js

@@ -0,0 +1,5 @@
+import sanitize from 'sanitize-html';
+export const mergeVideoMicrodata = (values = {}, newValues = {}) => (Object.assign(Object.assign({}, values), { videoMicrodata: Object.assign(Object.assign({}, newValues), (values.videoMicrodata || {})) }));
+export function sanitizeMicrodata(html) {
+    return html && sanitize(html, { allowedTags: [], allowedAttributes: {} });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "5.28.6",
+  "version": "5.28.7-alpha.3",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {

package/server/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;