@gravity-ui/page-constructor 1.0.0

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 = (0, tslib_1.__importDefault)(require("react"));
+const utils_1 = require("../../../utils");
+const YFMWrapper_1 = (0, 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 = (0, tslib_1.__importDefault)(require("react"));
+const utils_1 = require("../../../utils");
+const Media_1 = (0, 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 = (0, tslib_1.__importStar)(require("react"));
+const breakpointContext_1 = require("../../context/breakpointContext");
+const AnimateBlock_1 = (0, tslib_1.__importDefault)(require("../../components/AnimateBlock/AnimateBlock"));
+const MediaContent_1 = (0, 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,38 @@
+export declare const PreviewBlock: {
+    'preview-block': {
+        additionalProperties: boolean;
+        required: string[];
+        properties: {
+            title: {
+                type: string;
+            };
+            description: {
+                type: 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,49 @@
+"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',
+        },
+        description: {
+            type: 'string',
+        },
+    },
+};
+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',
+            }, description: {
+                type: 'string',
+            }, direction: {
+                type: 'string',
+                enum: common_1.mediaDirection,
+            }, ratioMediaContent: {
+                type: 'string',
+                enum: previewRatioMediaContent,
+            }, items: (0, utils_1.filteredArray)(PreviewItem) }),
+    },
+};

package/build/cjs/blocks/PromoFeaturesBlock/PromoFeaturesBlock.css

@@ -0,0 +1,119 @@
+.pc-PromoFeaturesBlock__card-title {
+  margin: 0;
+}
+
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-PromoFeaturesBlock__card-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);
+}
+.pc-PromoFeaturesBlock__card-container {
+  display: flex;
+}
+.pc-PromoFeaturesBlock__card-container-column + .pc-PromoFeaturesBlock__card-container-column {
+  margin-left: calc(8px * 2);
+}
+.pc-PromoFeaturesBlock__header {
+  margin-bottom: 32px;
+}
+.pc-PromoFeaturesBlock__background {
+  background-color: inherit;
+}
+.pc-PromoFeaturesBlock__background_grey {
+  background-color: var(--yc-color-base-misc);
+}
+.pc-PromoFeaturesBlock_grey {
+  padding: 64px 0;
+}
+.pc-PromoFeaturesBlock__card {
+  color: inherit;
+  text-decoration: none;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  border-radius: var(--pc-border-radius);
+}
+.pc-PromoFeaturesBlock__card-info {
+  padding: 32px 32px 0 32px;
+}
+.pc-PromoFeaturesBlock__card-title {
+  margin-bottom: 8px;
+}
+.pc-PromoFeaturesBlock__card-text {
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+}
+.pc-PromoFeaturesBlock__card-media {
+  margin-top: 16px;
+}
+.pc-PromoFeaturesBlock__card + .pc-PromoFeaturesBlock__card {
+  margin-top: 16px;
+}
+.pc-PromoFeaturesBlock__card_no-media .pc-PromoFeaturesBlock__card-info {
+  padding: 32px;
+}
+.pc-PromoFeaturesBlock__card_light {
+  background-color: var(--yc-color-base-background);
+}
+.pc-PromoFeaturesBlock__card_default {
+  background-color: var(--yc-color-base-misc);
+}
+.pc-PromoFeaturesBlock__card_accent {
+  color: var(--yc-color-text-light-primary);
+  background-color: var(--yc-color-base-special);
+}
+.pc-PromoFeaturesBlock__card_accent .pc-PromoFeaturesBlock__card-title,
+.pc-PromoFeaturesBlock__card_accent .pc-PromoFeaturesBlock__card-text > .yfm * {
+  color: var(--yc-color-text-light-primary);
+}
+.pc-PromoFeaturesBlock__card_accent-light {
+  background-color: var(--yc-color-base-selection);
+}
+.pc-PromoFeaturesBlock__card_primary {
+  background-color: var(--yc-color-promo-base-gold);
+}
+@media (min-width: 769px) {
+  .pc-PromoFeaturesBlock.pc-AnimateBlock .pc-PromoFeaturesBlock__card-container-column, .pc-AnimateBlock .pc-PromoFeaturesBlock .pc-PromoFeaturesBlock__card-container-column {
+    position: relative;
+    top: 100px;
+    opacity: 0;
+  }
+  .pc-PromoFeaturesBlock.pc-AnimateBlock.animate .pc-PromoFeaturesBlock__card-container-column, .pc-AnimateBlock .pc-PromoFeaturesBlock.animate .pc-PromoFeaturesBlock__card-container-column {
+    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);
+  }
+  .pc-PromoFeaturesBlock.pc-AnimateBlock.animate .pc-PromoFeaturesBlock__card-container-column:nth-child(0), .pc-AnimateBlock .pc-PromoFeaturesBlock.animate .pc-PromoFeaturesBlock__card-container-column:nth-child(0) {
+    transition-delay: 0s;
+  }
+  .pc-PromoFeaturesBlock.pc-AnimateBlock.animate .pc-PromoFeaturesBlock__card-container-column:nth-child(1), .pc-AnimateBlock .pc-PromoFeaturesBlock.animate .pc-PromoFeaturesBlock__card-container-column:nth-child(1) {
+    transition-delay: 0.1s;
+  }
+  .pc-PromoFeaturesBlock.pc-AnimateBlock.animate .pc-PromoFeaturesBlock__card-container-column:nth-child(2), .pc-AnimateBlock .pc-PromoFeaturesBlock.animate .pc-PromoFeaturesBlock__card-container-column:nth-child(2) {
+    transition-delay: 0.2s;
+  }
+  .pc-PromoFeaturesBlock.pc-AnimateBlock.animate .pc-PromoFeaturesBlock__card-container-column:nth-child(3), .pc-AnimateBlock .pc-PromoFeaturesBlock.animate .pc-PromoFeaturesBlock__card-container-column:nth-child(3) {
+    transition-delay: 0.3s;
+  }
+  .pc-PromoFeaturesBlock.pc-AnimateBlock.animate .pc-PromoFeaturesBlock__card-container-column:nth-child(4), .pc-AnimateBlock .pc-PromoFeaturesBlock.animate .pc-PromoFeaturesBlock__card-container-column:nth-child(4) {
+    transition-delay: 0.4s;
+  }
+  .pc-PromoFeaturesBlock.pc-AnimateBlock.animate .pc-PromoFeaturesBlock__card-container-column:nth-child(5), .pc-AnimateBlock .pc-PromoFeaturesBlock.animate .pc-PromoFeaturesBlock__card-container-column:nth-child(5) {
+    transition-delay: 0.5s;
+  }
+  .pc-PromoFeaturesBlock.pc-AnimateBlock.animate .pc-PromoFeaturesBlock__card-container-column:nth-child(6), .pc-AnimateBlock .pc-PromoFeaturesBlock.animate .pc-PromoFeaturesBlock__card-container-column:nth-child(6) {
+    transition-delay: 0.6s;
+  }
+  .pc-PromoFeaturesBlock.pc-AnimateBlock.animate .pc-PromoFeaturesBlock__card-container-column:nth-child(7), .pc-AnimateBlock .pc-PromoFeaturesBlock.animate .pc-PromoFeaturesBlock__card-container-column:nth-child(7) {
+    transition-delay: 0.7s;
+  }
+  .pc-PromoFeaturesBlock.pc-AnimateBlock.animate .pc-PromoFeaturesBlock__card-container-column:nth-child(8), .pc-AnimateBlock .pc-PromoFeaturesBlock.animate .pc-PromoFeaturesBlock__card-container-column:nth-child(8) {
+    transition-delay: 0.8s;
+  }
+  .pc-PromoFeaturesBlock.pc-AnimateBlock.animate .pc-PromoFeaturesBlock__card-container-column:nth-child(9), .pc-AnimateBlock .pc-PromoFeaturesBlock.animate .pc-PromoFeaturesBlock__card-container-column:nth-child(9) {
+    transition-delay: 0.9s;
+  }
+}

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

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

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

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = (0, tslib_1.__importDefault)(require("react"));
+const utils_1 = require("../../utils");
+const constants_1 = require("../../constants");
+const YFMWrapper_1 = (0, tslib_1.__importDefault)(require("../../components/YFMWrapper/YFMWrapper"));
+const Media_1 = (0, tslib_1.__importDefault)(require("../../components/Media/Media"));
+const BlockHeader_1 = (0, tslib_1.__importDefault)(require("../../components/BlockHeader/BlockHeader"));
+const AnimateBlock_1 = (0, tslib_1.__importDefault)(require("../../components/AnimateBlock/AnimateBlock"));
+const FullWidthBackground_1 = (0, tslib_1.__importDefault)(require("../../components/FullWidthBackground/FullWidthBackground"));
+const BalancedMasonry_1 = (0, tslib_1.__importDefault)(require("../../components/BalancedMasonry/BalancedMasonry"));
+const b = (0, utils_1.block)('PromoFeaturesBlock');
+const breakpointColumns = {
+    [constants_1.BREAKPOINTS.lg]: 3,
+    [constants_1.BREAKPOINTS.md]: 2,
+    [constants_1.BREAKPOINTS.sm]: 1,
+};
+const PromoFeaturesBlock = (props) => {
+    const { items, title, description, theme, animated = true } = props;
+    const backgroundTheme = theme || 'default';
+    return (react_1.default.createElement(AnimateBlock_1.default, { className: b({ [backgroundTheme]: true }), animate: animated },
+        react_1.default.createElement(FullWidthBackground_1.default, { className: b('background', { [backgroundTheme]: true }) }),
+        react_1.default.createElement(BlockHeader_1.default, { title: title, description: description, className: b('header') }),
+        react_1.default.createElement(BalancedMasonry_1.default, { breakpointCols: breakpointColumns, className: b('card-container'), columnClassName: b('card-container-column') }, items.map(({ title: cardTitle, text, media, theme: cardTheme }, index) => {
+            const blockModifier = backgroundTheme === 'default' ? 'default' : 'light';
+            const themeMod = cardTheme || blockModifier || '';
+            return (react_1.default.createElement("div", { key: index, className: b('card', {
+                    'no-media': !media,
+                    [themeMod]: Boolean(themeMod),
+                }) },
+                react_1.default.createElement("div", { className: b('card-info') },
+                    react_1.default.createElement("h4", { 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') }, media))));
+        }))));
+};
+exports.default = PromoFeaturesBlock;