@gravity-ui/page-constructor 4.54.0 → 4.56.0

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/Buttons/Buttons.css

@@ -0,0 +1,11 @@
+.pc-buttons {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 12px;
+}
+.pc-buttons_size_s {
+  row-gap: 8px;
+}
+.pc-buttons_size_l {
+  row-gap: 12px;
+}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ButtonProps, ContentSize } from '../../models';
+type ButtonsProps = {
+    className?: string;
+    buttons?: ButtonProps[];
+    size?: ContentSize;
+    titleId?: string;
+    qa?: string;
+    buttonQa?: string;
+};
+declare const Buttons: React.FC<ButtonsProps>;
+export default Buttons;

package/build/cjs/components/Buttons/Buttons.js

@@ -0,0 +1,18 @@
+"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 Button_1 = tslib_1.__importDefault(require("../Button/Button"));
+const b = (0, utils_1.block)('buttons');
+function getButtonSize(size) {
+    switch (size) {
+        case 's':
+            return 'm';
+        case 'l':
+        default:
+            return 'xl';
+    }
+}
+const Buttons = ({ className, titleId, buttons, size = 's', qa, buttonQa }) => buttons ? (react_1.default.createElement("div", { className: b({ size }, className), "data-qa": qa }, buttons.map((item) => (react_1.default.createElement(Button_1.default, Object.assign({ className: b('button') }, item, { key: item.url, size: getButtonSize(size), qa: buttonQa, extraProps: Object.assign({ 'aria-describedby': item.urlTitle ? undefined : titleId }, item.extraProps) })))))) : null;
+exports.default = Buttons;

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

@@ -1,10 +1,9 @@
-import React, { HTMLAttributeAnchorTarget, ReactElement } from 'react';
+import React, { HTMLAttributeAnchorTarget, PropsWithChildren } from 'react';
 import { AnalyticsEventsBase, ButtonPixel, CardBaseProps as CardBaseParams, ImageProps, MetrikaGoal, WithChildren } from '../../models';
-export interface CardBaseProps extends AnalyticsEventsBase, CardBaseParams {
+export interface CardBaseProps extends AnalyticsEventsBase, CardBaseParams, PropsWithChildren {
     className?: string;
     bodyClassName?: string;
     contentClassName?: string;
-    children: ReactElement | ReactElement[];
     url?: string;
     urlTitle?: string;
     target?: HTMLAttributeAnchorTarget;

package/build/cjs/components/CardBase/CardBase.js

@@ -36,12 +36,11 @@ const Layout = (props) => {
                 break;
         }
     }
-    if (react_1.Children.count(children) === 1) {
-        handleChild(children);
-    }
-    else {
-        react_1.Children.forEach(children, handleChild);
-    }
+    react_1.Children.toArray(children).forEach((child) => {
+        if ((0, react_1.isValidElement)(child)) {
+            handleChild(child);
+        }
+    });
     const cardContent = (react_1.default.createElement(react_1.Fragment, null,
         (header || image) && (react_1.default.createElement(BackgroundImage_1.default, Object.assign({ className: b('header', headerClass) }, (typeof image === 'string' ? { src: image } : image), { qa: qaAttributes.header }),
             react_1.default.createElement("div", { className: b('header-content') }, header))),

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/components/Links/Links.css

@@ -0,0 +1,14 @@
+.pc-links {
+  display: flex;
+  flex-direction: column;
+  align-items: baseline;
+}
+.pc-links__link {
+  margin-top: 0px;
+}
+.pc-links_size_s {
+  gap: 8px;
+}
+.pc-links_size_l {
+  gap: 12px;
+}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ContentSize, LinkProps } from '../../models';
+type LinksProps = {
+    className?: string;
+    titleId?: string;
+    links?: LinkProps[];
+    size?: ContentSize;
+    qa?: string;
+    linkQa?: string;
+};
+declare const Links: React.FC<LinksProps>;
+export default Links;

package/build/cjs/components/Links/Links.js

@@ -0,0 +1,18 @@
+"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 Link_1 = tslib_1.__importDefault(require("../Link/Link"));
+const b = (0, utils_1.block)('links');
+function getLinkSize(size) {
+    switch (size) {
+        case 's':
+            return 'm';
+        case 'l':
+        default:
+            return 'l';
+    }
+}
+const Links = ({ className, titleId, links, size = 's', qa, linkQa }) => links ? (react_1.default.createElement("div", { className: b({ size }, className), "data-qa": qa }, links === null || links === void 0 ? void 0 : links.map((link) => (react_1.default.createElement(Link_1.default, Object.assign({ className: b('link') }, link, { textSize: getLinkSize(size), key: link.url, qa: linkQa, extraProps: Object.assign({ 'aria-describedby': link.urlTitle ? undefined : titleId }, link.extraProps) })))))) : null;
+exports.default = Links;

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

@@ -6,6 +6,7 @@ export { default as BackLink } from './BackLink/BackLink';
 export { default as BalancedMasonry } from './BalancedMasonry/BalancedMasonry';
 export { default as BlockBase } from './BlockBase/BlockBase';
 export { default as Button } from './Button/Button';
+export { default as Buttons } from './Buttons/Buttons';
 export { default as CardBase } from './CardBase/CardBase';
 export { default as ErrorWrapper } from './ErrorWrapper/ErrorWrapper';
 export { default as FileLink } from './FileLink/FileLink';
@@ -16,7 +17,7 @@ export { default as HeaderBreadcrumbs } from './HeaderBreadcrumbs/HeaderBreadcru
 export { default as Image } from './Image/Image';
 export { default as ImageBase } from './ImageBase/ImageBase';
 export { default as Link } from './Link/Link';
-export { default as Links } from './Link/Links';
+export { default as Links } from './Links/Links';
 export { default as Media } from './Media/Media';
 export { default as OutsideClick } from './OutsideClick/OutsideClick';
 export { default as ReactPlayer } from './ReactPlayer/ReactPlayer';

package/build/cjs/components/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconWrapper = exports.InnerForm = exports.ContentList = exports.FullscreenMedia = exports.MetaInfo = exports.HTML = exports.RouterLink = exports.Author = exports.OverflowScroller = exports.Control = exports.YandexForm = exports.YFMWrapper = exports.VideoBlock = exports.UnpublishedLabel = exports.ToggleArrow = exports.Title = exports.Table = exports.ReactPlayer = exports.OutsideClick = exports.Media = exports.Links = exports.Link = exports.ImageBase = exports.Image = exports.HeaderBreadcrumbs = exports.FullWidthBackground = exports.FullscreenImage = exports.Foldable = exports.FileLink = exports.ErrorWrapper = exports.CardBase = exports.Button = exports.BlockBase = exports.BalancedMasonry = exports.BackLink = exports.BackgroundMedia = exports.BackgroundImage = exports.AnimateBlock = exports.Anchor = void 0;
+exports.IconWrapper = exports.InnerForm = exports.ContentList = exports.FullscreenMedia = exports.MetaInfo = exports.HTML = exports.RouterLink = exports.Author = exports.OverflowScroller = exports.Control = exports.YandexForm = exports.YFMWrapper = exports.VideoBlock = exports.UnpublishedLabel = exports.ToggleArrow = exports.Title = exports.Table = exports.ReactPlayer = exports.OutsideClick = exports.Media = exports.Links = exports.Link = exports.ImageBase = exports.Image = exports.HeaderBreadcrumbs = exports.FullWidthBackground = exports.FullscreenImage = exports.Foldable = exports.FileLink = exports.ErrorWrapper = exports.CardBase = exports.Buttons = exports.Button = exports.BlockBase = exports.BalancedMasonry = exports.BackLink = exports.BackgroundMedia = exports.BackgroundImage = exports.AnimateBlock = exports.Anchor = void 0;
 var Anchor_1 = require("./Anchor/Anchor");
 Object.defineProperty(exports, "Anchor", { enumerable: true, get: function () { return __importDefault(Anchor_1).default; } });
 var AnimateBlock_1 = require("./AnimateBlock/AnimateBlock");
@@ -20,6 +20,8 @@ var BlockBase_1 = require("./BlockBase/BlockBase");
 Object.defineProperty(exports, "BlockBase", { enumerable: true, get: function () { return __importDefault(BlockBase_1).default; } });
 var Button_1 = require("./Button/Button");
 Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return __importDefault(Button_1).default; } });
+var Buttons_1 = require("./Buttons/Buttons");
+Object.defineProperty(exports, "Buttons", { enumerable: true, get: function () { return __importDefault(Buttons_1).default; } });
 var CardBase_1 = require("./CardBase/CardBase");
 Object.defineProperty(exports, "CardBase", { enumerable: true, get: function () { return __importDefault(CardBase_1).default; } });
 var ErrorWrapper_1 = require("./ErrorWrapper/ErrorWrapper");
@@ -40,7 +42,7 @@ var ImageBase_1 = require("./ImageBase/ImageBase");
 Object.defineProperty(exports, "ImageBase", { enumerable: true, get: function () { return __importDefault(ImageBase_1).default; } });
 var Link_1 = require("./Link/Link");
 Object.defineProperty(exports, "Link", { enumerable: true, get: function () { return __importDefault(Link_1).default; } });
-var Links_1 = require("./Link/Links");
+var Links_1 = require("./Links/Links");
 Object.defineProperty(exports, "Links", { enumerable: true, get: function () { return __importDefault(Links_1).default; } });
 var Media_1 = require("./Media/Media");
 Object.defineProperty(exports, "Media", { enumerable: true, get: function () { return __importDefault(Media_1).default; } });

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

@@ -24,7 +24,7 @@ export declare const subBlockMap: {
     "price-detailed": (props: import("./models").PriceDetailedProps) => JSX.Element;
     "media-card": ({ border, analyticsEvents, ...mediaProps }: import("./models").MediaCardProps) => JSX.Element;
     "banner-card": (props: import("./models").BannerCardProps) => JSX.Element;
-    "layout-item": ({ content: { links, ...content }, metaInfo, media, border, fullscreen, icon, className, analyticsEvents, }: import("./models").LayoutItemProps) => JSX.Element;
+    "layout-item": ({ content: { links, buttons, ...content }, metaInfo, media, border, fullscreen, icon, className, analyticsEvents, controlPosition, }: import("./models").LayoutItemProps) => JSX.Element;
     "background-card": (props: import("./models").BackgroundCardProps) => JSX.Element;
     "basic-card": (props: import("./models").BasicCardProps) => JSX.Element;
     content: (props: import("./sub-blocks/Content/Content").ContentProps) => JSX.Element;

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/models/constructor-items/common.d.ts

@@ -297,9 +297,13 @@ export interface TitleItemBaseProps {
 export type MediaView = 'fit' | 'full';
 export type MediaBorder = 'shadow' | 'line' | 'none';
 export type CardBorder = MediaBorder;
+export type ControlPosition = 'content' | 'footer';
 export interface CardBaseProps {
     border?: CardBorder;
 }
+export type CardLayoutProps = {
+    controlPosition?: ControlPosition;
+};
 export interface PriceDescriptionProps {
     title: string;
     detailedTitle?: string;

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

@@ -3,7 +3,7 @@ import { ThemeSupporting } from '../../utils';
 import { HubspotEventData, HubspotEventHandlers } from '../../utils/hubspot';
 import { AnalyticsEventsBase, PixelEvent } from '../common';
 import { ContentBlockProps } from './blocks';
-import { AuthorItem, ButtonPixel, ButtonProps, CardBaseProps, ContentTheme, DividerSize, ImageCardMargins, ImageObjectProps, ImageProps, LinkProps, MediaProps, MediaView, PriceDetailedProps, TextTheme, Themable, ThemedImage } from './common';
+import { AuthorItem, ButtonPixel, ButtonProps, CardBaseProps, CardLayoutProps, ContentTheme, DividerSize, ImageCardMargins, ImageObjectProps, ImageProps, LinkProps, MediaProps, MediaView, PriceDetailedProps, TextTheme, Themable, ThemedImage } from './common';
 export declare enum SubBlockType {
     Divider = "divider",
     Quote = "quote",
@@ -97,14 +97,14 @@ export interface QuoteProps extends Themable, CardBaseProps {
     quoteType?: QuoteType;
     button?: ButtonProps;
 }
-export interface BackgroundCardProps extends CardBaseProps, AnalyticsEventsBase, Omit<ContentBlockProps, 'colSizes' | 'centered'> {
+export interface BackgroundCardProps extends CardBaseProps, AnalyticsEventsBase, CardLayoutProps, Omit<ContentBlockProps, 'colSizes' | 'centered'> {
     url?: string;
     urlTitle?: string;
     background?: ThemeSupporting<ImageObjectProps>;
     paddingBottom?: 's' | 'm' | 'l' | 'xl';
     backgroundColor?: string;
 }
-export interface BasicCardProps extends CardBaseProps, AnalyticsEventsBase, Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size' | 'theme'> {
+export interface BasicCardProps extends CardBaseProps, AnalyticsEventsBase, CardLayoutProps, Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size' | 'theme'> {
     url: string;
     urlTitle?: string;
     icon?: ImageProps;
@@ -134,7 +134,7 @@ export interface PriceCardProps extends CardBaseProps, Pick<ContentBlockProps, '
     backgroundColor?: string;
     list?: string[];
 }
-export interface LayoutItemProps extends ClassNameProps, AnalyticsEventsBase {
+export interface LayoutItemProps extends ClassNameProps, CardLayoutProps, AnalyticsEventsBase {
     content: Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size'>;
     media?: MediaProps;
     metaInfo?: string[];

package/build/cjs/schema/constants.d.ts

@@ -476,6 +476,10 @@ export declare const cardSchemas: {
                     type: string;
                 };
             };
+            controlPosition: {
+                type: string;
+                enum: string[];
+            };
             border: {
                 type: string;
                 enum: string[];
@@ -518,6 +522,10 @@ export declare const cardSchemas: {
                 type: string;
                 enum: string[];
             };
+            controlPosition: {
+                type: string;
+                enum: string[];
+            };
             title: {
                 oneOf: ({
                     type: string;
@@ -855,6 +863,10 @@ export declare const cardSchemas: {
                     optionName: string;
                 })[];
             };
+            controlPosition: {
+                type: string;
+                enum: string[];
+            };
             title: {
                 oneOf: ({
                     type: string;

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

@@ -1,20 +1,32 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
+const uikit_1 = require("@gravity-ui/uikit");
 const components_1 = require("../../components/");
 const theme_1 = require("../../context/theme");
 const utils_1 = require("../../utils");
+const renderContentControls_1 = tslib_1.__importDefault(require("../../utils/renderContentControls/renderContentControls"));
 const Content_1 = tslib_1.__importDefault(require("../Content/Content"));
+const renderCardFooterControlsContainer_1 = tslib_1.__importDefault(require("../renderCardFooterControlsContainer/renderCardFooterControlsContainer"));
 const b = (0, utils_1.block)('background-card');
 const BackgroundCard = (props) => {
-    const { url, title, text, border, background, paddingBottom, backgroundColor, additionalInfo, theme: cardTheme = 'default', links, buttons, analyticsEvents, urlTitle, } = props;
+    const { url, title, text, border, background, paddingBottom, backgroundColor, additionalInfo, theme: cardTheme = 'default', links, buttons, analyticsEvents, urlTitle, controlPosition = 'content', } = props;
+    const titleId = (0, uikit_1.useUniqId)();
     const theme = (0, theme_1.useTheme)();
     const hasBackgroundColor = backgroundColor || cardTheme !== 'default';
     const borderType = hasBackgroundColor ? 'none' : border;
+    const areControlsInFooter = !paddingBottom && controlPosition === 'footer';
+    const footerControls = (0, react_1.useMemo)(() => (0, renderContentControls_1.default)({
+        links: areControlsInFooter ? links : undefined,
+        buttons: areControlsInFooter ? buttons : undefined,
+        size: 's',
+        titleId,
+    }, renderCardFooterControlsContainer_1.default), [areControlsInFooter, links, buttons, titleId]);
     return (react_1.default.createElement(components_1.CardBase, { className: b({ padding: paddingBottom, theme: cardTheme }), url: url, border: borderType, analyticsEvents: analyticsEvents, urlTitle: urlTitle },
         react_1.default.createElement(components_1.CardBase.Content, null,
             react_1.default.createElement(components_1.BackgroundImage, Object.assign({ className: b('image') }, (0, utils_1.getThemedValue)(background, theme), { style: { backgroundColor } })),
-            react_1.default.createElement(Content_1.default, { title: title, text: text, additionalInfo: additionalInfo, size: "s", theme: cardTheme, links: links, buttons: buttons, colSizes: { all: 12, md: 12 } }))));
+            react_1.default.createElement(Content_1.default, { titleId: titleId, title: title, text: text, additionalInfo: additionalInfo, size: "s", theme: cardTheme, links: areControlsInFooter ? undefined : links, buttons: areControlsInFooter ? undefined : buttons, colSizes: { all: 12, md: 12 } })),
+        footerControls));
 };
 exports.default = BackgroundCard;

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

@@ -144,6 +144,10 @@ export declare const BackgroundCard: {
                     optionName: string;
                 })[];
             };
+            controlPosition: {
+                type: string;
+                enum: string[];
+            };
             title: {
                 oneOf: ({
                     type: string;

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

@@ -30,6 +30,9 @@ exports.BackgroundCard = {
                         optionName: 'list',
                     },
                 ],
+            }, controlPosition: {
+                type: 'string',
+                enum: ['content', 'footer'],
             } }),
     },
 };

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

@@ -1,21 +1,30 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
-const CardBase_1 = tslib_1.__importDefault(require("../../components/CardBase/CardBase"));
-const IconWrapper_1 = tslib_1.__importDefault(require("../../components/IconWrapper/IconWrapper"));
+const components_1 = require("../../components");
 const sub_blocks_1 = require("../../models/constructor-items/sub-blocks");
 const utils_1 = require("../../utils");
+const renderContentControls_1 = tslib_1.__importDefault(require("../../utils/renderContentControls/renderContentControls"));
 const Content_1 = tslib_1.__importDefault(require("../Content/Content"));
+const renderCardFooterControlsContainer_1 = tslib_1.__importDefault(require("../renderCardFooterControlsContainer/renderCardFooterControlsContainer"));
 const b = (0, utils_1.block)('basic-card');
 const BasicCard = (props) => {
-    const { title, text, icon, additionalInfo, links, list, buttons, iconPosition = sub_blocks_1.IconPosition.Top } = props, cardParams = tslib_1.__rest(props, ["title", "text", "icon", "additionalInfo", "links", "list", "buttons", "iconPosition"]);
+    const { title, text, icon, additionalInfo, links, list, buttons, iconPosition = sub_blocks_1.IconPosition.Top, controlPosition = 'content' } = props, cardParams = tslib_1.__rest(props, ["title", "text", "icon", "additionalInfo", "links", "list", "buttons", "iconPosition", "controlPosition"]);
     const titleId = (0, uikit_1.useUniqId)();
     const descriptionId = (0, uikit_1.useUniqId)();
-    return (react_1.default.createElement(CardBase_1.default, Object.assign({ className: b() }, cardParams, { extraProps: { 'aria-describedby': descriptionId, 'aria-labelledby': titleId } }),
-        react_1.default.createElement(CardBase_1.default.Content, null,
-            react_1.default.createElement(IconWrapper_1.default, { icon: icon ? { value: icon, position: iconPosition } : undefined },
-                react_1.default.createElement(Content_1.default, { title: title, titleId: titleId, text: text, textId: descriptionId, additionalInfo: additionalInfo, links: links, list: list, buttons: buttons, size: "s", colSizes: { all: 12, md: 12 } })))));
+    const areControlsInFooter = controlPosition === 'footer';
+    const footerControls = (0, react_1.useMemo)(() => (0, renderContentControls_1.default)({
+        links: areControlsInFooter ? links : undefined,
+        buttons: areControlsInFooter ? buttons : undefined,
+        size: 's',
+        titleId,
+    }, renderCardFooterControlsContainer_1.default), [areControlsInFooter, links, buttons, titleId]);
+    return (react_1.default.createElement(components_1.CardBase, Object.assign({ className: b() }, cardParams, { extraProps: { 'aria-describedby': descriptionId, 'aria-labelledby': titleId } }),
+        react_1.default.createElement(components_1.CardBase.Content, null,
+            react_1.default.createElement(components_1.IconWrapper, { icon: icon ? { value: icon, position: iconPosition } : undefined },
+                react_1.default.createElement(Content_1.default, { title: title, titleId: titleId, text: text, textId: descriptionId, additionalInfo: additionalInfo, links: areControlsInFooter ? undefined : links, list: list, buttons: areControlsInFooter ? undefined : buttons, size: "s", colSizes: { all: 12, md: 12 } }))),
+        footerControls));
 };
 exports.default = BasicCard;

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

@@ -31,6 +31,10 @@ export declare const BasicCard: {
                 type: string;
                 enum: string[];
             };
+            controlPosition: {
+                type: string;
+                enum: string[];
+            };
             title: {
                 oneOf: ({
                     type: string;

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

@@ -21,6 +21,9 @@ exports.BasicCard = {
             }, iconPosition: {
                 type: 'string',
                 enum: ['top', 'left'],
+            }, controlPosition: {
+                type: 'string',
+                enum: ['content', 'footer'],
             } }),
     },
 };

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

@@ -27,16 +27,6 @@ unpredictable css rules order in build */
   color: var(--g-color-text-primary);
 }
 
-.pc-content__buttons {
-  display: flex;
-  flex-wrap: wrap;
-  column-gap: 12px;
-}
-.pc-content__links {
-  display: flex;
-  flex-direction: column;
-  align-items: baseline;
-}
 .pc-content__link {
   display: block;
 }
@@ -67,12 +57,6 @@ unpredictable css rules order in build */
 .pc-content_size_s .pc-content__text_without-title {
   margin-top: 0;
 }
-.pc-content_size_s .pc-content__links,
-.pc-content_size_s .pc-content__link,
-.pc-content_size_s .pc-content__buttons,
-.pc-content_size_s .pc-content__button {
-  margin-top: 8px;
-}
 .pc-content_size_s .pc-content__list {
   margin-top: 16px;
 }
@@ -88,12 +72,6 @@ unpredictable css rules order in build */
   font-size: var(--g-text-body-3-font-size);
   line-height: var(--g-text-body-3-line-height);
 }
-.pc-content_size_l .pc-content__links,
-.pc-content_size_l .pc-content__link,
-.pc-content_size_l .pc-content__buttons,
-.pc-content_size_l .pc-content__button {
-  margin-top: 12px;
-}
 .pc-content_size_l .pc-content__list {
   margin-top: 24px;
 }

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

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
+const react_1 = tslib_1.__importStar(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const components_1 = require("../../components");
 const grid_1 = require("../../grid");
 const utils_1 = require("../../utils");
 const blocks_1 = require("../../utils/blocks");
+const renderContentControls_1 = tslib_1.__importDefault(require("../../utils/renderContentControls/renderContentControls"));
 const b = (0, utils_1.block)('content');
 function getTextSize(size) {
     switch (size) {
@@ -17,24 +18,6 @@ function getTextSize(size) {
             return 'm';
     }
 }
-function getLinkSize(size) {
-    switch (size) {
-        case 's':
-            return 'm';
-        case 'l':
-        default:
-            return 'l';
-    }
-}
-function getButtonSize(size) {
-    switch (size) {
-        case 's':
-            return 'm';
-        case 'l':
-        default:
-            return 'xl';
-    }
-}
 const Content = (props) => {
     const { title, titleId: titleIdFromProps, text, textId, additionalInfo, size = 'l', links, buttons, colSizes = { all: 12, sm: 8 }, centered, theme, className, list, qa, } = props;
     const qaAttributes = (0, blocks_1.getQaAttrubutes)(qa, ['links', 'link', 'buttons', 'button', 'list']);
@@ -44,6 +27,13 @@ const Content = (props) => {
     const hasTitle = Boolean(title);
     const defaultTitleId = (0, uikit_1.useUniqId)();
     const titleId = titleIdFromProps || defaultTitleId;
+    const controls = (0, react_1.useMemo)(() => (0, renderContentControls_1.default)({
+        size,
+        links,
+        buttons,
+        titleId,
+        qa: qaAttributes,
+    }), [size, links, buttons, titleId, qaAttributes]);
     return (react_1.default.createElement(grid_1.Col, { className: b({ size, centered, theme }, className), reset: true, sizes: colSizes, qa: qaAttributes.container },
         title && (react_1.default.createElement(components_1.Title, { className: b('title'), title: titleProps, colSizes: { all: 12 }, id: titleId })),
         text && (react_1.default.createElement("div", { className: b('text', { ['without-title']: !hasTitle }) },
@@ -56,7 +46,6 @@ const Content = (props) => {
                     'constructor-notice': true,
                     [`constructor-size-${size}`]: true,
                 } }))),
-        links && (react_1.default.createElement("div", { className: b('links'), "data-qa": qaAttributes.links }, links.map((link) => (react_1.default.createElement(components_1.Link, Object.assign({ className: b('link') }, link, { textSize: getLinkSize(size), key: link.url, qa: qaAttributes.link, extraProps: Object.assign({ 'aria-describedby': link.urlTitle ? undefined : titleId }, link.extraProps) })))))),
-        buttons && (react_1.default.createElement("div", { className: b('buttons'), "data-qa": qaAttributes.buttons }, buttons.map((item) => (react_1.default.createElement(components_1.Button, Object.assign({ className: b('button') }, item, { key: item.url, size: getButtonSize(size), qa: qaAttributes.button, extraProps: Object.assign({ 'aria-describedby': item.urlTitle ? undefined : titleId }, item.extraProps) }))))))));
+        controls));
 };
 exports.default = Content;

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

@@ -1,5 +1,10 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
+.pc-layout-item {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
 .pc-layout-item__media {
   width: 100%;
   display: block;
@@ -12,6 +17,7 @@ unpredictable css rules order in build */
   margin: 16px 0 -8px 0;
 }
 .pc-layout-item__content {
+  flex: auto;
   margin: 16px 16px 0 0;
 }
 .pc-layout-item__content_no-media {