@gravity-ui/page-constructor 1.14.2 → 1.14.3

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [1.14.3](https://github.com/gravity-ui/page-constructor/compare/v1.14.2...v1.14.3) (2023-02-10)
+
+
+### Bug Fixes
+
+* remove unused card types ([#130](https://github.com/gravity-ui/page-constructor/issues/130)) ([22da2fa](https://github.com/gravity-ui/page-constructor/commit/22da2fadd433e12e84cf8afd238c369cff5f2c24))
+
 ## [1.14.2](https://github.com/gravity-ui/page-constructor/compare/v1.14.1...v1.14.2) (2023-02-02)
 
 

package/build/cjs/components/FullscreenImage/FullscreenImage.js

@@ -7,23 +7,25 @@ const utils_1 = require("../../utils");
 const Image_1 = tslib_1.__importDefault(require("../Image/Image"));
 const icons_1 = require("../../icons");
 const b = (0, utils_1.block)('FullScreenImage');
+const FULL_SCREEN_ICON_SIZE = 18;
+const CLOSE_ICON_SIZE = 30;
 const FullScreenImage = (props) => {
     const { imageClassName, modalImageClass, imageStyle } = props;
     const [isOpened, setIsOpened] = (0, react_1.useState)(false);
     const [isMouseEnter, setIsMouseEnter] = (0, react_1.useState)(false);
-    const openModal = (0, react_1.useCallback)(() => setIsOpened(true), []);
-    const closeModal = (0, react_1.useCallback)(() => setIsOpened(false), []);
-    const showFullScreenIcon = (0, react_1.useCallback)(() => setIsMouseEnter(true), []);
-    const hideFullScreenIcon = (0, react_1.useCallback)(() => setIsMouseEnter(false), []);
+    const openModal = () => setIsOpened(true);
+    const closeModal = () => setIsOpened(false);
+    const showFullScreenIcon = () => setIsMouseEnter(true);
+    const hideFullScreenIcon = () => setIsMouseEnter(false);
     return (react_1.default.createElement("div", { className: b() },
         react_1.default.createElement("div", { className: b('image-wrapper'), onMouseEnter: showFullScreenIcon, onMouseLeave: hideFullScreenIcon },
             react_1.default.createElement(Image_1.default, Object.assign({}, props, { className: b('image', imageClassName), onClick: openModal, style: imageStyle })),
             react_1.default.createElement("div", { className: b('icon-wrapper', { visible: isMouseEnter }), onClick: openModal },
-                react_1.default.createElement(uikit_1.Icon, { data: icons_1.FullScreen, width: 18, height: 18, className: b('icon') }))),
+                react_1.default.createElement(uikit_1.Icon, { data: icons_1.FullScreen, width: FULL_SCREEN_ICON_SIZE, height: FULL_SCREEN_ICON_SIZE, className: b('icon') }))),
         isOpened && (react_1.default.createElement(uikit_1.Modal, { open: isOpened, onClose: closeModal, className: b('modal') },
             react_1.default.createElement("div", { className: b('modal-content') },
                 react_1.default.createElement("div", { className: b('icon-wrapper', { visible: true }), onClick: closeModal },
-                    react_1.default.createElement(uikit_1.Icon, { data: icons_1.PreviewClose, width: 30, height: 30, className: b('icon', { hover: true }) })),
+                    react_1.default.createElement(uikit_1.Icon, { data: icons_1.PreviewClose, width: CLOSE_ICON_SIZE, height: CLOSE_ICON_SIZE, className: b('icon', { hover: true }) })),
                 react_1.default.createElement(Image_1.default, Object.assign({}, props, { className: b('modal-image', modalImageClass) })))))));
 };
 exports.default = FullScreenImage;

package/build/cjs/components/FullscreenMedia/FullScreenMedia.css

@@ -0,0 +1,70 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-full-screen-media__modal-media_type_youtube, .pc-full-screen-media__modal-media_type_video video, .pc-full-screen-media__modal-media_type_image {
+  display: block;
+  position: relative;
+  width: 100%;
+  max-width: 1232px;
+  max-height: 70vh;
+}
+
+.pc-full-screen-media__media {
+  cursor: pointer;
+}
+.pc-full-screen-media__media-wrapper {
+  cursor: pointer;
+  position: relative;
+}
+.pc-full-screen-media__modal-content {
+  position: relative;
+}
+.pc-full-screen-media__inline-media {
+  transform: translateZ(0);
+}
+.pc-full-screen-media__modal-media {
+  border-radius: var(--pc-border-radius);
+}
+.pc-full-screen-media__modal-media_type_youtube {
+  width: 70vw;
+  height: calc(70vw * 9 / 16);
+}
+.pc-full-screen-media__modal .yc-modal__content, .pc-full-screen-media__modal-image {
+  border-radius: var(--pc-border-radius);
+}
+.pc-full-screen-media__icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  right: 16px;
+  top: 16px;
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  background-color: var(--yc-color-base-simple-hover-solid);
+  cursor: pointer;
+  z-index: 10;
+}
+.pc-full-screen-media__modal-content .pc-full-screen-media__icon-wrapper, .pc-full-screen-media__media-wrapper .pc-full-screen-media__icon-wrapper {
+  opacity: 0;
+  transition: opacity 0.3s;
+  pointer-events: none;
+}
+.pc-full-screen-media__modal-content:hover .pc-full-screen-media__icon-wrapper, .pc-full-screen-media__media-wrapper:hover .pc-full-screen-media__icon-wrapper {
+  opacity: 1;
+  pointer-events: inherit;
+}
+.pc-full-screen-media__icon {
+  color: var(--yc-color-text-hint);
+}
+.pc-full-screen-media__icon_hover:hover {
+  color: var(--yc-color-text-secondary);
+}
+@media (max-width: 577px) {
+  .pc-full-screen-media__icon-wrapper {
+    display: none;
+  }
+  .pc-full-screen-media__modal {
+    display: none !important; /* stylelint-disable-line declaration-no-important */
+  }
+}

package/build/cjs/components/FullscreenMedia/FullScreenMedia.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { MediaAllProps } from '../Media/Media';
+export type ChildMediaRenderProps = Pick<MediaAllProps, 'fullScreen' | 'imageClassName' | 'videoClassName' | 'youtubeClassName' | 'className'>;
+export interface FullScreenMediaProps {
+    showFullScreenIcon?: boolean;
+    children: (props?: ChildMediaRenderProps) => JSX.Element;
+}
+declare const FullScreenMedia: ({ children, showFullScreenIcon }: FullScreenMediaProps) => JSX.Element;
+export default FullScreenMedia;

package/build/cjs/components/FullscreenMedia/FullScreenMedia.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
+const utils_1 = require("../../utils");
+const icons_1 = require("../../icons");
+const mobileContext_1 = require("../../context/mobileContext");
+const b = (0, utils_1.block)('full-screen-media');
+const FULL_SCREEN_ICON_SIZE = 18;
+const CLOSE_ICON_SIZE = 30;
+const getMediaClass = (type) => b('modal-media', { type });
+const FullScreenMedia = ({ children, showFullScreenIcon = true }) => {
+    const [isOpened, setIsOpened] = (0, react_1.useState)(false);
+    const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
+    const openModal = (e) => {
+        e.stopPropagation();
+        setIsOpened(true);
+    };
+    const closeModal = () => setIsOpened(false);
+    if (isMobile) {
+        return children();
+    }
+    return (react_1.default.createElement("div", { className: b() },
+        react_1.default.createElement("div", { className: b('media-wrapper'), onClickCapture: openModal },
+            children({ className: b('inline-media') }),
+            showFullScreenIcon && (react_1.default.createElement("div", { className: b('icon-wrapper'), onClickCapture: openModal },
+                react_1.default.createElement(uikit_1.Icon, { data: icons_1.FullScreen, width: FULL_SCREEN_ICON_SIZE, height: FULL_SCREEN_ICON_SIZE, className: b('icon') })))),
+        isOpened && (react_1.default.createElement(uikit_1.Modal, { open: isOpened, onClose: closeModal, className: b('modal') },
+            react_1.default.createElement("div", { className: b('modal-content') },
+                react_1.default.createElement("div", { className: b('icon-wrapper', { visible: true }), onClick: closeModal },
+                    react_1.default.createElement(uikit_1.Icon, { data: icons_1.PreviewClose, width: CLOSE_ICON_SIZE, height: CLOSE_ICON_SIZE, className: b('icon', { hover: true }) })),
+                children({
+                    imageClassName: getMediaClass('image'),
+                    videoClassName: getMediaClass('video'),
+                    youtubeClassName: getMediaClass('youtube'),
+                    fullScreen: true,
+                }))))));
+};
+exports.default = FullScreenMedia;

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

@@ -10,7 +10,7 @@ const Video_1 = tslib_1.__importDefault(require("./Video/Video"));
 const VideoBlock_1 = tslib_1.__importDefault(require("../VideoBlock/VideoBlock"));
 const b = (0, utils_1.block)('Media');
 const Media = (props) => {
-    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, } = props;
+    const { image, video, youtube, dataLens, color, height, previewImg, parallax = false, metrika, fullScreen, } = props;
     const { className, imageClassName, videoClassName, youtubeClassName, playVideo = true, isBackground, playButton, customBarControlsClassName, } = props;
     const [hasVideoFallback, setHasVideoFallback] = (0, react_1.useState)(false);
     const content = (0, react_1.useMemo)(() => {
@@ -22,7 +22,7 @@ const Media = (props) => {
             result.push(react_1.default.createElement(Video_1.default, { key: "video", video: video, videoClassName: videoClassName, height: height, metrika: metrika, playVideo: playVideo, previewImg: previewImg, playButton: playButton, customBarControlsClassName: customBarControlsClassName, hasVideoFallback: hasVideoFallback, setHasVideoFallback: setHasVideoFallback }));
         }
         if (youtube) {
-            result = (react_1.default.createElement(VideoBlock_1.default, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height }));
+            result = (react_1.default.createElement(VideoBlock_1.default, { className: b('youtube', youtubeClassName), record: youtube, attributes: { color: 'white', rel: '0' }, previewImg: previewImg, height: height, fullScreen: fullScreen }));
         }
         if (dataLens) {
             result = react_1.default.createElement(DataLens_1.default, { dataLens: dataLens });
@@ -45,6 +45,7 @@ const Media = (props) => {
         playButton,
         customBarControlsClassName,
         youtubeClassName,
+        fullScreen,
     ]);
     return (react_1.default.createElement("div", { className: b(null, className), style: { backgroundColor: color } }, content));
 };

package/build/cjs/components/MetaInfo/MetaInfo.css

@@ -0,0 +1,13 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-meta-info {
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+  display: flex;
+  align-items: center;
+  font-weight: 500;
+  color: var(--pc-media-card-meta-info-color);
+}
+.pc-meta-info__item:not(:first-child) {
+  margin-left: 16px;
+}

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

@@ -0,0 +1,6 @@
+import { ClassNameProps } from 'src/models';
+export interface MetaInfpoProps extends ClassNameProps {
+    items: string[];
+}
+declare const MetaInfo: ({ items, className }: MetaInfpoProps) => JSX.Element;
+export default MetaInfo;

package/build/cjs/components/MetaInfo/MetaInfo.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const utils_1 = require("../../utils");
+const b = (0, utils_1.block)('meta-info');
+const MetaInfo = ({ items, className }) => (react_1.default.createElement("div", { className: b(null, className) }, items.map((metaInfoItem) => (react_1.default.createElement("div", { key: metaInfoItem, className: b('item') }, metaInfoItem)))));
+exports.default = MetaInfo;

package/build/cjs/components/MetaInfo/schema.d.ts

@@ -0,0 +1,8 @@
+declare const metaInfo: {
+    type: string;
+    items: {
+        type: string;
+        contentType: string;
+    };
+};
+export default metaInfo;

package/build/cjs/components/MetaInfo/schema.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const metaInfo = {
+    type: 'array',
+    items: {
+        type: 'string',
+        contentType: 'text',
+    },
+};
+exports.default = metaInfo;

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

@@ -13,6 +13,7 @@ export interface VideoBlockProps {
     previewImg?: string;
     playButton?: React.ReactNode;
     height?: number;
+    fullScreen?: boolean;
 }
 declare const VideoBlock: (props: VideoBlockProps) => JSX.Element | null;
 export default VideoBlock;

package/build/cjs/components/VideoBlock/VideoBlock.js

@@ -4,6 +4,7 @@ exports.getHeight = exports.AUTOPLAY_ATTRIBUTES = void 0;
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importStar(require("react"));
 const lodash_1 = tslib_1.__importDefault(require("lodash"));
+const uuid_1 = require("uuid");
 const uikit_1 = require("@gravity-ui/uikit");
 const utils_1 = require("../../utils");
 const Image_1 = tslib_1.__importDefault(require("../Image/Image"));
@@ -18,7 +19,6 @@ exports.AUTOPLAY_ATTRIBUTES = {
     mute: 1,
 };
 const b = (0, utils_1.block)('VideoBlock');
-const iframeId = 'video-block';
 function getVideoSrc(stream, record) {
     if (!stream && !record) {
         return null;
@@ -38,14 +38,14 @@ function getHeight(width) {
 }
 exports.getHeight = getHeight;
 const VideoBlock = (props) => {
-    const { stream, record, attributes, className, id, previewImg, playButton, height } = props;
+    const { stream, record, attributes, className, id, previewImg, playButton, height, fullScreen } = props;
     const src = getVideoSrc(stream, record);
     const ref = (0, react_1.useRef)(null);
     const iframeRef = (0, react_1.useRef)();
     const [hidePreview, setHidePreview] = (0, react_1.useState)(false);
     const norender = (!stream && !record) || !src;
     const [currentHeight, setCurrentHeight] = (0, react_1.useState)(height || undefined);
-    const fullId = `${iframeId}-${id || src}`;
+    const fullId = id || (0, uuid_1.v4)();
     const onPreviewClick = (0, react_1.useCallback)(() => {
         if (iframeRef.current) {
             iframeRef.current.src = `${src}?${(0, utils_1.getPageSearchParams)(Object.assign(Object.assign({}, exports.AUTOPLAY_ATTRIBUTES), (attributes || {})))}`;
@@ -66,12 +66,8 @@ const VideoBlock = (props) => {
         if (norender) {
             return;
         }
-        const prevPageVideo = document.getElementById(fullId);
         const fullSrc = `${src}?${(0, utils_1.getPageSearchParams)(attributes || {})}`;
-        if (prevPageVideo) {
-            prevPageVideo.src = fullSrc;
-        }
-        else if (ref.current) {
+        if (ref.current && !iframeRef.current) {
             const iframe = document.createElement('iframe');
             iframe.id = fullId;
             iframe.src = fullSrc;
@@ -83,14 +79,14 @@ const VideoBlock = (props) => {
             ref.current.appendChild(iframe);
             iframeRef.current = iframe;
         }
-    }, [stream, record, norender, src, fullId, attributes, iframeRef]);
+    }, [stream, record, norender, src, fullId, attributes, iframeRef, fullScreen]);
     (0, react_1.useEffect)(() => {
         setHidePreview(false);
     }, [src, setHidePreview]);
     if (norender) {
         return null;
     }
-    return (react_1.default.createElement("div", { className: b(null, className), ref: ref, style: { height: currentHeight } }, previewImg && !hidePreview && (react_1.default.createElement("div", { className: b('preview'), onClick: onPreviewClick },
+    return (react_1.default.createElement("div", { className: b(null, className), ref: ref, style: { height: currentHeight } }, previewImg && !hidePreview && !fullScreen && (react_1.default.createElement("div", { className: b('preview'), onClick: onPreviewClick },
         react_1.default.createElement(Image_1.default, { src: previewImg, className: b('image'), containerClassName: b('image-wrapper') }),
         playButton || (react_1.default.createElement("button", { className: b('button') },
             react_1.default.createElement(uikit_1.Icon, { className: b('icon'), data: icons_1.PlayVideo, size: 24 })))))));

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

@@ -33,4 +33,6 @@ export { default as OverflowScroller } from './OverflowScroller/OverflowScroller
 export { default as Author } from './Author/Author';
 export { default as RouterLink } from './RouterLink/RouterLink';
 export { default as HTML } from './HTML/HTML';
+export { default as MetaInfo } from './MetaInfo/MetaInfo';
+export { default as FullScreenMedia } from './FullscreenMedia/FullScreenMedia';
 export type { RouterLinkProps } from './RouterLink/RouterLink';

package/build/cjs/components/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.HTML = exports.RouterLink = exports.Author = exports.OverflowScroller = exports.Control = exports.YandexForm = exports.YFMWrapper = exports.VideoBlock = exports.UnpublishedLabel = exports.ToggleArrow = exports.Title = exports.Table = exports.ReactPlayer = exports.OutsideClick = exports.Media = exports.Links = exports.Link = exports.Image = exports.HeightCalculator = exports.HeaderBreadcrumbs = exports.FullWidthBackground = exports.FullscreenImage = exports.Foldable = exports.FileLink = exports.ErrorWrapper = exports.CardBase = exports.Button = exports.BlockHeader = exports.BlockBase = exports.BalancedMasonry = exports.BackLink = exports.BackgroundMedia = exports.BackgroundImage = exports.AnimateBlock = exports.Anchor = void 0;
+exports.FullScreenMedia = exports.MetaInfo = exports.HTML = exports.RouterLink = exports.Author = exports.OverflowScroller = exports.Control = exports.YandexForm = exports.YFMWrapper = exports.VideoBlock = exports.UnpublishedLabel = exports.ToggleArrow = exports.Title = exports.Table = exports.ReactPlayer = exports.OutsideClick = exports.Media = exports.Links = exports.Link = exports.Image = exports.HeightCalculator = exports.HeaderBreadcrumbs = exports.FullWidthBackground = exports.FullscreenImage = exports.Foldable = exports.FileLink = exports.ErrorWrapper = exports.CardBase = exports.Button = exports.BlockHeader = exports.BlockBase = exports.BalancedMasonry = exports.BackLink = exports.BackgroundMedia = exports.BackgroundImage = exports.AnimateBlock = exports.Anchor = void 0;
 var Anchor_1 = require("./Anchor/Anchor");
 Object.defineProperty(exports, "Anchor", { enumerable: true, get: function () { return __importDefault(Anchor_1).default; } });
 var AnimateBlock_1 = require("./AnimateBlock/AnimateBlock");
@@ -74,3 +74,7 @@ var RouterLink_1 = require("./RouterLink/RouterLink");
 Object.defineProperty(exports, "RouterLink", { enumerable: true, get: function () { return __importDefault(RouterLink_1).default; } });
 var HTML_1 = require("./HTML/HTML");
 Object.defineProperty(exports, "HTML", { enumerable: true, get: function () { return __importDefault(HTML_1).default; } });
+var MetaInfo_1 = require("./MetaInfo/MetaInfo");
+Object.defineProperty(exports, "MetaInfo", { enumerable: true, get: function () { return __importDefault(MetaInfo_1).default; } });
+var FullScreenMedia_1 = require("./FullscreenMedia/FullScreenMedia");
+Object.defineProperty(exports, "FullScreenMedia", { enumerable: true, get: function () { return __importDefault(FullScreenMedia_1).default; } });

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

@@ -34,6 +34,10 @@ export declare const subBlockMap: {
     "media-card": ({ border, ...mediaProps }: import("./models").MediaCardProps) => JSX.Element;
     "banner-card": (props: import("./models").BannerCardProps) => JSX.Element;
     "news-card": (props: import("./models").NewsCardProps) => JSX.Element;
+    "layout-item": ({ content: { links, ...content }, metaInfo, media, border, fullScreen, className, }: import("./models").LayoutItemProps) => JSX.Element;
+    /**
+     * @deprecated Use LayoutItem
+     */
     "card-with-image": ({ title, description, image, disableCompress, links, border, fullScreen, className, additionalInfo, buttons, }: import("./models").CardWithImageProps) => JSX.Element;
     "background-card": (props: import("./models").BackgroundCardProps) => JSX.Element;
     "basic-card": (props: import("./models").BasicCardProps) => JSX.Element;

package/build/cjs/constructor-items.js

@@ -40,6 +40,10 @@ exports.subBlockMap = {
     [models_1.SubBlockType.MediaCard]: sub_blocks_1.MediaCard,
     [models_1.SubBlockType.BannerCard]: sub_blocks_1.BannerCard,
     [models_1.SubBlockType.NewsCard]: sub_blocks_1.NewsCard,
+    [models_1.SubBlockType.LayoutItem]: sub_blocks_1.LayoutItem,
+    /**
+     * @deprecated Use LayoutItem
+     */
     [models_1.SubBlockType.CardWithImage]: sub_blocks_1.CardWithImage,
     [models_1.SubBlockType.BackgroundCard]: sub_blocks_1.BackgroundCard,
     [models_1.SubBlockType.BasicCard]: sub_blocks_1.BasicCard,

package/build/cjs/containers/PageConstructor/PageConstructor.css

@@ -18,6 +18,7 @@ unpredictable css rules order in build */
   --pc-monochrome-button-background-color-hover: #393939;
   --pc-monochrome-button-color: var(--yc-color-text-light-primary);
   --pc-text-header-color: var(--yc-color-text-primary);
+  --pc-media-card-meta-info-color: var(--yc-color-text-secondary);
 }
 .yc-root.yc-root_theme_dark {
   --pc-color-sfx-shadow: var(--yc-color-sfx-shadow);

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

@@ -172,6 +172,7 @@ export interface MediaComponentVideoProps {
 export interface MediaComponentYoutubeProps {
     youtube: string;
     previewImg?: string;
+    fullScreen?: boolean;
 }
 export interface MediaComponentImageProps {
     image: ImageProps | ImageProps[] | ImageDeviceProps;
@@ -243,27 +244,10 @@ export interface TitleBaseProps {
     custom?: string | ReactNode;
     onClick?: () => void;
 }
-export interface CardData {
-    header?: CardHeader;
-    text?: string;
-    title?: string;
-    link?: LinkProps;
-    footer?: string;
-    url?: string;
-    service?: {
-        slug: string;
-        name: string;
-    };
-    links?: LinkProps[];
-}
 export type CardBorder = 'shadow' | 'line' | 'none';
 export interface CardBaseProps {
     border?: CardBorder;
 }
-export interface CardHeader {
-    title?: string;
-    image?: ImageProps;
-}
 export interface PriceDescriptionProps {
     title: string;
     detailedTitle?: string;

package/build/cjs/models/constructor-items/sub-blocks.d.ts

@@ -19,7 +19,11 @@ export declare enum SubBlockType {
      * @deprecated Will be moved to params use BasicCard instead
      */
     TutorialCard = "tutoral-card",
+    /**
+     * @deprecated Use LayoutItem
+     */
     CardWithImage = "card-with-image",
+    LayoutItem = "layout-item",
     BackgroundCard = "background-card",
     BasicCard = "basic-card",
     Content = "content",
@@ -125,6 +129,13 @@ export interface CardWithImageProps extends ClassNameProps, Pick<ContentBlockPro
     fullScreen?: boolean;
     links?: CardWithImageLinkProps[];
 }
+export interface LayoutItemProps extends ClassNameProps {
+    content: Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size'>;
+    media: MediaProps;
+    metaInfo?: string[];
+    border?: boolean;
+    fullScreen?: boolean;
+}
 export type DividerModel = {
     type: SubBlockType.Divider;
 } & DividerProps;
@@ -137,6 +148,9 @@ export type NewsCardModel = {
 export type CardWithImageModel = {
     type: SubBlockType.CardWithImage;
 } & CardWithImageProps;
+export type LayoutItemModel = {
+    type: SubBlockType.CardWithImage;
+} & LayoutItemProps;
 export type TutorialCardModel = {
     type: SubBlockType.TutorialCard;
 } & TutorialCardProps;

package/build/cjs/models/constructor-items/sub-blocks.js

@@ -17,7 +17,11 @@ var SubBlockType;
      * @deprecated Will be moved to params use BasicCard instead
      */
     SubBlockType["TutorialCard"] = "tutoral-card";
+    /**
+     * @deprecated Use LayoutItem
+     */
     SubBlockType["CardWithImage"] = "card-with-image";
+    SubBlockType["LayoutItem"] = "layout-item";
     SubBlockType["BackgroundCard"] = "background-card";
     SubBlockType["BasicCard"] = "basic-card";
     SubBlockType["Content"] = "content";

package/build/cjs/schema/index.js

@@ -55,6 +55,7 @@ function generateDefaultSchema(config) {
         'card-with-image',
         'quote',
         'basic-card',
+        'layout-item',
     ];
     const configBlockSchemaNames = Object.keys(blocks).filter((item) => !constructorBlockSchemaNames.includes(item));
     const configCardSchemaNames = Object.keys(cards).filter((item) => !constructorCardSchemaNames.includes(item));

package/build/cjs/schema/validators/sub-blocks.d.ts

@@ -6,6 +6,7 @@ export * from '../../sub-blocks/NewsCard/schema';
 export * from '../../sub-blocks/Partner/schema';
 export * from '../../sub-blocks/TutorialCard/schema';
 export * from '../../sub-blocks/CardWithImage/schema';
+export * from '../../sub-blocks/LayoutItem/schema';
 export * from '../../sub-blocks/Quote/schema';
 export * from '../../sub-blocks/Divider/schema';
 export * from '../../sub-blocks/BasicCard/schema';

package/build/cjs/schema/validators/sub-blocks.js

@@ -9,6 +9,7 @@ tslib_1.__exportStar(require("../../sub-blocks/NewsCard/schema"), exports);
 tslib_1.__exportStar(require("../../sub-blocks/Partner/schema"), exports);
 tslib_1.__exportStar(require("../../sub-blocks/TutorialCard/schema"), exports);
 tslib_1.__exportStar(require("../../sub-blocks/CardWithImage/schema"), exports);
+tslib_1.__exportStar(require("../../sub-blocks/LayoutItem/schema"), exports);
 tslib_1.__exportStar(require("../../sub-blocks/Quote/schema"), exports);
 tslib_1.__exportStar(require("../../sub-blocks/Divider/schema"), exports);
 tslib_1.__exportStar(require("../../sub-blocks/BasicCard/schema"), exports);

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

@@ -0,0 +1,16 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-layout-item__media {
+  width: 100%;
+  display: block;
+  border-radius: var(--pc-border-radius);
+}
+.pc-layout-item__media_border {
+  border: 1px solid var(--yc-color-line-generic);
+}
+.pc-layout-item__meta-info {
+  margin: 16px 0 -8px 0;
+}
+.pc-layout-item__content {
+  margin: 16px 16px 0 0;
+}

package/build/cjs/sub-blocks/LayoutItem/LayoutItem.d.ts

@@ -0,0 +1,3 @@
+import { LayoutItemProps } from '../../models';
+declare const LayoutItem: ({ content: { links, ...content }, metaInfo, media, border, fullScreen, className, }: LayoutItemProps) => JSX.Element;
+export default LayoutItem;

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const utils_1 = require("../../utils");
+const components_1 = require("../../components");
+const utils_2 = require("./utils");
+const __1 = require("..");
+const b = (0, utils_1.block)('layout-item');
+const LayoutItem = (_a) => {
+    var _b = _a.content, { links } = _b, content = tslib_1.__rest(_b, ["links"]), { metaInfo, media, border, fullScreen, className } = _a;
+    return (react_1.default.createElement("div", { className: b(null, className) },
+        fullScreen && (0, utils_2.hasFullScreen)(media) ? (react_1.default.createElement(components_1.FullScreenMedia, { showFullScreenIcon: (0, utils_2.showFullScreenIcon)(media) }, (_a = {}) => {
+            var { className: mediaClassName } = _a, fullScreenMediaProps = tslib_1.__rest(_a, ["className"]);
+            return (react_1.default.createElement(components_1.Media, Object.assign({}, media, fullScreenMediaProps, { className: b('media', { border }, mediaClassName) })));
+        })) : (react_1.default.createElement(components_1.Media, Object.assign({}, media, { className: b('media', { border }) }))),
+        metaInfo && react_1.default.createElement(components_1.MetaInfo, { items: metaInfo, className: b('meta-info') }),
+        react_1.default.createElement("div", { className: b('content') },
+            react_1.default.createElement(__1.Content, Object.assign({}, content, { links: (0, utils_2.getLayoutItemLinks)(links), size: "s", colSizes: { all: 12, md: 12 } })))));
+};
+exports.default = LayoutItem;