@gravity-ui/page-constructor 4.53.0 → 4.55.0

package/build/cjs/blocks/Media/Media.css

@@ -11,4 +11,7 @@ unpredictable css rules order in build */
 }
 .pc-media-block_border_none {
   border-radius: var(--pc-border-radius);
+}
+.pc-media-block__image {
+  border-radius: var(--pc-border-radius);
 }

package/build/cjs/blocks/Media/Media.js

@@ -20,7 +20,7 @@ const MediaBlock = (props) => {
     const mediaThemed = (0, utils_1.getThemedValue)(media, theme);
     return (react_1.default.createElement(MediaBase_1.default, Object.assign({}, props, { onScroll: () => setPlay(true) }),
         react_1.default.createElement(MediaBase_1.default.Card, null,
-            react_1.default.createElement(Media_1.default, Object.assign({}, mediaThemed, { playVideo: play, className: b({ border: borderSelected }) })))));
+            react_1.default.createElement(Media_1.default, Object.assign({ imageClassName: b('image') }, mediaThemed, { playVideo: play, className: b({ border: borderSelected }) })))));
 };
 exports.MediaBlock = MediaBlock;
 exports.default = exports.MediaBlock;

package/build/cjs/blocks/Tabs/Tabs.css

@@ -46,11 +46,18 @@ unpredictable css rules order in build */
   object-fit: cover;
   display: block;
 }
-.pc-tabs-block__image, .pc-tabs-block__media {
+.pc-tabs-block__image_border_shadow, .pc-tabs-block__media_border_shadow {
   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);
 }
+.pc-tabs-block__image_border_line, .pc-tabs-block__media_border_line {
+  border-radius: var(--pc-border-radius);
+  border: 1px solid var(--g-color-line-generic);
+}
+.pc-tabs-block__image_border_none, .pc-tabs-block__media_border_none {
+  border-radius: var(--pc-border-radius);
+}
 .pc-tabs-block__caption {
   font-size: var(--g-text-body-2-font-size);
   line-height: var(--g-text-body-2-line-height);

package/build/cjs/blocks/Tabs/Tabs.js

@@ -60,15 +60,16 @@ const TabsBlock = ({ items, title, description, animated, tabsColSizes, centered
     }
     const showMedia = Boolean((activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) || imageProps);
     const showText = Boolean(activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.text);
+    const border = (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.border) || 'shadow';
     const textContent = activeTabData && showText && (react_1.default.createElement(TabsTextContent_1.default, { showMedia: showMedia, data: activeTabData, imageProps: imageProps ? imageProps : undefined, isReverse: isReverse, contentSize: contentSize, centered: centered }));
     const mediaContent = showMedia && (react_1.default.createElement(grid_1.Col, { sizes: { all: 12, md: 8 }, orders: {
             all: grid_1.GridColumnOrderClasses.Last,
             md: grid_1.GridColumnOrderClasses.First,
         }, className: b('col', { centered: centered }) },
         react_1.default.createElement("div", { style: { minHeight: mediaVideoHeight || minImageHeight } }, (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (react_1.default.createElement("div", { ref: ref },
-            react_1.default.createElement(Media_1.default, Object.assign({}, (0, utils_2.getThemedValue)(activeTabData.media, theme), { key: activeTab, className: b('media'), playVideo: play, height: mediaVideoHeight || undefined, onImageLoad: handleImageHeight }))))),
+            react_1.default.createElement(Media_1.default, Object.assign({}, (0, utils_2.getThemedValue)(activeTabData.media, theme), { key: activeTab, className: b('media', { border }), playVideo: play, height: mediaVideoHeight || undefined, onImageLoad: handleImageHeight }))))),
         imageProps && (react_1.default.createElement(react_1.Fragment, null,
-            react_1.default.createElement(FullscreenImage_1.default, Object.assign({}, imageProps, { imageClassName: b('image') })))),
+            react_1.default.createElement(FullscreenImage_1.default, Object.assign({}, imageProps, { imageClassName: b('image', { border }) })))),
         (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.caption) && (react_1.default.createElement("p", { className: b('caption'), id: captionId },
             react_1.default.createElement(YFMWrapper_1.default, { content: activeTabData.caption, modifiers: { constructor: true }, id: captionId })))));
     return (react_1.default.createElement(AnimateBlock_1.default, { className: b(), onScroll: () => setPlay(true), animate: animated },

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

@@ -433,6 +433,10 @@ export declare const tabsItem: {
                 optionName: string;
             })[];
         };
+        border: {
+            type: string;
+            enum: string[];
+        };
         title?: {
             oneOf: ({
                 type: string;

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

@@ -22,7 +22,10 @@ exports.tabsItem = {
             properties: common_1.MediaProps,
         }), 
         //TODO deprecated
-        link: common_1.LinkProps, image: (0, common_1.withTheme)(schema_1.ImageProps) }),
+        link: common_1.LinkProps, image: (0, common_1.withTheme)(schema_1.ImageProps), border: {
+            type: 'string',
+            enum: ['shadow', 'line', 'none'],
+        } }),
 };
 exports.TabsBlock = {
     'tabs-block': {

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

@@ -1,7 +1,7 @@
-import { WithChildren } from '../../models';
-export interface FoldableProps {
+import { QAProps, WithChildren } from '../../models';
+export interface FoldableProps extends QAProps {
     isOpened: boolean;
     className?: string;
 }
-declare const Foldable: ({ isOpened, children, className }: WithChildren<FoldableProps>) => JSX.Element;
+declare const Foldable: ({ isOpened, children, className, qa }: WithChildren<FoldableProps>) => JSX.Element;
 export default Foldable;

package/build/cjs/components/Foldable/Foldable.js

@@ -5,7 +5,8 @@ const react_1 = tslib_1.__importStar(require("react"));
 const useHeightCalculator_1 = tslib_1.__importDefault(require("../../hooks/useHeightCalculator"));
 const utils_1 = require("../../utils");
 const b = (0, utils_1.block)('foldable-block');
-const Foldable = ({ isOpened, children, className }) => {
+const Foldable = ({ isOpened, children, className, qa }) => {
+    const qaAttributes = (0, utils_1.getQaAttrubutes)(qa);
     const blockRef = (0, react_1.useRef)(null);
     const contentRef = (0, react_1.useRef)(null);
     const contentHeight = (0, useHeightCalculator_1.default)(contentRef);
@@ -14,7 +15,7 @@ const Foldable = ({ isOpened, children, className }) => {
             blockRef.current.style.height = isOpened && contentHeight ? `${contentHeight}px` : '0';
         }
     }, [isOpened, contentHeight]);
-    return (react_1.default.createElement("div", { ref: blockRef, className: b({ open: isOpened }, className) },
-        react_1.default.createElement("div", { ref: contentRef, className: b('content-container') }, children)));
+    return (react_1.default.createElement("div", { ref: blockRef, className: b({ open: isOpened }, className), "data-qa": qaAttributes.default },
+        react_1.default.createElement("div", { ref: contentRef, className: b('content-container'), "data-qa": qaAttributes.container }, children)));
 };
 exports.default = Foldable;

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

@@ -209,7 +209,7 @@ export interface TableBlockProps {
     title: string;
     table: TableProps;
 }
-export interface TabsBlockItem extends Omit<ContentBlockProps, 'size' | 'colSizes' | 'centered' | 'theme'> {
+export interface TabsBlockItem extends Omit<ContentBlockProps, 'size' | 'colSizes' | 'centered' | 'theme'>, WithBorder {
     tabName: string;
     /**
      * @deprecated Use array links from ContentBlockProps instead

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

@@ -13,7 +13,7 @@ const PriceCard = (props) => {
             react_1.default.createElement(components_1.BackgroundImage, { className: b('background'), style: { backgroundColor } }),
             react_1.default.createElement("div", { className: b('content', { theme }) },
                 react_1.default.createElement("div", { className: b('info') },
-                    react_1.default.createElement("div", { className: b('title') }, title),
+                    react_1.default.createElement(components_1.HTML, { className: b('title') }, title),
                     react_1.default.createElement("div", { className: b('price') },
                         react_1.default.createElement("div", null,
                             react_1.default.createElement("span", { className: b('price-value') }, price),

package/build/esm/blocks/Media/Media.css

@@ -11,4 +11,7 @@ unpredictable css rules order in build */
 }
 .pc-media-block_border_none {
   border-radius: var(--pc-border-radius);
+}
+.pc-media-block__image {
+  border-radius: var(--pc-border-radius);
 }

package/build/esm/blocks/Media/Media.js

@@ -17,6 +17,6 @@ export const MediaBlock = (props) => {
     const mediaThemed = getThemedValue(media, theme);
     return (React.createElement(MediaBase, Object.assign({}, props, { onScroll: () => setPlay(true) }),
         React.createElement(MediaBase.Card, null,
-            React.createElement(Media, Object.assign({}, mediaThemed, { playVideo: play, className: b({ border: borderSelected }) })))));
+            React.createElement(Media, Object.assign({ imageClassName: b('image') }, mediaThemed, { playVideo: play, className: b({ border: borderSelected }) })))));
 };
 export default MediaBlock;

package/build/esm/blocks/Tabs/Tabs.css

@@ -46,11 +46,18 @@ unpredictable css rules order in build */
   object-fit: cover;
   display: block;
 }
-.pc-tabs-block__image, .pc-tabs-block__media {
+.pc-tabs-block__image_border_shadow, .pc-tabs-block__media_border_shadow {
   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);
 }
+.pc-tabs-block__image_border_line, .pc-tabs-block__media_border_line {
+  border-radius: var(--pc-border-radius);
+  border: 1px solid var(--g-color-line-generic);
+}
+.pc-tabs-block__image_border_none, .pc-tabs-block__media_border_none {
+  border-radius: var(--pc-border-radius);
+}
 .pc-tabs-block__caption {
   font-size: var(--g-text-body-2-font-size);
   line-height: var(--g-text-body-2-line-height);

package/build/esm/blocks/Tabs/Tabs.js

@@ -57,15 +57,16 @@ export const TabsBlock = ({ items, title, description, animated, tabsColSizes, c
     }
     const showMedia = Boolean((activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) || imageProps);
     const showText = Boolean(activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.text);
+    const border = (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.border) || 'shadow';
     const textContent = activeTabData && showText && (React.createElement(TabsTextContent, { showMedia: showMedia, data: activeTabData, imageProps: imageProps ? imageProps : undefined, isReverse: isReverse, contentSize: contentSize, centered: centered }));
     const mediaContent = showMedia && (React.createElement(Col, { sizes: { all: 12, md: 8 }, orders: {
             all: GridColumnOrderClasses.Last,
             md: GridColumnOrderClasses.First,
         }, className: b('col', { centered: centered }) },
         React.createElement("div", { style: { minHeight: mediaVideoHeight || minImageHeight } }, (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.media) && (React.createElement("div", { ref: ref },
-            React.createElement(Media, Object.assign({}, getThemedValue(activeTabData.media, theme), { key: activeTab, className: b('media'), playVideo: play, height: mediaVideoHeight || undefined, onImageLoad: handleImageHeight }))))),
+            React.createElement(Media, Object.assign({}, getThemedValue(activeTabData.media, theme), { key: activeTab, className: b('media', { border }), playVideo: play, height: mediaVideoHeight || undefined, onImageLoad: handleImageHeight }))))),
         imageProps && (React.createElement(Fragment, null,
-            React.createElement(FullscreenImage, Object.assign({}, imageProps, { imageClassName: b('image') })))),
+            React.createElement(FullscreenImage, Object.assign({}, imageProps, { imageClassName: b('image', { border }) })))),
         (activeTabData === null || activeTabData === void 0 ? void 0 : activeTabData.caption) && (React.createElement("p", { className: b('caption'), id: captionId },
             React.createElement(YFMWrapper, { content: activeTabData.caption, modifiers: { constructor: true }, id: captionId })))));
     return (React.createElement(AnimateBlock, { className: b(), onScroll: () => setPlay(true), animate: animated },

package/build/esm/blocks/Tabs/schema.d.ts

@@ -433,6 +433,10 @@ export declare const tabsItem: {
                 optionName: string;
             })[];
         };
+        border: {
+            type: string;
+            enum: string[];
+        };
         title?: {
             oneOf: ({
                 type: string;

package/build/esm/blocks/Tabs/schema.js

@@ -18,7 +18,10 @@ export const tabsItem = {
             properties: MediaProps,
         }), 
         //TODO deprecated
-        link: LinkProps, image: withTheme(ImageProps) }),
+        link: LinkProps, image: withTheme(ImageProps), border: {
+            type: 'string',
+            enum: ['shadow', 'line', 'none'],
+        } }),
 };
 export const TabsBlock = {
     'tabs-block': {

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

@@ -1,8 +1,8 @@
-import { WithChildren } from '../../models';
+import { QAProps, WithChildren } from '../../models';
 import './Foldable.css';
-export interface FoldableProps {
+export interface FoldableProps extends QAProps {
     isOpened: boolean;
     className?: string;
 }
-declare const Foldable: ({ isOpened, children, className }: WithChildren<FoldableProps>) => JSX.Element;
+declare const Foldable: ({ isOpened, children, className, qa }: WithChildren<FoldableProps>) => JSX.Element;
 export default Foldable;

package/build/esm/components/Foldable/Foldable.js

@@ -1,9 +1,10 @@
 import React, { useEffect, useRef } from 'react';
 import useHeightCalculator from '../../hooks/useHeightCalculator';
-import { block } from '../../utils';
+import { block, getQaAttrubutes } from '../../utils';
 import './Foldable.css';
 const b = block('foldable-block');
-const Foldable = ({ isOpened, children, className }) => {
+const Foldable = ({ isOpened, children, className, qa }) => {
+    const qaAttributes = getQaAttrubutes(qa);
     const blockRef = useRef(null);
     const contentRef = useRef(null);
     const contentHeight = useHeightCalculator(contentRef);
@@ -12,7 +13,7 @@ const Foldable = ({ isOpened, children, className }) => {
             blockRef.current.style.height = isOpened && contentHeight ? `${contentHeight}px` : '0';
         }
     }, [isOpened, contentHeight]);
-    return (React.createElement("div", { ref: blockRef, className: b({ open: isOpened }, className) },
-        React.createElement("div", { ref: contentRef, className: b('content-container') }, children)));
+    return (React.createElement("div", { ref: blockRef, className: b({ open: isOpened }, className), "data-qa": qaAttributes.default },
+        React.createElement("div", { ref: contentRef, className: b('content-container'), "data-qa": qaAttributes.container }, children)));
 };
 export default Foldable;

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

@@ -209,7 +209,7 @@ export interface TableBlockProps {
     title: string;
     table: TableProps;
 }
-export interface TabsBlockItem extends Omit<ContentBlockProps, 'size' | 'colSizes' | 'centered' | 'theme'> {
+export interface TabsBlockItem extends Omit<ContentBlockProps, 'size' | 'colSizes' | 'centered' | 'theme'>, WithBorder {
     tabName: string;
     /**
      * @deprecated Use array links from ContentBlockProps instead

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import Check from '@gravity-ui/icons/Check';
-import { BackgroundImage, Button, CardBase, ContentList, Link as LinkBlock } from '../../components';
+import { BackgroundImage, Button, CardBase, ContentList, HTML, Link as LinkBlock, } from '../../components';
 import { block } from '../../utils';
 import './PriceCard.css';
 const b = block('price-card');
@@ -11,7 +11,7 @@ const PriceCard = (props) => {
             React.createElement(BackgroundImage, { className: b('background'), style: { backgroundColor } }),
             React.createElement("div", { className: b('content', { theme }) },
                 React.createElement("div", { className: b('info') },
-                    React.createElement("div", { className: b('title') }, title),
+                    React.createElement(HTML, { className: b('title') }, title),
                     React.createElement("div", { className: b('price') },
                         React.createElement("div", null,
                             React.createElement("span", { className: b('price-value') }, price),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "4.53.0",
+  "version": "4.55.0",
   "description": "Gravity UI Page Constructor",
   "license": "MIT",
   "repository": {

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

@@ -209,7 +209,7 @@ export interface TableBlockProps {
     title: string;
     table: TableProps;
 }
-export interface TabsBlockItem extends Omit<ContentBlockProps, 'size' | 'colSizes' | 'centered' | 'theme'> {
+export interface TabsBlockItem extends Omit<ContentBlockProps, 'size' | 'colSizes' | 'centered' | 'theme'>, WithBorder {
     tabName: string;
     /**
      * @deprecated Use array links from ContentBlockProps instead

package/styles/storybook/common.scss

@@ -1,3 +1,5 @@
+@import '../mixins';
+
 .demo-container {
     min-height: calc(100vh - 1px);
     padding: 50px;
@@ -35,3 +37,9 @@
     --pc-first-block-indent: 64px;
     margin-bottom: 120px;
 }
+
+.pc-layout {
+    @include add-specificity(&) {
+        min-height: auto;
+    }
+}