@gravity-ui/page-constructor 5.26.1 → 5.27.1-alpha.0

package/build/esm/components/FullscreenImage/FullscreenImage.css

@@ -12,6 +12,25 @@ unpredictable css rules order in build */
 .pc-fullscreen-image__modal-content {
   position: relative;
   border-radius: var(--pc-border-radius);
+  width: 100%;
+}
+.pc-fullscreen-image__modal-content-wrapper {
+  width: 100%;
+}
+.pc-fullscreen-image__modal-content_loaded {
+  max-width: fit-content;
+}
+.pc-fullscreen-image__modal_with-slider .g-modal__content-wrapper {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  justify-content: center;
+}
+.pc-fullscreen-image__modal_with-slider .pc-fullscreen-image__modal-content {
+  background-color: transparent;
+}
+.pc-fullscreen-image__modal_with-slider .pc-fullscreen-image__modal-content:hover .pc-fullscreen-image__icon-wrapper {
+  opacity: 1;
 }
 .pc-fullscreen-image__modal-image {
   display: block;
@@ -19,6 +38,27 @@ unpredictable css rules order in build */
   max-height: 70vh;
   overflow: hidden;
 }
+.pc-fullscreen-image__modal-slider {
+  max-width: 100vw;
+  width: 100%;
+  height: 100vh;
+}
+.pc-fullscreen-image__modal-slider_item {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.pc-fullscreen-image__modal-slider_item-image {
+  display: block;
+  margin: auto;
+  border-radius: var(--pc-border-radius);
+  overflow: hidden;
+  max-height: calc(100vh - 80px);
+  max-width: 100%;
+  object-fit: contain;
+  object-position: center;
+}
 .pc-fullscreen-image__modal .g-modal__content, .pc-fullscreen-image__modal-image {
   border-radius: var(--pc-border-radius);
 }
@@ -36,6 +76,7 @@ unpredictable css rules order in build */
   align-items: center;
   justify-content: center;
   position: absolute;
+  z-index: 1001;
   right: 16px;
   top: 16px;
   width: 36px;
@@ -56,6 +97,10 @@ unpredictable css rules order in build */
 .pc-fullscreen-image__icon-wrapper:focus {
   opacity: 1;
 }
+.pc-fullscreen-image__icon-wrapper_visible {
+  right: 24px;
+  top: 24px;
+}
 .pc-fullscreen-image__icon {
   color: var(--g-color-text-hint);
 }
@@ -67,14 +112,9 @@ unpredictable css rules order in build */
     width: 100%;
   }
 }
-@media (max-width: 1081px) {
-  .pc-fullscreen-image__image {
-    pointer-events: none;
-  }
+@media (max-width: 769px) {
   .pc-fullscreen-image__icon-wrapper {
-    display: none;
-  }
-  .pc-fullscreen-image__modal {
-    display: none !important; /* stylelint-disable-line declaration-no-important */
+    right: 20px;
+    top: 50px;
   }
 }

package/build/esm/components/FullscreenImage/FullscreenImage.d.ts

@@ -1,4 +1,5 @@
 import { CSSProperties, HTMLProps } from 'react';
+import { ImageProps as ModelImageProps } from '../../models';
 import { ImageProps } from '../Image/Image';
 import './FullscreenImage.css';
 export interface FullscreenImageProps extends ImageProps {
@@ -6,6 +7,10 @@ export interface FullscreenImageProps extends ImageProps {
     modalImageClass?: string;
     imageStyle?: CSSProperties;
     extraProps?: HTMLProps<HTMLDivElement>;
+    sliderData?: {
+        items: ModelImageProps[];
+        initialIndex: number;
+    };
 }
 declare const FullscreenImage: (props: FullscreenImageProps) => JSX.Element;
 export default FullscreenImage;

package/build/esm/components/FullscreenImage/FullscreenImage.js

@@ -1,26 +1,40 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { ChevronsExpandUpRight, Xmark } from '@gravity-ui/icons';
 import { Icon, Modal } from '@gravity-ui/uikit';
+import { SliderNewBlock as SliderBlock } from '../../blocks/unstable';
+import { SliderType } from '../../models';
 import { block } from '../../utils';
 import Image from '../Image/Image';
+import { getMediaImage } from '../Media/Image/utils';
 import { i18n } from './i18n';
 import './FullscreenImage.css';
 const b = block('fullscreen-image');
 const FULL_SCREEN_ICON_SIZE = 18;
 const CLOSE_ICON_SIZE = 24;
 const FullscreenImage = (props) => {
-    const { imageClassName, modalImageClass, imageStyle, alt = i18n('img-alt'), extraProps } = props;
+    const { imageClassName, sliderData, modalImageClass, imageStyle, alt = i18n('img-alt'), extraProps, } = props;
     const [isOpened, setIsOpened] = useState(false);
+    const [sliderLoaded, setSliderLoaded] = useState(false);
     const openModal = () => setIsOpened(true);
     const closeModal = () => setIsOpened(false);
+    useEffect(() => {
+        if (sliderData && !isOpened) {
+            setSliderLoaded(false);
+        }
+    }, [isOpened, sliderData]);
+    const handleSliderImageLoad = () => {
+        setSliderLoaded(true);
+    };
     return (React.createElement("div", Object.assign({ className: b() }, extraProps),
         React.createElement("div", { className: b('image-wrapper') },
             React.createElement(Image, Object.assign({}, props, { alt: alt, className: b('image', imageClassName), onClick: openModal, style: imageStyle })),
             React.createElement("button", { className: b('icon-wrapper'), onClick: openModal },
                 React.createElement(Icon, { data: ChevronsExpandUpRight, width: FULL_SCREEN_ICON_SIZE, height: FULL_SCREEN_ICON_SIZE, className: b('icon') }))),
-        isOpened && (React.createElement(Modal, { open: isOpened, onClose: closeModal, className: b('modal'), contentClassName: b('modal-content') },
+        isOpened && (React.createElement(Modal, { open: isOpened, onClose: closeModal, className: b('modal', { 'with-slider': Boolean(sliderData) }), contentClassName: b('modal-content', { loaded: sliderLoaded }) },
             React.createElement("button", { className: b('icon-wrapper', { visible: true }), onClick: closeModal, "aria-label": i18n('close') },
                 React.createElement(Icon, { data: Xmark, width: CLOSE_ICON_SIZE, height: CLOSE_ICON_SIZE, className: b('icon', { hover: true }) })),
-            React.createElement(Image, Object.assign({}, props, { className: b('modal-image', modalImageClass) }))))));
+            sliderData ? (React.createElement("div", { className: b('modal-slider') },
+                React.createElement(SliderBlock, { initialSlide: sliderData.initialIndex, slidesToShow: 1, type: SliderType.FullscreenCard }, sliderData.items.map((item, index) => (React.createElement("div", { key: index, className: b('modal-slider_item') },
+                    React.createElement(Image, Object.assign({ onLoad: handleSliderImageLoad, className: b('modal-slider_item-image', modalImageClass), containerClassName: b('modal-slider_item-image-wrapper') }, getMediaImage(item))))))))) : (React.createElement(Image, Object.assign({}, props, { className: b('modal-image', modalImageClass) })))))));
 };
 export default FullscreenImage;

package/build/esm/components/Media/Image/Image.d.ts

@@ -4,6 +4,7 @@ export interface ImageAdditionProps {
     imageClassName?: string;
     isBackground?: boolean;
     fullscreen?: boolean;
+    fullscreenClassName?: string;
     onLoad?: () => void;
 }
 interface InnerImageProps {

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

@@ -1,7 +1,7 @@
 import React, { Fragment, useEffect, useState } from 'react';
 import { animated, config, useSpring } from '@react-spring/web';
 import debounce from 'lodash/debounce';
-import SliderBlock from '../../../blocks/Slider/Slider';
+import { SliderNewBlock as SliderBlock } from '../../../blocks/unstable';
 import { SliderType } from '../../../models';
 import { block, getQaAttrubutes } from '../../../utils';
 import BackgroundImage from '../../BackgroundImage/BackgroundImage';
@@ -12,7 +12,7 @@ import './Image.css';
 const b = block('media-component-image');
 export const defaultAnimatedDivQa = 'animated-div';
 const Image = (props) => {
-    const { parallax, height, imageClassName, isBackground, hasVideoFallback, video, fullscreen, disableImageSliderForArrayInput, qa, onLoad, } = props;
+    const { parallax, height, imageClassName, fullscreenClassName, isBackground, hasVideoFallback, video, fullscreen, disableImageSliderForArrayInput, qa, onLoad, } = props;
     const image = Array.isArray(props.image) && disableImageSliderForArrayInput
         ? props.image[0]
         : props.image;
@@ -38,9 +38,9 @@ const Image = (props) => {
         parallaxInterpolate = springScrollY.to((value) => `translateY(-${Number(value) / parallaxLevel}px)`);
     }
     const imageClass = b('item', { withVideo: Boolean(video) && !hasVideoFallback }, imageClassName);
-    const renderFullscreenImage = (item) => {
+    const renderFullscreenImage = (item, sliderData) => {
         const itemData = getMediaImage(item);
-        return (React.createElement(FullscreenImage, Object.assign({ key: itemData.alt }, itemData, { imageClassName: imageClass, imageStyle: { height }, qa: qaAttributes.fullscreenImage })));
+        return (React.createElement(FullscreenImage, Object.assign({ key: itemData.alt }, itemData, { imageClassName: imageClass, modalImageClass: fullscreenClassName, imageStyle: { height }, qa: qaAttributes.fullscreenImage, sliderData: sliderData })));
     };
     const imageBackground = (oneImage) => {
         const imageData = getMediaImage(oneImage);
@@ -53,7 +53,9 @@ const Image = (props) => {
     };
     const imageSlider = (imageArray) => {
         const fullscreenItem = fullscreen === undefined || fullscreen;
-        return (React.createElement(SliderBlock, { slidesToShow: 1, type: SliderType.MediaCard }, imageArray.map((item, index) => (React.createElement(Fragment, { key: index }, fullscreenItem ? renderFullscreenImage(item) : imageOnly(item))))));
+        return (React.createElement(SliderBlock, { slidesToShow: 1, type: SliderType.MediaCard }, imageArray.map((item, index) => (React.createElement(Fragment, { key: index }, fullscreenItem
+            ? renderFullscreenImage(item, { items: imageArray, initialIndex: index })
+            : imageOnly(item))))));
     };
     if (Array.isArray(image)) {
         return imageSlider(image);

package/build/esm/components/Media/Media.css

@@ -8,4 +8,8 @@ unpredictable css rules order in build */
   overflow: hidden;
   display: flex;
   align-items: center;
+}
+.pc-Media__fullscreen-image-cover {
+  object-fit: cover;
+  object-position: top;
 }

package/build/esm/components/Media/Media.d.ts

@@ -4,6 +4,7 @@ import { VideoAdditionProps } from './Video/Video';
 import './Media.css';
 export interface MediaAllProps extends MediaProps, VideoAdditionProps, ImageAdditionProps, QAProps {
     className?: string;
+    isFullscreenImageCover?: boolean;
     youtubeClassName?: string;
     autoplay?: boolean;
     onImageLoad?: () => void;

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

@@ -9,13 +9,13 @@ 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, isFullscreenImageCover, analyticsEvents, className, imageClassName, videoClassName, youtubeClassName, disableImageSliderForArrayInput, playVideo = true, isBackground, playButton, customBarControlsClassName, qa, ratio, autoplay, onImageLoad, iframe, margins, } = props;
     const [hasVideoFallback, setHasVideoFallback] = useState(false);
     const qaAttributes = getQaAttrubutes(qa, 'video');
     const content = useMemo(() => {
         let result = [];
         if (image) {
-            result.push(React.createElement(Image, { key: "image", parallax: parallax, image: image, disableImageSliderForArrayInput: disableImageSliderForArrayInput, height: height, imageClassName: imageClassName, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback, fullscreen: fullscreen, qa: qaAttributes.image, onLoad: onImageLoad }));
+            result.push(React.createElement(Image, { key: "image", parallax: parallax, image: image, disableImageSliderForArrayInput: disableImageSliderForArrayInput, height: height, imageClassName: imageClassName, fullscreenClassName: isFullscreenImageCover ? b('fullscreen-image-cover') : undefined, isBackground: isBackground, video: video, hasVideoFallback: hasVideoFallback, fullscreen: fullscreen, qa: qaAttributes.image, onLoad: onImageLoad }));
         }
         if (video) {
             const videoProps = {
@@ -63,6 +63,7 @@ export const Media = (props) => {
         isBackground,
         hasVideoFallback,
         fullscreen,
+        isFullscreenImageCover,
         qaAttributes.image,
         qaAttributes.video,
         onImageLoad,

package/build/esm/components/MediaBase/MediaBase.js

@@ -30,7 +30,7 @@ export const MediaBase = (props) => {
                 }) },
                 React.createElement(Col, { className: b('content'), sizes: contentSizes }, mediaContent),
                 card ? (React.createElement(Col, { sizes: mediaSizes },
-                    React.createElement("div", null, card))) : null))));
+                    React.createElement("div", { className: b('card') }, card))) : null))));
 };
 MediaBase.Card = Card;
 export default MediaBase;

package/build/esm/components/ReactPlayer/ReactPlayer.js

@@ -21,7 +21,7 @@ const FPS = 60;
 // eslint-disable-next-line react/display-name
 export const ReactPlayerBlock = React.forwardRef((props, originRef) => {
     const isMobile = useContext(MobileContext);
-    const { src, previewImgUrl, loop = false, controls = MediaVideoControlsType.Default, customControlsOptions = {}, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, analyticsEvents, height, ariaLabel, ratio, autoRatio, contain, } = props;
+    const { src, previewImgUrl, loop = false, controls = MediaVideoControlsType.Default, customControlsOptions = {}, muted: initiallyMuted = false, elapsedTime, playButton, className, customBarControlsClassName, showPreview, onClickPreview, analyticsEvents, height, ariaLabel, ratio, autoRatio, contain = true, } = props;
     const { type = PlayButtonType.Default, theme = PlayButtonThemes.Blue, text, className: buttonClassName, } = playButton || {};
     const { type: customControlsType = CustomControlsType.WithMuteButton, muteButtonShown, positioning = CustomControlsButtonPositioning.Center, } = customControlsOptions;
     const autoPlay = Boolean(!isMobile && !previewImgUrl && props.autoplay);

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

@@ -18,7 +18,7 @@ export declare const blockMap: {
     "map-block": ({ map, border, disableShadow, ...props }: import("./models").MapBlockProps) => JSX.Element;
     "filter-block": import("react").FC<import("./models").FilterBlockProps>;
     "form-block": import("react").FC<import("./models").FormBlockProps>;
-    "slider-new-block": ({ animated, title, description, type, anchorId, arrows, adaptive, autoplay: autoplayMs, dots, className, dotsClassName, disclaimer, children, blockClassName, arrowSize, slidesToShow, onSlideChange, onSlideChangeTransitionStart, onSlideChangeTransitionEnd, onActiveIndexChange, onBreakpoint, }: import("react").PropsWithChildren<import("./blocks/SliderNew/Slider").SliderNewProps>) => JSX.Element;
+    "slider-new-block": ({ animated, title, description, type, anchorId, arrows, adaptive, autoplay: autoplayMs, dots, initialSlide, className, dotsClassName, disclaimer, children, blockClassName, arrowSize, slidesToShow, onSlideChange, onSlideChangeTransitionStart, onSlideChangeTransitionEnd, onActiveIndexChange, onBreakpoint, }: import("react").PropsWithChildren<import("./blocks/SliderNew/Slider").SliderNewProps>) => JSX.Element;
 };
 export declare const subBlockMap: {
     divider: ({ size, border }: import("./models").DividerProps) => JSX.Element;

package/build/esm/containers/PageConstructor/PageConstructor.js

@@ -1,11 +1,12 @@
 import { __rest } from "tslib";
-import React, { useMemo } from 'react';
+import React, { useContext, useMemo } from 'react';
 import '@diplodoc/transform/dist/js/yfm';
 import BackgroundMedia from '../../components/BackgroundMedia/BackgroundMedia';
 import RootCn from '../../components/RootCn';
 import { blockMap, navItemMap, subBlockMap } from '../../constructor-items';
 import { AnimateContext } from '../../context/animateContext';
 import { InnerContext } from '../../context/innerContext';
+import { ProjectSettingsContext } from '../../context/projectSettingsContext';
 import { useTheme } from '../../context/theme';
 import { Grid } from '../../grid';
 import { BlockType, BlockTypes, HeaderBlockTypes, NavigationItemTypes, SubBlockTypes, } from '../../models';
@@ -51,7 +52,8 @@ export const Constructor = (props) => {
                         React.createElement(ConstructorBlocks, { items: restBlocks })))))))));
 };
 export const PageConstructor = (props) => {
-    const { content: { animated = true } = {} } = props, rest = __rest(props, ["content"]);
+    const { isAnimationEnabled = true } = useContext(ProjectSettingsContext);
+    const { content: { animated = isAnimationEnabled } = {} } = props, rest = __rest(props, ["content"]);
     return (React.createElement(AnimateContext.Provider, { value: { animated } },
         React.createElement(Constructor, Object.assign({ content: props.content }, rest))));
 };

package/build/esm/context/projectSettingsContext/ProjectSettingsContext.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 export interface ProjectSettingsContextProps {
     disableCompress?: boolean;
+    isAnimationEnabled?: boolean;
 }
 export declare const ProjectSettingsContext: React.Context<ProjectSettingsContextProps>;

package/build/esm/models/constructor-items/blocks.d.ts

@@ -62,7 +62,8 @@ export declare enum SliderBreakpointNames {
 }
 export declare enum SliderType {
     MediaCard = "media-card",
-    HeaderCard = "header-card"
+    HeaderCard = "header-card",
+    FullscreenCard = "fullscreen-card"
 }
 export type SliderBreakpointParams = Record<SliderBreakpointNames, number>;
 export type SlidesToShow = Partial<SliderBreakpointParams> | number;

package/build/esm/models/constructor-items/blocks.js

@@ -35,6 +35,7 @@ export var SliderType;
 (function (SliderType) {
     SliderType["MediaCard"] = "media-card";
     SliderType["HeaderCard"] = "header-card";
+    SliderType["FullscreenCard"] = "fullscreen-card";
 })(SliderType || (SliderType = {}));
 export var PCShareSocialNetwork;
 (function (PCShareSocialNetwork) {

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

@@ -113,11 +113,12 @@ export interface BasicCardProps extends CardBaseProps, AnalyticsEventsBase, Card
 export interface BannerCardProps {
     title: string;
     subtitle?: string;
+    className?: string;
     image?: ThemeSupporting<string>;
     disableCompress?: boolean;
     color?: ThemeSupporting<string>;
     theme?: TextTheme;
-    button: Pick<ButtonProps, 'text' | 'url' | 'target' | 'theme'>;
+    button?: Pick<ButtonProps, 'text' | 'url' | 'target' | 'theme'>;
     mediaView?: MediaView;
 }
 export interface MediaCardProps extends MediaProps, AnalyticsEventsBase, CardBaseProps {

package/build/esm/navigation/hooks/useShowBorder.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { debounce } from 'lodash';
+import debounce from 'lodash/debounce';
 const useShowBorder = (withBorder, withBorderOnScroll) => {
     const [showBorder, setShowBorder] = useState(withBorder);
     useEffect(() => {

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

@@ -5,7 +5,7 @@ import { block, getThemedValue } from '../../utils';
 import './BannerCard.css';
 const b = block('banner-card');
 export const BannerCard = (props) => {
-    const { title, subtitle, button: { url, text, target, theme: buttonTheme = 'raised' }, color, theme: textTheme = 'light', image, disableCompress, mediaView = 'full', } = props;
+    const { title, subtitle, button: { url, text, target, theme: buttonTheme = 'raised' } = {}, color, theme: textTheme = 'light', image, disableCompress, mediaView = 'full', } = props;
     const theme = useTheme();
     const contentStyle = {};
     if (color) {
@@ -18,8 +18,8 @@ export const BannerCard = (props) => {
                     React.createElement("h2", { className: b('title') },
                         React.createElement(HTML, null, title)),
                     subtitle && (React.createElement(YFMWrapper, { className: b('subtitle'), content: subtitle, modifiers: { constructor: true } }))),
-                React.createElement(RouterLink, { href: url },
-                    React.createElement(Button, { className: b('button'), theme: buttonTheme, size: "xl", text: text, url: url, target: target }))),
+                url && (React.createElement(RouterLink, { href: url },
+                    React.createElement(Button, { className: b('button'), theme: buttonTheme, size: "xl", text: text !== null && text !== void 0 ? text : '', url: url, target: target })))),
             React.createElement(BackgroundImage, { className: b('image'), src: getThemedValue(image, theme), disableCompress: disableCompress }))));
 };
 export default BannerCard;

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

@@ -87,6 +87,9 @@ 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);
 }
@@ -101,11 +104,13 @@ 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__text .yfm a,
+.pc-content_theme_dark .pc-content__list .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__text .yfm a:hover,
+.pc-content_theme_dark .pc-content__list .yfm a:hover {
   color: var(--g-color-text-light-secondary);
 }
 .pc-content_theme_dark .pc-content__title a {
@@ -119,6 +124,9 @@ 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);
 }
@@ -133,11 +141,13 @@ 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__text .yfm a,
+.pc-content_theme_light .pc-content__list .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__text .yfm a:hover,
+.pc-content_theme_light .pc-content__list .yfm a:hover {
   color: var(--g-color-text-dark-secondary);
 }
 .pc-content_theme_light .pc-content__title a {

package/build/esm/sub-blocks/ImageCard/ImageCard.css

@@ -16,6 +16,14 @@ unpredictable css rules order in build */
 .pc-image-card_border_line {
   border: 1px solid var(--g-color-line-generic);
 }
+@media (min-width: 577px) {
+  .slick-slide:not(.slick-active) .pc-image-card {
+    box-shadow: none;
+  }
+  .swiper-slide:not(.swiper-slide-visible) .pc-image-card {
+    box-shadow: none;
+  }
+}
 .pc-image-card .pc-image-card__content {
   display: flex;
   padding: 32px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "5.26.1",
+  "version": "5.27.1-alpha.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {
@@ -80,6 +80,7 @@
     "test:watch": "jest --watchAll",
     "playwright": "playwright test --config=playwright/playwright.config.ts",
     "playwright:update": "npm run playwright -- -u",
+    "playwright:clear-cache": "rm -rf ./playwright/.cache",
     "playwright:docker": "./scripts/playwright-docker.sh 'npm run playwright'",
     "playwright:docker:update": "./scripts/playwright-docker.sh 'npm run playwright:update'",
     "playwright:docker:clear-cache": "./scripts/playwright-docker.sh clear-cache",
@@ -202,6 +203,8 @@
     "ts-jest": "^29.0.3",
     "tslib": "^2.4.0",
     "typescript": "^4.9.4",
+    "vite-plugin-commonjs": "^0.10.1",
+    "vite-plugin-svgr": "^4.2.0",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",
     "webpack-shell-plugin-next": "^2.3.1"

package/server/models/constructor-items/blocks.d.ts

@@ -62,7 +62,8 @@ export declare enum SliderBreakpointNames {
 }
 export declare enum SliderType {
     MediaCard = "media-card",
-    HeaderCard = "header-card"
+    HeaderCard = "header-card",
+    FullscreenCard = "fullscreen-card"
 }
 export type SliderBreakpointParams = Record<SliderBreakpointNames, number>;
 export type SlidesToShow = Partial<SliderBreakpointParams> | number;

package/server/models/constructor-items/blocks.js

@@ -38,6 +38,7 @@ var SliderType;
 (function (SliderType) {
     SliderType["MediaCard"] = "media-card";
     SliderType["HeaderCard"] = "header-card";
+    SliderType["FullscreenCard"] = "fullscreen-card";
 })(SliderType = exports.SliderType || (exports.SliderType = {}));
 var PCShareSocialNetwork;
 (function (PCShareSocialNetwork) {

package/server/models/constructor-items/sub-blocks.d.ts

@@ -113,11 +113,12 @@ export interface BasicCardProps extends CardBaseProps, AnalyticsEventsBase, Card
 export interface BannerCardProps {
     title: string;
     subtitle?: string;
+    className?: string;
     image?: ThemeSupporting<string>;
     disableCompress?: boolean;
     color?: ThemeSupporting<string>;
     theme?: TextTheme;
-    button: Pick<ButtonProps, 'text' | 'url' | 'target' | 'theme'>;
+    button?: Pick<ButtonProps, 'text' | 'url' | 'target' | 'theme'>;
     mediaView?: MediaView;
 }
 export interface MediaCardProps extends MediaProps, AnalyticsEventsBase, CardBaseProps {

package/styles/mixins.scss

@@ -1,4 +1,4 @@
-@import 'node_modules/@gravity-ui/uikit/styles/mixins.scss';
+@import '@gravity-ui/uikit/styles/mixins.scss';
 @import './variables.scss';
 
 //common