@gravity-ui/page-constructor 4.37.3 → 4.38.0

package/build/cjs/{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/cjs/components/ContentList/ContentList.d.ts

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

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

@@ -3,13 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const uuid_1 = require("uuid");
-const components_1 = require("../../../components");
-const Image_1 = tslib_1.__importDefault(require("../../../components/Image/Image"));
-const utils_1 = require("../../../components/Media/Image/utils");
-const theme_1 = require("../../../context/theme");
-const utils_2 = require("../../../utils");
-const blocks_1 = require("../../../utils/blocks");
-const b = (0, utils_2.block)('content-list');
+const utils_1 = require("../../utils");
+const blocks_1 = require("../../utils/blocks");
+const YFMWrapper_1 = tslib_1.__importDefault(require("../YFMWrapper/YFMWrapper"));
+const ContentListItemIcon_1 = tslib_1.__importDefault(require("./ContentListItemIcon"));
+const b = (0, utils_1.block)('content-list');
 function getHeadingLevel(size) {
     switch (size) {
         case 's':
@@ -19,19 +17,16 @@ function getHeadingLevel(size) {
             return 'h3';
     }
 }
-const ContentList = ({ list, size, qa }) => {
-    const theme = (0, theme_1.useTheme)();
+const ContentList = ({ list, size = 'l', qa }) => {
     const qaAttributes = (0, blocks_1.getQaAttrubutes)(qa, ['image', 'title', 'text']);
     return (react_1.default.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 = (0, utils_2.getThemedValue)(icon, theme);
-        const iconData = (0, utils_1.getMediaImage)(iconThemed);
         return (react_1.default.createElement("div", { className: b('item'), key: (0, uuid_1.v4)() },
-            react_1.default.createElement(Image_1.default, Object.assign({}, iconData, { className: b('icon'), qa: qaAttributes.image })),
+            react_1.default.createElement(ContentListItemIcon_1.default, { icon: icon, className: b('icon', { without_title: !title }), qa: qaAttributes.image }),
             react_1.default.createElement("div", null,
                 title &&
                     react_1.default.createElement(getHeadingLevel(size), { className: b('title'), 'data-qa': qaAttributes.title }, title),
-                text && (react_1.default.createElement(components_1.YFMWrapper, { className: b('text'), content: text, modifiers: { constructor: true }, qa: qaAttributes.text })))));
+                text && (react_1.default.createElement(YFMWrapper_1.default, { className: b('text'), content: text, modifiers: { constructor: true }, qa: qaAttributes.text })))));
     })));
 };
 exports.default = ContentList;

package/build/cjs/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/cjs/components/ContentList/ContentListItemIcon.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const theme_1 = require("../../context/theme");
+const utils_1 = require("../../utils");
+const Image_1 = tslib_1.__importDefault(require("../Image/Image"));
+const utils_2 = require("../Media/Image/utils");
+function isIconSvg(icon) {
+    return typeof icon === 'function';
+}
+const ContentListItemIcon = ({ icon, className, qa }) => {
+    const theme = (0, theme_1.useTheme)();
+    const iconThemed = (0, utils_1.getThemedValue)(icon, theme);
+    if (isIconSvg(iconThemed)) {
+        const Icon = iconThemed;
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement(Icon, { className: className })));
+    }
+    const iconData = (0, utils_2.getMediaImage)(iconThemed);
+    return react_1.default.createElement(Image_1.default, Object.assign({}, iconData, { className: className, qa: qa }));
+};
+exports.default = ContentListItemIcon;

package/build/cjs/components/FileLink/FileLink.js

@@ -18,7 +18,7 @@ var FileExtension;
     FileExtension["ZIP"] = "zip";
 })(FileExtension = exports.FileExtension || (exports.FileExtension = {}));
 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/cjs/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/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.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.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;
 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");
@@ -76,3 +76,5 @@ var MetaInfo_1 = require("./MetaInfo/MetaInfo");
 Object.defineProperty(exports, "MetaInfo", { enumerable: true, get: function () { return __importDefault(MetaInfo_1).default; } });
 var FullscreenMedia_1 = require("./FullscreenMedia/FullscreenMedia");
 Object.defineProperty(exports, "FullscreenMedia", { enumerable: true, get: function () { return __importDefault(FullscreenMedia_1).default; } });
+var ContentList_1 = require("./ContentList/ContentList");
+Object.defineProperty(exports, "ContentList", { enumerable: true, get: function () { return __importDefault(ContentList_1).default; } });

package/build/cjs/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/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, 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/cjs/models/constructor-items/sub-blocks.js

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

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

@@ -9,3 +9,4 @@ tslib_1.__exportStar(require("../../sub-blocks/LayoutItem/schema"), exports);
 tslib_1.__exportStar(require("../../sub-blocks/Quote/schema"), exports);
 tslib_1.__exportStar(require("../../sub-blocks/Divider/schema"), exports);
 tslib_1.__exportStar(require("../../sub-blocks/BasicCard/schema"), exports);
+tslib_1.__exportStar(require("../../sub-blocks/PriceCard/schema"), exports);

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

@@ -4,11 +4,9 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const uikit_1 = require("@gravity-ui/uikit");
 const components_1 = require("../../components");
-const Link_1 = tslib_1.__importDefault(require("../../components/Link/Link"));
 const grid_1 = require("../../grid");
 const utils_1 = require("../../utils");
 const blocks_1 = require("../../utils/blocks");
-const ContentList_1 = tslib_1.__importDefault(require("./ContentList/ContentList"));
 const b = (0, utils_1.block)('content');
 function getTextSize(size) {
     switch (size) {
@@ -50,14 +48,14 @@ const Content = (props) => {
         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 }) },
             react_1.default.createElement(components_1.YFMWrapper, { content: text, modifiers: { constructor: true, [`constructor-size-${size}`]: true }, id: textId }))),
-        (list === null || list === void 0 ? void 0 : list.length) ? react_1.default.createElement(ContentList_1.default, { list: list, size: size, qa: qaAttributes.list }) : null,
+        (list === null || list === void 0 ? void 0 : list.length) ? react_1.default.createElement(components_1.ContentList, { list: list, size: size, qa: qaAttributes.list }) : null,
         additionalInfo && (react_1.default.createElement("div", { className: b('notice') },
             react_1.default.createElement(components_1.YFMWrapper, { content: additionalInfo, modifiers: {
                     constructor: true,
                     '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(Link_1.default, 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) })))))),
+        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) }))))))));
 };
 exports.default = Content;

package/build/cjs/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/cjs/sub-blocks/PriceCard/PriceCard.d.ts

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

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

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const Check_1 = tslib_1.__importDefault(require("@gravity-ui/icons/Check"));
+const components_1 = require("../../components");
+const utils_1 = require("../../utils");
+const b = (0, utils_1.block)('price-card');
+const PriceCard = (props) => {
+    const { border, title, price, pricePeriod, priceDetails, theme, description, list, buttons, links, backgroundColor, } = props;
+    return (react_1.default.createElement(components_1.CardBase, { className: b({ theme }), border: border },
+        react_1.default.createElement(components_1.CardBase.Content, null,
+            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("div", { className: b('price') },
+                        react_1.default.createElement("div", null,
+                            react_1.default.createElement("span", { className: b('price-value') }, price),
+                            pricePeriod && (react_1.default.createElement("span", { className: b('price-period') },
+                                "/ ",
+                                pricePeriod))),
+                        priceDetails && (react_1.default.createElement("div", { className: b('price-details') }, priceDetails))),
+                    react_1.default.createElement("div", null, description),
+                    (list === null || list === void 0 ? void 0 : list.length) ? (react_1.default.createElement("div", { className: b('list') },
+                        react_1.default.createElement(components_1.ContentList, { list: list.map((item) => ({
+                                icon: Check_1.default,
+                                text: item,
+                            })), size: "s" }))) : null),
+                buttons && (react_1.default.createElement("div", { className: b('buttons') }, buttons.map((button) => (react_1.default.createElement(components_1.Button, Object.assign({ key: button.url }, button)))))),
+                links && (react_1.default.createElement("div", { className: b('links') }, links.map((link) => (react_1.default.createElement(components_1.Link, Object.assign({ key: link.url, textSize: "m" }, link))))))))));
+};
+exports.default = PriceCard;