@gravity-ui/page-constructor 2.2.1-alpha.0 → 2.2.1

package/build/cjs/blocks/Preview/MediaContent/MediaContent.css

@@ -0,0 +1,50 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-preview-media-content-block__header {
+  margin-bottom: 24px;
+}
+.pc-preview-media-content-block__menu {
+  padding: 0;
+}
+.pc-preview-media-content-block__title {
+  font-size: var(--yc-text-display-1-font-size);
+  line-height: var(--yc-text-display-1-line-height);
+  font-weight: 500;
+  position: relative;
+}
+.pc-preview-media-content-block__description {
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+  margin-top: 12px;
+  position: relative;
+}
+.pc-preview-media-content-block__content, .pc-preview-media-content-block__media {
+  padding: 0;
+}
+@media (max-width: 769px) {
+  .pc-preview-media-content-block__menu.col {
+    overflow-y: auto;
+    margin-bottom: 16px;
+    padding: 0;
+  }
+  .pc-preview-media-content-block__content-wrapper {
+    width: fit-content;
+    display: flex;
+  }
+  .pc-preview-media-content-block__content-wrapper div.preview-content-block__content-wrapper:first-child div.preview-content-block__content_active {
+    margin-left: 0;
+  }
+  .pc-preview-media-content-block__content-wrapper div.preview-content-block__content-wrapper:last-child div.preview-content-block__content_active {
+    margin-right: 0;
+  }
+}
+@media (min-width: 577px) and (max-width: 769px) {
+  .pc-preview-media-content-block__header, .pc-preview-media-content-block__content-wrapper {
+    padding: 0 32px;
+  }
+}
+@media (max-width: 577px) {
+  .pc-preview-media-content-block__header, .pc-preview-media-content-block__content-wrapper {
+    padding: 0 20px;
+  }
+}

package/build/cjs/blocks/Preview/MediaContent/MediaContent.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { PreviewItemProps, PreviewRatioMediaContent, Refable } from '../../../models';
+interface MediaContentProps extends Refable<HTMLDivElement> {
+    items: PreviewItemProps[];
+    title: string;
+    description?: string;
+    ratioMediaContent?: PreviewRatioMediaContent;
+    switching: boolean;
+    isActiveBlock: (id: number, isMediaBlock?: boolean) => boolean;
+    showMediaContent: (id: number) => void;
+}
+declare const MediaContent: React.ForwardRefExoticComponent<Pick<MediaContentProps, "title" | "items" | "description" | "ratioMediaContent" | "switching" | "isActiveBlock" | "showMediaContent"> & React.RefAttributes<HTMLDivElement>>;
+export default MediaContent;

package/build/cjs/blocks/Preview/MediaContent/MediaContent.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const utils_1 = require("../../../utils");
+const grid_1 = require("../../../grid");
+const components_1 = require("../../../components/");
+const PreviewContent_1 = tslib_1.__importDefault(require("./PreviewContent"));
+const PreviewMedia_1 = tslib_1.__importDefault(require("./PreviewMedia"));
+const ThemeValueContext_1 = require("../../../context/theme/ThemeValueContext");
+const b = (0, utils_1.block)('preview-media-content-block');
+const MediaContent = (0, react_1.forwardRef)((props, ref) => {
+    const { items, title, description = '', switching, ratioMediaContent = '1-1', isActiveBlock, showMediaContent, } = props;
+    const { themeValue: theme } = (0, react_1.useContext)(ThemeValueContext_1.ThemeValueContext);
+    const [mediaSizes, setMediaSizes] = (0, react_1.useState)({ [grid_1.GridColumnSize.All]: 12 });
+    const [contentSizes, setContentSizes] = (0, react_1.useState)({ [grid_1.GridColumnSize.All]: 12 });
+    (0, react_1.useEffect)(() => {
+        const [mediaSize, contentSize] = ratioMediaContent.split('-');
+        const blockSize = 12 / (Number(mediaSize) + Number(contentSize));
+        const updatedMediaSizes = Object.assign(Object.assign({}, mediaSizes), { [grid_1.GridColumnSize.Md]: blockSize * Number(mediaSize) });
+        setMediaSizes(updatedMediaSizes);
+        const updatedContentSizes = Object.assign(Object.assign({}, contentSizes), { [grid_1.GridColumnSize.Md]: blockSize * Number(contentSize) });
+        setContentSizes(updatedContentSizes);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [ratioMediaContent]);
+    const contentComponents = [];
+    const mediaComponents = [];
+    items.forEach((item, id) => {
+        const { content, media } = item;
+        const isActive = isActiveBlock(id);
+        const contentMods = { active: isActive };
+        const mediaMods = { active: isActiveBlock(id, true) };
+        const onClick = () => showMediaContent(id);
+        contentComponents.push(react_1.default.createElement(PreviewContent_1.default, Object.assign({ key: id, id: id }, content, { switching: switching, onClick: onClick, mods: contentMods })));
+        mediaComponents.push(react_1.default.createElement(PreviewMedia_1.default, { key: id, id: id, media: media && (0, utils_1.getThemedValue)(media, theme), play: isActive, mods: mediaMods }));
+    });
+    return (react_1.default.createElement(react_1.Fragment, null,
+        react_1.default.createElement(grid_1.Col, { sizes: contentSizes, className: b('content') },
+            react_1.default.createElement("div", { className: b('header') },
+                react_1.default.createElement("h2", { className: b('title') },
+                    react_1.default.createElement(components_1.HTML, null, title)),
+                description && (react_1.default.createElement("div", { className: b('description') },
+                    react_1.default.createElement(components_1.YFMWrapper, { content: description, modifiers: { constructor: true } })))),
+            react_1.default.createElement(grid_1.Col, { ref: ref, className: b('menu') },
+                react_1.default.createElement("div", { className: b('content-wrapper') }, contentComponents))),
+        react_1.default.createElement(grid_1.Col, { sizes: mediaSizes, className: b('media') }, mediaComponents)));
+});
+MediaContent.displayName = 'MediaContent';
+exports.default = MediaContent;

package/build/cjs/blocks/Preview/MediaContent/PreviewContent.css

@@ -0,0 +1,106 @@
+.pc-preview-content-block__title {
+  margin: 0;
+}
+
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-preview-content-block__content {
+  height: 100%;
+  display: block;
+  cursor: pointer;
+  border-radius: var(--pc-border-radius);
+  overflow: hidden;
+  position: relative;
+  background: var(--yc-color-base-background);
+}
+.pc-preview-content-block__content > .pc-preview-content-block__description {
+  overflow: hidden;
+}
+.pc-preview-content-block__loader-block {
+  height: 100%;
+  width: 0%;
+  background: var(--yc-color-base-background);
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.pc-preview-content-block__loader-block_auto {
+  transition: background-color 1s ease, width 300ms linear;
+}
+.pc-preview-content-block__loader-block_active {
+  background-color: var(--yc-color-promo-highlight-sky);
+  width: 100%;
+}
+.pc-preview-content-block__loader-block_active.pc-preview-content-block__loader-block_auto {
+  transition: background-color 1s ease, width 5s linear;
+}
+.pc-preview-content-block__title {
+  font-size: var(--yc-text-header-1-font-size);
+  line-height: var(--yc-text-header-1-line-height);
+  color: var(--pc-text-header-color);
+  font-weight: var(--yc-text-accent-font-weight);
+  position: relative;
+}
+.pc-preview-content-block__description {
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+  position: relative;
+}
+@media (min-width: 769px) {
+  .pc-preview-content-block__content {
+    padding: 16px 24px;
+    margin: 0;
+    transition: background-color 0.5s ease-in, margin-top 300ms ease, margin-bottom 300ms ease;
+  }
+  .pc-preview-content-block__content > .pc-preview-content-block__description {
+    height: 0px;
+    transition: height 300ms ease, padding-top 300ms ease;
+  }
+  .pc-preview-content-block__content > .pc-preview-content-block__description > span {
+    color: transparent;
+    transition: color 300ms ease;
+  }
+  .pc-preview-content-block__content > .pc-preview-content-block__title:hover {
+    color: var(--yc-color-text-link);
+  }
+  .pc-preview-content-block__content_active {
+    padding: 24px;
+    margin: 16px 0;
+    background: var(--yc-color-promo-base-silver);
+    transition: background-color 300ms ease-in, margin 300ms ease, padding 300ms ease;
+  }
+  .pc-preview-content-block__content_active > .pc-preview-content-block__description {
+    padding-top: 12px;
+  }
+  .pc-preview-content-block__content_active > .pc-preview-content-block__description > span {
+    color: var(--yc-color-text-primary);
+  }
+  .pc-preview-content-block__content_active > .pc-preview-content-block__title:hover {
+    color: var(--yc-color-text-primary);
+  }
+}
+@media (max-width: 769px) {
+  .pc-preview-content-block__content {
+    width: 275px;
+    padding: 24px;
+    padding-bottom: 32px;
+    transition: background-color 0.5s ease-in;
+  }
+  .pc-preview-content-block__content_active {
+    margin: 0 16px;
+    background: var(--yc-color-promo-base-silver);
+    transition: background-color 300ms ease-in;
+  }
+  .pc-preview-content-block__content > .pc-preview-content-block__description {
+    padding-top: 12px;
+  }
+  .pc-preview-content-block__content > .pc-preview-content-block__description > span {
+    color: var(--yc-color-text-primary);
+  }
+  .pc-preview-content-block__content > .pc-preview-content-block__description {
+    display: block;
+  }
+  .pc-preview-content-block .preview-block__row_reverse__content {
+    margin-left: 0;
+  }
+}

package/build/cjs/blocks/Preview/MediaContent/PreviewContent.d.ts

@@ -0,0 +1,11 @@
+import { Modifiers } from '../../../models';
+interface PreviewContentProps {
+    id: number;
+    title: string;
+    description?: string;
+    switching: boolean;
+    onClick: () => void;
+    mods: Modifiers | null;
+}
+declare const PreviewContent: (props: PreviewContentProps) => JSX.Element;
+export default PreviewContent;

package/build/cjs/blocks/Preview/MediaContent/PreviewContent.js

@@ -0,0 +1,17 @@
+"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 YFMWrapper_1 = tslib_1.__importDefault(require("../../../components/YFMWrapper/YFMWrapper"));
+const b = (0, utils_1.block)('preview-content-block');
+const PreviewContent = (props) => {
+    const { id, title, description = '', switching, onClick, mods } = props;
+    return (react_1.default.createElement("div", { key: id, className: b('content-wrapper') },
+        react_1.default.createElement("div", { className: b('content', mods), onClick: onClick },
+            react_1.default.createElement("div", { className: b('loader-block', Object.assign(Object.assign({}, mods), { auto: switching })) }),
+            react_1.default.createElement("h2", { className: b('title') }, title),
+            description && (react_1.default.createElement("div", { className: b('description') },
+                react_1.default.createElement(YFMWrapper_1.default, { content: description, modifiers: { constructor: true } }))))));
+};
+exports.default = PreviewContent;

package/build/cjs/blocks/Preview/MediaContent/PreviewMedia.css

@@ -0,0 +1,54 @@
+.pc-preview-media-block__title {
+  margin: 0;
+}
+
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+@media (min-width: 769px) {
+  .pc-preview-media-block.pc-AnimateBlock .pc-preview-media-block __media, .pc-AnimateBlock .pc-preview-media-block .pc-preview-media-block __media {
+    position: relative;
+    top: 100px;
+    opacity: 0;
+  }
+  .pc-preview-media-block.pc-AnimateBlock.animate .pc-preview-media-block __media, .pc-AnimateBlock .pc-preview-media-block.animate .pc-preview-media-block __media {
+    top: 0;
+    opacity: 1;
+    transition: top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    transition-delay: 0s;
+  }
+}
+.pc-preview-media-block__title {
+  font-size: var(--yc-text-display-2-font-size);
+  line-height: var(--yc-text-display-2-line-height);
+  color: var(--pc-text-header-color);
+  font-weight: var(--yc-text-accent-font-weight);
+}
+@media (max-width: 576px) {
+  .pc-preview-media-block__title {
+    font-size: var(--yc-text-display-1-font-size);
+    line-height: var(--yc-text-display-1-line-height);
+  }
+}
+.pc-preview-media-block__media {
+  box-shadow: 0 2px 8px var(--pc-color-sfx-shadow), 0 4px 24px var(--pc-color-sfx-shadow);
+  overflow-x: hidden;
+  border-radius: var(--pc-border-radius);
+  overflow: hidden;
+  display: none;
+}
+.pc-preview-media-block__media img {
+  width: 100%;
+}
+.pc-preview-media-block__media img,
+.pc-preview-media-block__media video,
+.pc-preview-media-block__media iframe {
+  border-radius: var(--pc-border-radius);
+}
+.pc-preview-media-block__media_active {
+  display: block;
+}
+@media (max-width: 769px) {
+  .pc-preview-media-block__media_active {
+    width: 100%;
+  }
+}

package/build/cjs/blocks/Preview/MediaContent/PreviewMedia.d.ts

@@ -0,0 +1,9 @@
+import { MediaProps, Modifiers } from '../../../models';
+interface PreviewMediaProps {
+    id: number;
+    media: MediaProps;
+    play: boolean;
+    mods: Modifiers | null;
+}
+declare const PreviewMedia: (props: PreviewMediaProps) => JSX.Element;
+export default PreviewMedia;

package/build/cjs/blocks/Preview/MediaContent/PreviewMedia.js

@@ -0,0 +1,13 @@
+"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 Media_1 = tslib_1.__importDefault(require("../../../components/Media/Media"));
+const b = (0, utils_1.block)('preview-media-block');
+const PreviewMedia = (props) => {
+    const { id, media, play, mods } = props;
+    return (react_1.default.createElement("div", { key: id, className: b('media', mods) },
+        react_1.default.createElement(Media_1.default, Object.assign({}, media, { playVideo: play }))));
+};
+exports.default = PreviewMedia;

package/build/cjs/blocks/Preview/Preview.css

@@ -0,0 +1,50 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-preview-block__row > * {
+  height: fit-content;
+  margin: auto;
+}
+.pc-preview-block__row_reverse {
+  flex-direction: row-reverse;
+}
+.pc-preview-block__row > .col.pc-preview-media-content-block__media {
+  padding: 0 16px;
+}
+@media (min-width: 769px) {
+  .pc-preview-block__row {
+    display: flex;
+  }
+  .pc-preview-block__row > .col.pc-preview-media-content-block__content {
+    padding: 0 48px 0 16px;
+  }
+  .pc-preview-block__row_reverse > .col.pc-preview-media-content-block__content {
+    padding: 0 16px 0 48px;
+  }
+}
+@media (min-width: 577px) and (max-width: 769px) {
+  .pc-preview-block__row_reverse {
+    flex-direction: row;
+  }
+  .pc-preview-block__row > .col.pc-preview-media-content-block__content {
+    padding: 0;
+  }
+  .pc-preview-block__row > .col.pc-preview-media-content-block__media {
+    padding: 0 32px;
+  }
+  .pc-preview-block .pc-preview-block__row_reverse.row, .pc-preview-block .pc-preview-block__row.row {
+    margin-left: -32px;
+    margin-right: -32px;
+  }
+}
+@media (max-width: 577px) {
+  .pc-preview-block__row > .col.pc-preview-media-content-block__content {
+    padding: 0;
+  }
+  .pc-preview-block__row > .col.pc-preview-media-content-block__media {
+    padding: 0 20px;
+  }
+  .pc-preview-block .pc-preview-block__row_reverse.row, .pc-preview-block .pc-preview-block__row.row {
+    margin-left: -20px;
+    margin-right: -20px;
+  }
+}

package/build/cjs/blocks/Preview/Preview.d.ts

@@ -0,0 +1,3 @@
+import { PreviewBlockProps } from '../../models';
+export declare const PreviewBlock: (props: PreviewBlockProps) => JSX.Element;
+export default PreviewBlock;

package/build/cjs/blocks/Preview/Preview.js

@@ -0,0 +1,130 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PreviewBlock = void 0;
+const tslib_1 = require("tslib");
+const utils_1 = require("../../utils");
+const react_1 = tslib_1.__importStar(require("react"));
+const breakpointContext_1 = require("../../context/breakpointContext");
+const AnimateBlock_1 = tslib_1.__importDefault(require("../../components/AnimateBlock/AnimateBlock"));
+const MediaContent_1 = tslib_1.__importDefault(require("./MediaContent/MediaContent"));
+const grid_1 = require("../../grid");
+const constants_1 = require("../../constants");
+const useIntersection_1 = require("../../hooks/useIntersection");
+const b = (0, utils_1.block)('preview-block');
+const SWITCHING_INTERVAL = 5 * 1000;
+const WIDTH_MENU_ITEM_MD_SIZE = 275;
+const INDENT_MENU_ITEM_MD_SIZE = 16;
+const SCROLL_ITEM_SECONDS = 1;
+const SCROLL_ITEM_SPEED = 2;
+const CLASSNAME_DESCRIPTION_YFM_BLOCK = 'yfm';
+const CLASSNAME_CONTENT_WRAPPER = 'preview-media-content-block__content-wrapper';
+const INDENT_BETWEEN_TITLE_DESCRIPTION = 16;
+const PreviewBlock = (props) => {
+    const { direction = 'content-media', animated, items, title, description, ratioMediaContent = '1-1', stopVideo = false, 
+    // TODO YDB-server doesn't see previewRef.current and doesn't update the component CLOUDFRONT-9395
+    showImmediately = false, } = props;
+    const breakpoint = (0, react_1.useContext)(breakpointContext_1.BreakpointContext);
+    const isDesktop = breakpoint >= constants_1.BREAKPOINTS.md;
+    const menuRef = react_1.default.useRef(null);
+    const previewRef = react_1.default.useRef(null);
+    const inViewport = (0, useIntersection_1.useIntersection)(previewRef.current);
+    const [stopSwitching, setStopSwitching] = (0, react_1.useState)(stopVideo);
+    const [activeSlide, setActiveSlide] = (0, react_1.useState)(-1);
+    const [autoSwitchTimerId, setAutoSwitchTimerId] = (0, react_1.useState)(0);
+    const isActiveBlock = (0, react_1.useCallback)((id, isMediaBlock = false) => {
+        return isMediaBlock || inViewport ? activeSlide === id : false;
+    }, [inViewport, activeSlide]);
+    const changeActiveSlide = (0, react_1.useCallback)((params) => {
+        const { current, nextSlide, currentSlide, timerId } = params;
+        if (isDesktop) {
+            changeDescriptionHeight(current, nextSlide, currentSlide);
+        }
+        else {
+            changeMenuScroll(current, nextSlide, currentSlide);
+        }
+        setActiveSlide(nextSlide);
+        clearTimeout(timerId);
+    }, [isDesktop]);
+    (0, react_1.useEffect)(() => {
+        // TODO YDB-server doesn't see previewRef.current and doesn't update the component CLOUDFRONT-9395
+        if (!items[activeSlide] && (showImmediately || inViewport)) {
+            setActiveSlide(0);
+            if (isDesktop) {
+                changeDescriptionHeight(menuRef.current, 0);
+            }
+        }
+    }, [inViewport, activeSlide, isDesktop, items, showImmediately]);
+    (0, react_1.useEffect)(() => {
+        if (stopSwitching || !inViewport) {
+            return () => { };
+        }
+        const timerId = setTimeout(() => {
+            if (stopSwitching) {
+                clearTimeout(timerId);
+                return;
+            }
+            const nextSlide = activeSlide + 1 >= items.length ? 0 : activeSlide + 1;
+            changeActiveSlide({
+                current: menuRef.current,
+                nextSlide,
+                currentSlide: activeSlide,
+                timerId: timerId,
+            });
+        }, SWITCHING_INTERVAL);
+        setAutoSwitchTimerId(timerId);
+        return () => clearTimeout(timerId);
+    }, [changeActiveSlide, activeSlide, items.length, stopSwitching, inViewport]);
+    const showMediaContent = (0, react_1.useCallback)((nextSlide) => {
+        changeActiveSlide({
+            current: menuRef.current,
+            nextSlide,
+            currentSlide: activeSlide,
+            timerId: autoSwitchTimerId,
+        });
+        setStopSwitching(true);
+    }, [changeActiveSlide, activeSlide, autoSwitchTimerId]);
+    return (react_1.default.createElement(AnimateBlock_1.default, { className: b(), animate: animated },
+        react_1.default.createElement(grid_1.Row, { ref: previewRef, className: b('row', { reverse: direction === 'media-content' }) },
+            react_1.default.createElement(MediaContent_1.default, { ref: menuRef, items: items, title: title, description: description, ratioMediaContent: ratioMediaContent, switching: !stopSwitching, isActiveBlock: isActiveBlock, showMediaContent: showMediaContent }))));
+};
+exports.PreviewBlock = PreviewBlock;
+function changeMenuScroll(element, nextSlide, activeSlide) {
+    if (!element) {
+        return;
+    }
+    const scrollPosition = element.scrollLeft;
+    const endPosition = nextSlide === 0 ? 0 : nextSlide * WIDTH_MENU_ITEM_MD_SIZE + INDENT_MENU_ITEM_MD_SIZE;
+    const distance = Math.abs(scrollPosition - endPosition);
+    const isReverse = nextSlide === 0 || nextSlide < activeSlide;
+    const scrollOptions = {
+        distance,
+        timeSeconds: SCROLL_ITEM_SECONDS,
+        speed: SCROLL_ITEM_SPEED,
+        reverseParams: isReverse ? { distance } : undefined,
+    };
+    (0, utils_1.doSmoothScroll)(element, scrollPosition, scrollOptions);
+}
+function changeDescriptionHeight(element, nextActiveSlide, prevActiveSlide = 0) {
+    const contentWrapper = element === null || element === void 0 ? void 0 : element.getElementsByClassName(CLASSNAME_CONTENT_WRAPPER);
+    if (!contentWrapper || contentWrapper.length === 0) {
+        return;
+    }
+    const menuItems = contentWrapper[0].children;
+    updateHeight(menuItems, nextActiveSlide);
+    if (nextActiveSlide !== prevActiveSlide) {
+        updateHeight(menuItems, prevActiveSlide, false);
+    }
+}
+function updateHeight(menuItems, slide, isExpand = true) {
+    const item = menuItems[slide];
+    const yfmBlock = item.getElementsByClassName(CLASSNAME_DESCRIPTION_YFM_BLOCK)[0];
+    if (yfmBlock) {
+        const yfmBlockElement = yfmBlock;
+        const yfmBlockHeight = yfmBlockElement.offsetHeight;
+        const yfmBlockOffsetParent = yfmBlockElement.offsetParent;
+        yfmBlockOffsetParent.style.height = isExpand
+            ? `${yfmBlockHeight + INDENT_BETWEEN_TITLE_DESCRIPTION}px`
+            : '0px';
+    }
+}
+exports.default = exports.PreviewBlock;

package/build/cjs/blocks/Preview/schema.d.ts

@@ -0,0 +1,40 @@
+export declare const PreviewBlock: {
+    'preview-block': {
+        additionalProperties: boolean;
+        required: string[];
+        properties: {
+            title: {
+                type: string;
+                contentType: string;
+            };
+            description: {
+                type: string;
+                contentType: string;
+            };
+            direction: {
+                type: string;
+                enum: string[];
+            };
+            ratioMediaContent: {
+                type: string;
+                enum: string[];
+            };
+            items: {
+                type: string;
+                items: {
+                    type: string;
+                    properties: {
+                        when: {
+                            type: string;
+                        };
+                    };
+                };
+            };
+            animated: {
+                type: string;
+            };
+            type: {};
+            when: {};
+        };
+    };
+};

package/build/cjs/blocks/Preview/schema.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PreviewBlock = void 0;
+const utils_1 = require("../../schema/validators/utils");
+const common_1 = require("../../schema/validators/common");
+const schema_1 = require("../Media/schema");
+const previewRatioMediaContent = ['2-1', '1-1'];
+const PreviewContentItem = {
+    additionalProperties: false,
+    required: ['title', 'description'],
+    properties: {
+        title: {
+            type: 'string',
+            contentType: 'text',
+        },
+        description: {
+            type: 'string',
+            contentType: 'yfm',
+        },
+    },
+};
+const PreviewItem = {
+    type: 'object',
+    additionalProperties: false,
+    required: ['type', 'media', 'content'],
+    properties: {
+        type: {
+            type: 'string',
+            enum: ['video', 'image'],
+        },
+        media: (0, common_1.withTheme)(schema_1.Media),
+        content: PreviewContentItem,
+    },
+};
+exports.PreviewBlock = {
+    'preview-block': {
+        additionalProperties: false,
+        required: ['title', 'items'],
+        properties: Object.assign(Object.assign(Object.assign({}, common_1.BaseProps), common_1.AnimatableProps), { title: {
+                type: 'string',
+                contentType: 'text',
+            }, description: {
+                type: 'string',
+                contentType: 'yfm',
+            }, direction: {
+                type: 'string',
+                enum: common_1.mediaDirection,
+            }, ratioMediaContent: {
+                type: 'string',
+                enum: previewRatioMediaContent,
+            }, items: (0, utils_1.filteredArray)(PreviewItem) }),
+    },
+};

package/build/cjs/blocks/Simple/Simple.css

@@ -0,0 +1,22 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+@media (min-width: 769px) {
+  .pc-simple-block.pc-AnimateBlock .pc-simple-block__animate-block, .pc-AnimateBlock .pc-simple-block .pc-simple-block__animate-block {
+    position: relative;
+    top: 100px;
+    opacity: 0;
+  }
+  .pc-simple-block.pc-AnimateBlock.animate .pc-simple-block__animate-block, .pc-AnimateBlock .pc-simple-block.animate .pc-simple-block__animate-block {
+    top: 0;
+    opacity: 1;
+    transition: top 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    transition-delay: 0.5s;
+  }
+}
+.pc-simple-block__animate-block {
+  margin-top: 20px;
+}
+.pc-simple-block__description {
+  margin-top: 16px;
+  font-size: var(--yc-text-body-2-font-size);
+}

package/build/cjs/blocks/Simple/Simple.d.ts

@@ -0,0 +1,3 @@
+import { SimpleBlockProps, WithChildren } from '../../models';
+export declare const SimpleBlock: (props: WithChildren<SimpleBlockProps>) => JSX.Element;
+export default SimpleBlock;

package/build/cjs/blocks/Simple/Simple.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SimpleBlock = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const utils_1 = require("../../utils");
+const AnimateBlock_1 = tslib_1.__importDefault(require("../../components/AnimateBlock/AnimateBlock"));
+const BlockHeader_1 = tslib_1.__importDefault(require("../../components/BlockHeader/BlockHeader"));
+const YFMWrapper_1 = tslib_1.__importDefault(require("../../components/YFMWrapper/YFMWrapper"));
+const b = (0, utils_1.block)('simple-block');
+const SimpleBlock = (props) => {
+    const { title, description, animated = true, children } = props;
+    const blockHeader = title && react_1.default.createElement(BlockHeader_1.default, { title: title });
+    return (react_1.default.createElement(AnimateBlock_1.default, { className: b(), animate: animated },
+        react_1.default.createElement("div", null,
+            blockHeader,
+            react_1.default.createElement("div", { className: b('description') },
+                react_1.default.createElement(YFMWrapper_1.default, { content: description, modifiers: { constructor: true } })),
+            react_1.default.createElement("div", { className: b('animate-block') }, children))));
+};
+exports.SimpleBlock = SimpleBlock;
+exports.default = exports.SimpleBlock;