@gravity-ui/page-constructor 4.37.4 → 4.38.0

package/build/cjs/sub-blocks/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.HubspotForm = exports.Content = exports.BasicCard = exports.BackgroundCard = exports.LayoutItem = exports.BannerCard = exports.MediaCard = exports.PriceDetailed = exports.Quote = exports.Divider = void 0;
+exports.PriceCard = exports.HubspotForm = exports.Content = exports.BasicCard = exports.BackgroundCard = exports.LayoutItem = exports.BannerCard = exports.MediaCard = exports.PriceDetailed = exports.Quote = exports.Divider = void 0;
 var Divider_1 = require("./Divider/Divider");
 Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return __importDefault(Divider_1).default; } });
 var Quote_1 = require("./Quote/Quote");
@@ -24,3 +24,5 @@ var Content_1 = require("./Content/Content");
 Object.defineProperty(exports, "Content", { enumerable: true, get: function () { return __importDefault(Content_1).default; } });
 var HubspotForm_1 = require("./HubspotForm");
 Object.defineProperty(exports, "HubspotForm", { enumerable: true, get: function () { return __importDefault(HubspotForm_1).default; } });
+var PriceCard_1 = require("./PriceCard/PriceCard");
+Object.defineProperty(exports, "PriceCard", { enumerable: true, get: function () { return __importDefault(PriceCard_1).default; } });

package/build/cjs/text-transform/config.js

@@ -304,4 +304,15 @@ exports.config = {
     [models_1.BlockType.CardLayoutBlock]: exports.blockHeaderTransformer,
     [models_1.BlockType.FilterBlock]: exports.blockHeaderTransformer,
     [models_1.BlockType.IconsBlock]: exports.blockHeaderTransformer,
+    [models_1.SubBlockType.PriceCard]: [
+        {
+            fields: ['title'],
+            transformer: common_1.typografTransformer,
+        },
+        {
+            fields: ['list'],
+            transformer: common_1.yfmTransformer,
+            parser: (0, common_1.createItemsParser)(['text']),
+        },
+    ],
 };

package/build/esm/{sub-blocks/Content → components}/ContentList/ContentList.css

@@ -15,6 +15,13 @@ unpredictable css rules order in build */
   margin-bottom: 1px;
   margin-right: 12px;
 }
+.pc-content-list_size_l .pc-content-list__icon_without_title {
+  width: 20px;
+  height: 20px;
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-right: 8px;
+}
 .pc-content-list_size_l .pc-content-list__item:not(:last-child) {
   margin-bottom: 16px;
 }
@@ -33,6 +40,12 @@ unpredictable css rules order in build */
   margin-bottom: 2px;
   margin-right: 8px;
 }
+.pc-content-list_size_s .pc-content-list__icon_without_title {
+  width: 18px;
+  height: 18px;
+  margin-top: 0;
+  margin-bottom: 0;
+}
 .pc-content-list_size_s .pc-content-list__text {
   font-size: var(--g-text-body-1-font-size);
   line-height: var(--g-text-body-1-line-height);

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

@@ -0,0 +1,5 @@
+import { ContentListProps } from '../../models';
+import { QAProps } from '../../models/common';
+import './ContentList.css';
+declare const ContentList: ({ list, size, qa }: ContentListProps & QAProps) => JSX.Element;
+export default ContentList;

package/build/esm/{sub-blocks/Content → components}/ContentList/ContentList.js

@@ -1,11 +1,9 @@
 import React from 'react';
 import { v4 as uuidv4 } from 'uuid';
-import { YFMWrapper } from '../../../components';
-import Image from '../../../components/Image/Image';
-import { getMediaImage } from '../../../components/Media/Image/utils';
-import { useTheme } from '../../../context/theme';
-import { block, getThemedValue } from '../../../utils';
-import { getQaAttrubutes } from '../../../utils/blocks';
+import { block } from '../../utils';
+import { getQaAttrubutes } from '../../utils/blocks';
+import YFMWrapper from '../YFMWrapper/YFMWrapper';
+import ItemIcon from './ContentListItemIcon';
 import './ContentList.css';
 const b = block('content-list');
 function getHeadingLevel(size) {
@@ -17,15 +15,12 @@ function getHeadingLevel(size) {
             return 'h3';
     }
 }
-const ContentList = ({ list, size, qa }) => {
-    const theme = useTheme();
+const ContentList = ({ list, size = 'l', qa }) => {
     const qaAttributes = getQaAttrubutes(qa, ['image', 'title', 'text']);
     return (React.createElement("div", { className: b({ size }), "data-qa": qa }, list === null || list === void 0 ? void 0 : list.map((item) => {
         const { icon, title, text } = item;
-        const iconThemed = getThemedValue(icon, theme);
-        const iconData = getMediaImage(iconThemed);
         return (React.createElement("div", { className: b('item'), key: uuidv4() },
-            React.createElement(Image, Object.assign({}, iconData, { className: b('icon'), qa: qaAttributes.image })),
+            React.createElement(ItemIcon, { icon: icon, className: b('icon', { without_title: !title }), qa: qaAttributes.image }),
             React.createElement("div", null,
                 title &&
                     React.createElement(getHeadingLevel(size), { className: b('title'), 'data-qa': qaAttributes.title }, title),

package/build/esm/components/ContentList/ContentListItemIcon.d.ts

@@ -0,0 +1,7 @@
+import { ClassNameProps, ImageProps, QAProps, SVGIcon } from '../../models';
+import { ThemeSupporting } from '../../utils';
+interface ListItemProps extends QAProps, ClassNameProps {
+    icon: ThemeSupporting<ImageProps | SVGIcon>;
+}
+declare const ContentListItemIcon: ({ icon, className, qa }: ListItemProps) => JSX.Element;
+export default ContentListItemIcon;

package/build/esm/components/ContentList/ContentListItemIcon.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useTheme } from '../../context/theme';
+import { getThemedValue } from '../../utils';
+import Image from '../Image/Image';
+import { getMediaImage } from '../Media/Image/utils';
+function isIconSvg(icon) {
+    return typeof icon === 'function';
+}
+const ContentListItemIcon = ({ icon, className, qa }) => {
+    const theme = useTheme();
+    const iconThemed = getThemedValue(icon, theme);
+    if (isIconSvg(iconThemed)) {
+        const Icon = iconThemed;
+        return (React.createElement("div", null,
+            React.createElement(Icon, { className: className })));
+    }
+    const iconData = getMediaImage(iconThemed);
+    return React.createElement(Image, Object.assign({}, iconData, { className: className, qa: qa }));
+};
+export default ContentListItemIcon;

package/build/esm/components/FileLink/FileLink.js

@@ -15,7 +15,7 @@ export var FileExtension;
     FileExtension["ZIP"] = "zip";
 })(FileExtension || (FileExtension = {}));
 export function getFileExt(name) {
-    if (name.includes(FIGMA_URL)) {
+    if (name === null || name === void 0 ? void 0 : name.includes(FIGMA_URL)) {
         return FileExtension.FIG;
     }
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion

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

@@ -34,5 +34,6 @@ export { default as RouterLink } from './RouterLink/RouterLink';
 export { default as HTML } from './HTML/HTML';
 export { default as MetaInfo } from './MetaInfo/MetaInfo';
 export { default as FullscreenMedia } from './FullscreenMedia/FullscreenMedia';
+export { default as ContentList } from './ContentList/ContentList';
 export type { RouterLinkProps } from './RouterLink/RouterLink';
 export type { ImageBaseProps } from './ImageBase/ImageBase';

package/build/esm/components/index.js

@@ -34,3 +34,4 @@ export { default as RouterLink } from './RouterLink/RouterLink';
 export { default as HTML } from './HTML/HTML';
 export { default as MetaInfo } from './MetaInfo/MetaInfo';
 export { default as FullscreenMedia } from './FullscreenMedia/FullscreenMedia';
+export { default as ContentList } from './ContentList/ContentList';

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

@@ -3,7 +3,7 @@ import { ButtonSize } from '@gravity-ui/uikit';
 import { GridColumnSize, GridColumnSizesType } from '../../grid/types';
 import { ThemeSupporting } from '../../utils';
 import { AnalyticsEventsBase } from '../common';
-import { AnchorProps, Animatable, BackgroundImageProps, ButtonProps, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, ImageDeviceProps, Justify, LegendTableMarkerType, LinkProps, MapProps, MediaDirection, MediaProps, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleItemBaseProps, TitleItemProps, YandexFormProps } from './common';
+import { AnchorProps, Animatable, BackgroundImageProps, ButtonProps, ContentSize, ContentTextSize, ContentTheme, FileLinkProps, HeaderBreadCrumbsProps, HeaderImageSize, HeaderOffset, HeaderWidth, ImageDeviceProps, ImageProps, Justify, LegendTableMarkerType, LinkProps, MapProps, MediaDirection, MediaProps, TextSize, TextTheme, ThemedImage, ThemedMediaProps, ThemedMediaVideoProps, TitleItemBaseProps, TitleItemProps, YandexFormProps } from './common';
 import { BannerCardProps, HubspotFormProps, SubBlock, SubBlockModels } from './sub-blocks';
 export declare enum BlockType {
     PromoFeaturesBlock = "promo-features-block",
@@ -270,10 +270,15 @@ export interface ContentLayoutBlockProps extends ContentLayoutBlockParams {
     textContent: ContentBlockProps;
     fileContent?: FileLinkProps[];
 }
+export type SVGIcon = React.FC<React.SVGProps<SVGSVGElement>>;
 export interface ContentItemProps {
     title?: string;
     text?: string;
-    icon: ThemedImage;
+    icon: ThemeSupporting<ImageProps | SVGIcon>;
+}
+export interface ContentListProps {
+    list: ContentItemProps[];
+    size: ContentSize;
 }
 export interface ContentBlockProps {
     title?: TitleItemBaseProps | string;

package/build/esm/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, ImageObjectProps, ImageProps, MediaProps, PriceDetailedProps, TextTheme, Themable, ThemedImage } from './common';
+import { AuthorItem, ButtonPixel, ButtonProps, CardBaseProps, ContentTheme, DividerSize, ImageObjectProps, ImageProps, LinkProps, MediaProps, PriceDetailedProps, TextTheme, Themable, ThemedImage } from './common';
 export declare enum SubBlockType {
     Divider = "divider",
     Quote = "quote",
@@ -21,7 +21,8 @@ export declare enum SubBlockType {
     /**
      * @deprecated Will be removed, use BasicCard instead
      */
-    Card = "card"
+    Card = "card",
+    PriceCard = "price-card"
 }
 export declare enum IconPosition {
     Top = "top",
@@ -98,6 +99,17 @@ export interface BannerCardProps {
 }
 export interface MediaCardProps extends MediaProps, AnalyticsEventsBase, CardBaseProps {
 }
+export interface PriceCardProps extends CardBaseProps, Pick<ContentBlockProps, 'theme'> {
+    title: string;
+    price: string;
+    pricePeriod?: string;
+    priceDetails?: string;
+    description?: string;
+    buttons?: ButtonProps[];
+    links?: LinkProps[];
+    backgroundColor?: string;
+    list?: string[];
+}
 export interface LayoutItemProps extends ClassNameProps, AnalyticsEventsBase {
     content: Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size'>;
     media: MediaProps;

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

@@ -17,6 +17,7 @@ export var SubBlockType;
      * @deprecated Will be removed, use BasicCard instead
      */
     SubBlockType["Card"] = "card";
+    SubBlockType["PriceCard"] = "price-card";
 })(SubBlockType || (SubBlockType = {}));
 export var IconPosition;
 (function (IconPosition) {

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

@@ -6,3 +6,4 @@ export * from '../../sub-blocks/LayoutItem/schema';
 export * from '../../sub-blocks/Quote/schema';
 export * from '../../sub-blocks/Divider/schema';
 export * from '../../sub-blocks/BasicCard/schema';
+export * from '../../sub-blocks/PriceCard/schema';

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

@@ -6,3 +6,4 @@ export * from '../../sub-blocks/LayoutItem/schema';
 export * from '../../sub-blocks/Quote/schema';
 export * from '../../sub-blocks/Divider/schema';
 export * from '../../sub-blocks/BasicCard/schema';
+export * from '../../sub-blocks/PriceCard/schema';

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

@@ -1,11 +1,9 @@
 import React from 'react';
 import { useUniqId } from '@gravity-ui/uikit';
-import { Button, Title, YFMWrapper } from '../../components';
-import LinkBlock from '../../components/Link/Link';
+import { Button, ContentList, Link as LinkBlock, Title, YFMWrapper } from '../../components';
 import { Col } from '../../grid';
 import { block } from '../../utils';
 import { getQaAttrubutes } from '../../utils/blocks';
-import ContentList from './ContentList/ContentList';
 import './Content.css';
 const b = block('content');
 function getTextSize(size) {

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

@@ -0,0 +1,80 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-price-card {
+  position: relative;
+}
+.pc-price-card__background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.pc-price-card__content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+.pc-price-card__content_theme_dark {
+  color: var(--g-color-text-light-primary);
+  --g-color-line-focus: var(--pc-color-line-focus-dark);
+}
+.pc-price-card__content_theme_dark .pc-price-card__info .yfm,
+.pc-price-card__content_theme_dark .pc-price-card__info .yfm * {
+  color: var(--g-color-text-light-primary);
+}
+.pc-price-card__content_theme_dark .pc-price-card__info a {
+  text-decoration: underline;
+}
+.pc-price-card__content_theme_dark .pc-price-card__info a:hover {
+  color: var(--g-color-text-light-secondary);
+}
+.pc-price-card__content_theme_light {
+  color: var(--g-color-text-dark-primary);
+}
+.pc-price-card__content_theme_light .pc-price-card__info .yfm,
+.pc-price-card__content_theme_light .pc-price-card__info .yfm * {
+  color: var(--g-color-text-dark-primary);
+}
+.pc-price-card__content_theme_light .pc-price-card__info a {
+  text-decoration: underline;
+}
+.pc-price-card__content_theme_light .pc-price-card__info a:hover {
+  color: var(--g-color-text-dark-secondary);
+}
+.pc-price-card__title {
+  font-size: var(--g-text-subheader-3-font-size);
+  line-height: var(--g-text-subheader-3-line-height);
+  margin-bottom: 24px;
+}
+.pc-price-card__price {
+  margin-bottom: 24px;
+}
+.pc-price-card__price-value {
+  font-size: var(--g-text-display-1-font-size);
+  line-height: var(--g-text-display-1-line-height);
+}
+.pc-price-card__price-period {
+  margin-left: 4px;
+}
+.pc-price-card__price-details {
+  margin-bottom: 12px;
+}
+.pc-price-card__main {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+.pc-price-card__info {
+  margin-bottom: 24px;
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+.pc-price-card__links > *:not(:last-child), .pc-price-card__buttons > *:not(:last-child) {
+  margin-right: 16px;
+}

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

@@ -0,0 +1,4 @@
+import { PriceCardProps } from '../../models';
+import './PriceCard.css';
+declare const PriceCard: (props: PriceCardProps) => JSX.Element;
+export default PriceCard;

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import Check from '@gravity-ui/icons/Check';
+import { BackgroundImage, Button, CardBase, ContentList, Link as LinkBlock } 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(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("div", { className: b('price') },
+                        React.createElement("div", null,
+                            React.createElement("span", { className: b('price-value') }, price),
+                            pricePeriod && (React.createElement("span", { className: b('price-period') },
+                                "/ ",
+                                pricePeriod))),
+                        priceDetails && (React.createElement("div", { className: b('price-details') }, priceDetails))),
+                    React.createElement("div", null, description),
+                    (list === null || list === void 0 ? void 0 : list.length) ? (React.createElement("div", { className: b('list') },
+                        React.createElement(ContentList, { list: list.map((item) => ({
+                                icon: Check,
+                                text: item,
+                            })), size: "s" }))) : 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({ key: link.url, textSize: "m" }, link))))))))));
+};
+export default PriceCard;