@gravity-ui/page-constructor 4.54.0 → 4.56.0

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

@@ -1,20 +1,29 @@
 import { __rest } from "tslib";
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useUniqId } from '@gravity-ui/uikit';
-import CardBase from '../../components/CardBase/CardBase';
-import IconWrapper from '../../components/IconWrapper/IconWrapper';
+import { CardBase, IconWrapper } from '../../components';
 import { IconPosition } from '../../models/constructor-items/sub-blocks';
 import { block } from '../../utils';
+import renderContentControls from '../../utils/renderContentControls/renderContentControls';
 import Content from '../Content/Content';
+import renderCardFooterControlsContainer from '../renderCardFooterControlsContainer/renderCardFooterControlsContainer';
 import './BasicCard.css';
 const b = block('basic-card');
 const BasicCard = (props) => {
-    const { title, text, icon, additionalInfo, links, list, buttons, iconPosition = IconPosition.Top } = props, cardParams = __rest(props, ["title", "text", "icon", "additionalInfo", "links", "list", "buttons", "iconPosition"]);
+    const { title, text, icon, additionalInfo, links, list, buttons, iconPosition = IconPosition.Top, controlPosition = 'content' } = props, cardParams = __rest(props, ["title", "text", "icon", "additionalInfo", "links", "list", "buttons", "iconPosition", "controlPosition"]);
     const titleId = useUniqId();
     const descriptionId = useUniqId();
+    const areControlsInFooter = controlPosition === 'footer';
+    const footerControls = useMemo(() => renderContentControls({
+        links: areControlsInFooter ? links : undefined,
+        buttons: areControlsInFooter ? buttons : undefined,
+        size: 's',
+        titleId,
+    }, renderCardFooterControlsContainer), [areControlsInFooter, links, buttons, titleId]);
     return (React.createElement(CardBase, Object.assign({ className: b() }, cardParams, { extraProps: { 'aria-describedby': descriptionId, 'aria-labelledby': titleId } }),
         React.createElement(CardBase.Content, null,
             React.createElement(IconWrapper, { icon: icon ? { value: icon, position: iconPosition } : undefined },
-                React.createElement(Content, { title: title, titleId: titleId, text: text, textId: descriptionId, additionalInfo: additionalInfo, links: links, list: list, buttons: buttons, size: "s", colSizes: { all: 12, md: 12 } })))));
+                React.createElement(Content, { 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));
 };
 export default BasicCard;

package/build/esm/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/esm/sub-blocks/BasicCard/schema.js

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

package/build/esm/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/esm/sub-blocks/Content/Content.js

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useUniqId } from '@gravity-ui/uikit';
-import { Button, ContentList, Link as LinkBlock, Title, YFMWrapper } from '../../components';
+import { ContentList, Title, YFMWrapper } from '../../components';
 import { Col } from '../../grid';
 import { block } from '../../utils';
 import { getQaAttrubutes } from '../../utils/blocks';
+import renderContentControls from '../../utils/renderContentControls/renderContentControls';
 import './Content.css';
 const b = block('content');
 function getTextSize(size) {
@@ -15,24 +16,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 = getQaAttrubutes(qa, ['links', 'link', 'buttons', 'button', 'list']);
@@ -42,6 +25,13 @@ const Content = (props) => {
     const hasTitle = Boolean(title);
     const defaultTitleId = useUniqId();
     const titleId = titleIdFromProps || defaultTitleId;
+    const controls = useMemo(() => renderContentControls({
+        size,
+        links,
+        buttons,
+        titleId,
+        qa: qaAttributes,
+    }), [size, links, buttons, titleId, qaAttributes]);
     return (React.createElement(Col, { className: b({ size, centered, theme }, className), reset: true, sizes: colSizes, qa: qaAttributes.container },
         title && (React.createElement(Title, { className: b('title'), title: titleProps, colSizes: { all: 12 }, id: titleId })),
         text && (React.createElement("div", { className: b('text', { ['without-title']: !hasTitle }) },
@@ -54,7 +44,6 @@ const Content = (props) => {
                     'constructor-notice': true,
                     [`constructor-size-${size}`]: true,
                 } }))),
-        links && (React.createElement("div", { className: b('links'), "data-qa": qaAttributes.links }, links.map((link) => (React.createElement(LinkBlock, 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.createElement("div", { className: b('buttons'), "data-qa": qaAttributes.buttons }, buttons.map((item) => (React.createElement(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));
 };
 export default Content;

package/build/esm/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 {

package/build/esm/sub-blocks/LayoutItem/LayoutItem.d.ts

@@ -1,4 +1,4 @@
 import { LayoutItemProps } from '../../models';
 import './LayoutItem.css';
-declare const LayoutItem: ({ content: { links, ...content }, metaInfo, media, border, fullscreen, icon, className, analyticsEvents, }: LayoutItemProps) => JSX.Element;
+declare const LayoutItem: ({ content: { links, buttons, ...content }, metaInfo, media, border, fullscreen, icon, className, analyticsEvents, controlPosition, }: LayoutItemProps) => JSX.Element;
 export default LayoutItem;

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

@@ -1,14 +1,25 @@
 import { __rest } from "tslib";
-import React from 'react';
+import React, { useMemo } from 'react';
+import { useUniqId } from '@gravity-ui/uikit';
 import { FullscreenMedia, IconWrapper, Media, MetaInfo } from '../../components';
 import { block } from '../../utils';
+import renderContentControls from '../../utils/renderContentControls/renderContentControls';
 import Content from '../Content/Content';
 import { getLayoutItemLinks, hasFullscreen, showFullscreenIcon } from './utils';
 import './LayoutItem.css';
 const b = block('layout-item');
 const LayoutItem = (_a) => {
-    var _b = _a.content, { links } = _b, content = __rest(_b, ["links"]), { metaInfo, media, border, fullscreen, icon, className, analyticsEvents } = _a;
-    const contentProps = Object.assign(Object.assign({}, content), { links: getLayoutItemLinks(links), size: 's', colSizes: { all: 12, md: 12 } });
+    var _b = _a.content, { links, buttons } = _b, content = __rest(_b, ["links", "buttons"]), { metaInfo, media, border, fullscreen, icon, className, analyticsEvents, controlPosition = 'content' } = _a;
+    const normalizedLinks = useMemo(() => getLayoutItemLinks(links), [links]);
+    const areControlsInFooter = controlPosition === 'footer';
+    const contentProps = Object.assign(Object.assign(Object.assign({}, content), (areControlsInFooter ? {} : { links: normalizedLinks, buttons })), { size: 's', colSizes: { all: 12, md: 12 } });
+    const titleId = useUniqId();
+    const footerControls = useMemo(() => renderContentControls({
+        links: areControlsInFooter ? links : undefined,
+        buttons: areControlsInFooter ? buttons : undefined,
+        size: 's',
+        titleId,
+    }), [areControlsInFooter, links, buttons, titleId]);
     const renderMedia = () => {
         if (!media) {
             return null;
@@ -23,6 +34,7 @@ const LayoutItem = (_a) => {
         metaInfo && React.createElement(MetaInfo, { items: metaInfo, className: b('meta-info') }),
         React.createElement("div", { className: b('content', { 'no-media': !media }) },
             React.createElement(IconWrapper, { icon: icon },
-                React.createElement(Content, Object.assign({}, contentProps))))));
+                React.createElement(Content, Object.assign({}, contentProps, { titleId: titleId })))),
+        footerControls));
 };
 export default LayoutItem;

package/build/esm/sub-blocks/LayoutItem/schema.d.ts

@@ -450,6 +450,10 @@ export declare const LayoutItem: {
                 optionName: string;
             })[];
         };
+        controlPosition: {
+            type: string;
+            enum: string[];
+        };
         type: {};
         when: {
             type: string;

package/build/esm/sub-blocks/LayoutItem/schema.js

@@ -20,5 +20,8 @@ export const LayoutItem = {
                     optionName: 'list',
                 },
             ],
+        }, controlPosition: {
+            type: 'string',
+            enum: ['content', 'footer'],
         } }),
 };

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

@@ -86,11 +86,8 @@ unpredictable css rules order in build */
 .pc-price-card__links, .pc-price-card__buttons {
   margin-top: 24px;
 }
-.pc-price-card__links > *:not(:last-child), .pc-price-card__buttons > *:not(:last-child) {
-  margin-right: 16px;
-}
-.pc-price-card__link {
-  margin-top: 0;
+.pc-price-card__footer {
+  margin-top: 0px;
 }
 @media (max-width: 769px) {
   .pc-price-card__title, .pc-price-card__price {

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

@@ -1,17 +1,17 @@
 import React from 'react';
 import Check from '@gravity-ui/icons/Check';
-import { BackgroundImage, Button, CardBase, ContentList, Link as LinkBlock } from '../../components';
+import { BackgroundImage, Buttons, CardBase, ContentList, HTML, Links } from '../../components';
 import { block } from '../../utils';
 import './PriceCard.css';
 const b = block('price-card');
 const PriceCard = (props) => {
     const { border, title, price, pricePeriod, priceDetails, theme, description, list, buttons, links, backgroundColor, } = props;
     return (React.createElement(CardBase, { className: b({ theme }), border: border },
-        React.createElement(CardBase.Content, null,
+        React.createElement(CardBase.Content, { key: "content" },
             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),
@@ -25,7 +25,7 @@ const PriceCard = (props) => {
                                 icon: Check,
                                 text: item,
                             })), size: "l" }))) : null),
-                buttons && (React.createElement("div", { className: b('buttons') }, buttons.map((button) => (React.createElement(Button, Object.assign({ key: button.url }, button)))))),
-                links && (React.createElement("div", { className: b('links') }, links.map((link) => (React.createElement(LinkBlock, Object.assign({ className: b('link'), key: link.url, textSize: "m" }, link))))))))));
+                React.createElement(Buttons, { className: b('buttons'), buttons: buttons, size: "s" }),
+                React.createElement(Links, { className: b('links'), links: links, size: "s" })))));
 };
 export default PriceCard;

package/build/esm/sub-blocks/PriceCard/schema.d.ts

@@ -398,6 +398,10 @@ export declare const PriceCardBlock: {
                     type: string;
                 };
             };
+            controlPosition: {
+                type: string;
+                enum: string[];
+            };
             border: {
                 type: string;
                 enum: string[];

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

@@ -27,6 +27,9 @@ export const PriceCardBlock = {
                 items: {
                     type: 'string',
                 },
+            }, controlPosition: {
+                type: 'string',
+                enum: ['content', 'footer'],
             } }),
     },
 };

package/build/esm/sub-blocks/renderCardFooterControlsContainer/CardFooterControlsContainer.css

@@ -0,0 +1,3 @@
+.pc-card-footer-controls {
+  margin-top: 0px;
+}

package/build/esm/sub-blocks/renderCardFooterControlsContainer/renderCardFooterControlsContainer.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const renderCardFooterControlsContainer: (children: React.ReactElement) => JSX.Element;
+export default renderCardFooterControlsContainer;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { CardBase } from '../../components';
+import { block } from '../../utils';
+const b = block('card-footer-controls-containe');
+const renderCardFooterControlsContainer = (children) => (React.createElement(CardBase.Footer, { className: b() }, children));
+export default renderCardFooterControlsContainer;

package/build/esm/utils/renderContentControls/ContentControls.css

@@ -0,0 +1,6 @@
+.pc-content-controls__links_size_s, .pc-content-controls__buttons_size_s {
+  margin-top: 16px;
+}
+.pc-content-controls__links_size_l, .pc-content-controls__buttons_size_l {
+  margin-top: 24px;
+}

package/build/esm/utils/renderContentControls/renderContentControls.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ButtonProps, ContentSize, LinkProps } from '../../models';
+import './ContentControls.css';
+type ContentControlsArgs = {
+    links?: LinkProps[];
+    buttons?: ButtonProps[];
+    titleId?: string;
+    size?: ContentSize;
+    qa?: Record<string, string>;
+};
+declare const renderContentControls: ({ links, buttons, titleId, size, qa }: ContentControlsArgs, renderContainer?: (children: React.ReactElement) => React.ReactElement) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null;
+export default renderContentControls;

package/build/esm/utils/renderContentControls/renderContentControls.js

@@ -0,0 +1,14 @@
+import React, { Fragment } from 'react';
+import { Buttons, Links } from '../../components';
+import { block } from '../../utils';
+import './ContentControls.css';
+const b = block('content-controls');
+const renderContentControls = ({ links, buttons, titleId, size = 's', qa = {} }, renderContainer = (children) => children) => {
+    const { links: linksQa, link: linkQa, buttons: buttonsQa, button: buttonQa } = qa;
+    return links || buttons
+        ? renderContainer(React.createElement(Fragment, null,
+            React.createElement(Links, { className: b('links', { size }), size: size, links: links, titleId: titleId, qa: linksQa, linkQa: linkQa }),
+            React.createElement(Buttons, { className: b('buttons', { size }), size: size, buttons: buttons, titleId: titleId, qa: buttonsQa, buttonQa: buttonQa })))
+        : null;
+};
+export default renderContentControls;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/page-constructor",
-  "version": "4.54.0",
+  "version": "4.56.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/server/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/server/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[];