@gravity-ui/page-constructor 8.5.0 → 8.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/containers/PageConstructor/PageConstructor.css +9 -1
- package/build/cjs/models/constructor-items/sub-blocks.d.ts +1 -1
- package/build/cjs/models/constructor-items/sub-blocks.js.map +1 -1
- package/build/cjs/sub-blocks/ImageCard/ImageCard.js +7 -2
- package/build/cjs/sub-blocks/ImageCard/ImageCard.js.map +1 -1
- package/build/esm/containers/PageConstructor/PageConstructor.css +9 -1
- package/build/esm/models/constructor-items/sub-blocks.d.ts +1 -1
- package/build/esm/models/constructor-items/sub-blocks.js.map +1 -1
- package/build/esm/sub-blocks/ImageCard/ImageCard.js +8 -3
- package/build/esm/sub-blocks/ImageCard/ImageCard.js.map +1 -1
- package/package.json +3 -2
- package/server/models/constructor-items/sub-blocks.d.ts +1 -1
- package/styles/styles.css +9 -1
- package/styles/yfm.scss +9 -1
|
@@ -107,7 +107,15 @@ unpredictable css rules order in build */
|
|
|
107
107
|
.yfm_constructor.yfm_constructor_size_s p {
|
|
108
108
|
margin-bottom: 8px;
|
|
109
109
|
}
|
|
110
|
-
.yfm_constructor.yfm_constructor_theme_dark
|
|
110
|
+
.yfm_constructor.yfm_constructor_theme_dark h1,
|
|
111
|
+
.yfm_constructor.yfm_constructor_theme_dark h2,
|
|
112
|
+
.yfm_constructor.yfm_constructor_theme_dark h3,
|
|
113
|
+
.yfm_constructor.yfm_constructor_theme_dark h4,
|
|
114
|
+
.yfm_constructor.yfm_constructor_theme_dark h5,
|
|
115
|
+
.yfm_constructor.yfm_constructor_theme_dark h6,
|
|
116
|
+
.yfm_constructor.yfm_constructor_theme_dark span,
|
|
117
|
+
.yfm_constructor.yfm_constructor_theme_dark p,
|
|
118
|
+
.yfm_constructor.yfm_constructor_theme_dark li {
|
|
111
119
|
color: var(--g-color-text-light-primary);
|
|
112
120
|
}
|
|
113
121
|
|
|
@@ -155,7 +155,7 @@ export interface LayoutItemProps extends ClassNameProps, CardLayoutProps, Analyt
|
|
|
155
155
|
fullscreen?: boolean;
|
|
156
156
|
icon?: ThemeSupporting<PositionedIcon>;
|
|
157
157
|
}
|
|
158
|
-
export interface ImageCardProps extends CardBaseProps, CardLayoutProps, Omit<ContentBlockProps, 'colSizes' | 'centered' | 'controlPosition'> {
|
|
158
|
+
export interface ImageCardProps extends CardBaseProps, AnalyticsEventsBase, CardLayoutProps, Omit<ContentBlockProps, 'colSizes' | 'centered' | 'controlPosition'> {
|
|
159
159
|
image: ThemeSupporting<ImageProps>;
|
|
160
160
|
enableImageBorderRadius?: boolean;
|
|
161
161
|
margins?: ImageCardMargins;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sub-blocks.js","sourceRoot":"../../../../src","sources":["models/constructor-items/sub-blocks.ts"],"names":[],"mappings":";;;AA8BA,IAAY,YAoBX;AApBD,WAAY,YAAY;IACpB,mCAAmB,CAAA;IACnB,+BAAe,CAAA;IACf;;OAEG;IACH,gDAAgC,CAAA;IAChC,wCAAwB,CAAA;IACxB,0CAA0B,CAAA;IAC1B,0CAA0B,CAAA;IAC1B,kDAAkC,CAAA;IAClC,wCAAwB,CAAA;IACxB,mCAAmB,CAAA;IACnB,4CAA4B,CAAA;IAC5B;;OAEG;IACH,6BAAa,CAAA;IACb,wCAAwB,CAAA;IACxB,wCAAwB,CAAA;AAC5B,CAAC,EApBW,YAAY,4BAAZ,YAAY,QAoBvB;AAED,IAAY,YAGX;AAHD,WAAY,YAAY;IACpB,2BAAW,CAAA;IACX,6BAAa,CAAA;AACjB,CAAC,EAHW,YAAY,4BAAZ,YAAY,QAGvB;AAkBD,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC1B,uCAAiB,CAAA;IACjB,yCAAmB,CAAA;AACvB,CAAC,EAHW,kBAAkB,kCAAlB,kBAAkB,QAG7B;AAEY,QAAA,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC","sourcesContent":["import {ClassNameProps, GravityIconProps, QuoteType} from '../../models';\nimport {ThemeSupporting} from '../../utils';\nimport {\n HubspotEventData,\n HubspotEventHandlers,\n HubspotFormDefaultValues,\n} from '../../utils/hubspot';\nimport {AnalyticsEventsBase} from '../common';\n\nimport {ContentBlockProps} from './blocks';\nimport {\n AuthorItem,\n ButtonProps,\n CardBaseProps,\n CardLayoutProps,\n ContentTheme,\n DividerSize,\n ImageCardMargins,\n ImageObjectProps,\n ImageProps,\n LayoutItemContentMargin,\n LinkProps,\n MediaProps,\n MediaView,\n PriceDetailedProps,\n TextTheme,\n Themable,\n ThemedImage,\n} from './common';\n\nexport enum SubBlockType {\n Divider = 'divider',\n Quote = 'quote',\n /**\n * @deprecated Will be removed\n */\n PriceDetailed = 'price-detailed',\n MediaCard = 'media-card',\n BannerCard = 'banner-card',\n LayoutItem = 'layout-item',\n BackgroundCard = 'background-card',\n BasicCard = 'basic-card',\n Content = 'content',\n HubspotForm = 'hubspot-form',\n /**\n * @deprecated Will be removed, use BasicCard instead\n */\n Card = 'card',\n PriceCard = 'price-card',\n ImageCard = 'image-card',\n}\n\nexport enum IconPosition {\n Top = 'top',\n Left = 'left',\n}\n\nexport interface PositionedIcon {\n value: ImageProps;\n position?: IconPosition;\n}\n\nexport interface PositionedGravityIcon {\n value: GravityIconProps;\n position?: IconPosition;\n}\n\nexport interface IconWrapperProps {\n icon?: PositionedIcon;\n gravityIcon?: PositionedGravityIcon;\n size?: 's' | 'm' | 'l' | 'xl';\n}\n\nexport enum ImageCardDirection {\n Direct = 'direct',\n Reverse = 'reverse',\n}\n\nexport const SubBlockTypes = Object.values(SubBlockType);\n\nexport interface DividerProps {\n size?: DividerSize;\n border?: boolean;\n}\n\nexport interface HubspotFormProps extends HubspotEventHandlers, AnalyticsEventsBase {\n className?: string;\n theme?: ContentTheme;\n isMobile?: boolean;\n region?: string;\n portalId: string;\n formId: string;\n formInstanceId?: string;\n formClassName?: string;\n\n /**\n * To use this handler for component that is rendered in iframe, set up useLoopBackHubspotEvents hook on top level frame\n */\n onBeforeLoad?: (arg: HubspotEventData) => void;\n\n /**\n * To use this handler for component that is rendered in iframe, set up useLoopBackHubspotEvents hook on top level frame\n */\n onBeforeSubmit?: (arg: HubspotEventData) => void;\n\n /**\n * To use this handler for component that is rendered in iframe, set up useLoopBackHubspotEvents hook on top level frame\n */\n onSubmit?: (arg: HubspotEventData) => void;\n\n /**\n * To use this handler for component that is rendered in iframe, set up useLoopBackHubspotEvents hook on top level frame\n */\n onLoad?: (arg: HubspotEventData) => void;\n hubspotEvents?: string[];\n createDOMElement?: boolean;\n defaultValues?: HubspotFormDefaultValues;\n}\n\n//cards\nexport interface QuoteProps extends Themable, CardBaseProps {\n text?: string;\n // for backward compatibility, yfmText will become property 'text' in major\n yfmText?: string;\n image: ThemedImage;\n logo: ThemeSupporting<ImageProps>;\n color?: string;\n /**\n * @deprecated use property button instead\n */\n url?: string;\n /**\n * @deprecated use property button instead\n */\n urlTitle?: string;\n author?: AuthorItem;\n /**\n * @deprecated use property button instead\n */\n buttonText?: string;\n theme?: TextTheme;\n quoteType?: QuoteType;\n button?: ButtonProps;\n}\n\nexport interface BackgroundCardProps\n extends CardBaseProps,\n AnalyticsEventsBase,\n CardLayoutProps,\n Omit<ContentBlockProps, 'centered' | 'controlPosition'> {\n url?: string;\n urlTitle?: string;\n background?: ThemeSupporting<ImageObjectProps>;\n paddingBottom?: 's' | 'm' | 'l' | 'xl';\n backgroundColor?: string;\n}\n\nexport interface BasicCardProps\n extends CardBaseProps,\n AnalyticsEventsBase,\n CardLayoutProps,\n Omit<ContentBlockProps, 'colSizes' | 'centered' | 'theme' | 'controlPosition'> {\n url: string;\n urlTitle?: string;\n icon?: ThemeSupporting<ImageProps>;\n gravityIcon?: ThemeSupporting<GravityIconProps>;\n target?: string;\n iconPosition?: IconPosition;\n /**\n * @deprecated This property will be removed in future versions\n */\n hoverBackgroundColor?: string;\n}\n\nexport interface BannerCardProps {\n title: string;\n subtitle?: string;\n className?: string;\n image?: ThemeSupporting<string>;\n disableCompress?: boolean;\n color?: ThemeSupporting<string>;\n theme?: TextTheme;\n button?: Pick<ButtonProps, 'text' | 'url' | 'target' | 'theme'>;\n mediaView?: MediaView;\n}\n\nexport interface MediaCardProps extends MediaProps, AnalyticsEventsBase, CardBaseProps {}\n\nexport interface PriceCardProps extends CardBaseProps, Pick<ContentBlockProps, 'theme'> {\n title: string;\n price: string;\n pricePeriod?: string;\n priceDetails?: string;\n description?: string;\n buttons?: ButtonProps[];\n links?: LinkProps[];\n backgroundColor?: string;\n list?: string[];\n}\n\nexport interface LayoutItemProps extends ClassNameProps, CardLayoutProps, AnalyticsEventsBase {\n content: Omit<ContentBlockProps, 'colSizes' | 'centered'>;\n contentMargin?: LayoutItemContentMargin;\n media?: ThemeSupporting<MediaProps>;\n metaInfo?: string[];\n border?: boolean;\n fullscreen?: boolean;\n icon?: ThemeSupporting<PositionedIcon>;\n}\n\nexport interface ImageCardProps\n extends CardBaseProps,\n CardLayoutProps,\n Omit<ContentBlockProps, 'colSizes' | 'centered' | 'controlPosition'> {\n image: ThemeSupporting<ImageProps>;\n enableImageBorderRadius?: boolean;\n margins?: ImageCardMargins;\n direction?: ImageCardDirection;\n backgroundColor?: string;\n url?: string;\n urlTitle?: string;\n target?: string;\n}\n\n// sub-block models\nexport type DividerModel = {\n type: SubBlockType.Divider;\n} & DividerProps;\n\nexport type QuoteModel = {\n type: SubBlockType.Quote;\n} & QuoteProps;\n\nexport type LayoutItemModel = {\n type: SubBlockType.LayoutItem;\n} & LayoutItemProps;\n\nexport type BackgroundCardModel = {\n type: SubBlockType.BackgroundCard;\n} & BackgroundCardProps;\n\n/** @deprecated */\nexport type PriceDetailedModel = {\n type: SubBlockType.PriceDetailed;\n} & PriceDetailedProps;\n\nexport type MediaCardModel = {\n type: SubBlockType.MediaCard;\n} & MediaCardProps;\n\nexport type HubspotFormModel = {\n type: SubBlockType.HubspotForm;\n} & HubspotFormProps;\n\nexport type BannerCardModel = {\n type: SubBlockType.BannerCard;\n} & BannerCardProps;\n\nexport type BasicCardModel = {\n type: SubBlockType.BasicCard;\n} & BasicCardProps;\n\nexport type PriceCardModel = {\n type: SubBlockType.PriceCard;\n} & PriceCardProps;\n\nexport type ImageCardModel = {\n type: SubBlockType.ImageCard;\n} & ImageCardProps;\n\nexport type SubBlockModels =\n | DividerModel\n | QuoteModel\n | PriceDetailedModel\n | MediaCardModel\n | BackgroundCardModel\n | HubspotFormModel\n | BannerCardModel\n | BasicCardModel\n | PriceCardModel\n | LayoutItemModel\n | ImageCardModel;\n\nexport type SubBlock = SubBlockModels;\n"]}
|
|
1
|
+
{"version":3,"file":"sub-blocks.js","sourceRoot":"../../../../src","sources":["models/constructor-items/sub-blocks.ts"],"names":[],"mappings":";;;AA8BA,IAAY,YAoBX;AApBD,WAAY,YAAY;IACpB,mCAAmB,CAAA;IACnB,+BAAe,CAAA;IACf;;OAEG;IACH,gDAAgC,CAAA;IAChC,wCAAwB,CAAA;IACxB,0CAA0B,CAAA;IAC1B,0CAA0B,CAAA;IAC1B,kDAAkC,CAAA;IAClC,wCAAwB,CAAA;IACxB,mCAAmB,CAAA;IACnB,4CAA4B,CAAA;IAC5B;;OAEG;IACH,6BAAa,CAAA;IACb,wCAAwB,CAAA;IACxB,wCAAwB,CAAA;AAC5B,CAAC,EApBW,YAAY,4BAAZ,YAAY,QAoBvB;AAED,IAAY,YAGX;AAHD,WAAY,YAAY;IACpB,2BAAW,CAAA;IACX,6BAAa,CAAA;AACjB,CAAC,EAHW,YAAY,4BAAZ,YAAY,QAGvB;AAkBD,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC1B,uCAAiB,CAAA;IACjB,yCAAmB,CAAA;AACvB,CAAC,EAHW,kBAAkB,kCAAlB,kBAAkB,QAG7B;AAEY,QAAA,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC","sourcesContent":["import {ClassNameProps, GravityIconProps, QuoteType} from '../../models';\nimport {ThemeSupporting} from '../../utils';\nimport {\n HubspotEventData,\n HubspotEventHandlers,\n HubspotFormDefaultValues,\n} from '../../utils/hubspot';\nimport {AnalyticsEventsBase} from '../common';\n\nimport {ContentBlockProps} from './blocks';\nimport {\n AuthorItem,\n ButtonProps,\n CardBaseProps,\n CardLayoutProps,\n ContentTheme,\n DividerSize,\n ImageCardMargins,\n ImageObjectProps,\n ImageProps,\n LayoutItemContentMargin,\n LinkProps,\n MediaProps,\n MediaView,\n PriceDetailedProps,\n TextTheme,\n Themable,\n ThemedImage,\n} from './common';\n\nexport enum SubBlockType {\n Divider = 'divider',\n Quote = 'quote',\n /**\n * @deprecated Will be removed\n */\n PriceDetailed = 'price-detailed',\n MediaCard = 'media-card',\n BannerCard = 'banner-card',\n LayoutItem = 'layout-item',\n BackgroundCard = 'background-card',\n BasicCard = 'basic-card',\n Content = 'content',\n HubspotForm = 'hubspot-form',\n /**\n * @deprecated Will be removed, use BasicCard instead\n */\n Card = 'card',\n PriceCard = 'price-card',\n ImageCard = 'image-card',\n}\n\nexport enum IconPosition {\n Top = 'top',\n Left = 'left',\n}\n\nexport interface PositionedIcon {\n value: ImageProps;\n position?: IconPosition;\n}\n\nexport interface PositionedGravityIcon {\n value: GravityIconProps;\n position?: IconPosition;\n}\n\nexport interface IconWrapperProps {\n icon?: PositionedIcon;\n gravityIcon?: PositionedGravityIcon;\n size?: 's' | 'm' | 'l' | 'xl';\n}\n\nexport enum ImageCardDirection {\n Direct = 'direct',\n Reverse = 'reverse',\n}\n\nexport const SubBlockTypes = Object.values(SubBlockType);\n\nexport interface DividerProps {\n size?: DividerSize;\n border?: boolean;\n}\n\nexport interface HubspotFormProps extends HubspotEventHandlers, AnalyticsEventsBase {\n className?: string;\n theme?: ContentTheme;\n isMobile?: boolean;\n region?: string;\n portalId: string;\n formId: string;\n formInstanceId?: string;\n formClassName?: string;\n\n /**\n * To use this handler for component that is rendered in iframe, set up useLoopBackHubspotEvents hook on top level frame\n */\n onBeforeLoad?: (arg: HubspotEventData) => void;\n\n /**\n * To use this handler for component that is rendered in iframe, set up useLoopBackHubspotEvents hook on top level frame\n */\n onBeforeSubmit?: (arg: HubspotEventData) => void;\n\n /**\n * To use this handler for component that is rendered in iframe, set up useLoopBackHubspotEvents hook on top level frame\n */\n onSubmit?: (arg: HubspotEventData) => void;\n\n /**\n * To use this handler for component that is rendered in iframe, set up useLoopBackHubspotEvents hook on top level frame\n */\n onLoad?: (arg: HubspotEventData) => void;\n hubspotEvents?: string[];\n createDOMElement?: boolean;\n defaultValues?: HubspotFormDefaultValues;\n}\n\n//cards\nexport interface QuoteProps extends Themable, CardBaseProps {\n text?: string;\n // for backward compatibility, yfmText will become property 'text' in major\n yfmText?: string;\n image: ThemedImage;\n logo: ThemeSupporting<ImageProps>;\n color?: string;\n /**\n * @deprecated use property button instead\n */\n url?: string;\n /**\n * @deprecated use property button instead\n */\n urlTitle?: string;\n author?: AuthorItem;\n /**\n * @deprecated use property button instead\n */\n buttonText?: string;\n theme?: TextTheme;\n quoteType?: QuoteType;\n button?: ButtonProps;\n}\n\nexport interface BackgroundCardProps\n extends CardBaseProps,\n AnalyticsEventsBase,\n CardLayoutProps,\n Omit<ContentBlockProps, 'centered' | 'controlPosition'> {\n url?: string;\n urlTitle?: string;\n background?: ThemeSupporting<ImageObjectProps>;\n paddingBottom?: 's' | 'm' | 'l' | 'xl';\n backgroundColor?: string;\n}\n\nexport interface BasicCardProps\n extends CardBaseProps,\n AnalyticsEventsBase,\n CardLayoutProps,\n Omit<ContentBlockProps, 'colSizes' | 'centered' | 'theme' | 'controlPosition'> {\n url: string;\n urlTitle?: string;\n icon?: ThemeSupporting<ImageProps>;\n gravityIcon?: ThemeSupporting<GravityIconProps>;\n target?: string;\n iconPosition?: IconPosition;\n /**\n * @deprecated This property will be removed in future versions\n */\n hoverBackgroundColor?: string;\n}\n\nexport interface BannerCardProps {\n title: string;\n subtitle?: string;\n className?: string;\n image?: ThemeSupporting<string>;\n disableCompress?: boolean;\n color?: ThemeSupporting<string>;\n theme?: TextTheme;\n button?: Pick<ButtonProps, 'text' | 'url' | 'target' | 'theme'>;\n mediaView?: MediaView;\n}\n\nexport interface MediaCardProps extends MediaProps, AnalyticsEventsBase, CardBaseProps {}\n\nexport interface PriceCardProps extends CardBaseProps, Pick<ContentBlockProps, 'theme'> {\n title: string;\n price: string;\n pricePeriod?: string;\n priceDetails?: string;\n description?: string;\n buttons?: ButtonProps[];\n links?: LinkProps[];\n backgroundColor?: string;\n list?: string[];\n}\n\nexport interface LayoutItemProps extends ClassNameProps, CardLayoutProps, AnalyticsEventsBase {\n content: Omit<ContentBlockProps, 'colSizes' | 'centered'>;\n contentMargin?: LayoutItemContentMargin;\n media?: ThemeSupporting<MediaProps>;\n metaInfo?: string[];\n border?: boolean;\n fullscreen?: boolean;\n icon?: ThemeSupporting<PositionedIcon>;\n}\n\nexport interface ImageCardProps\n extends CardBaseProps,\n AnalyticsEventsBase,\n CardLayoutProps,\n Omit<ContentBlockProps, 'colSizes' | 'centered' | 'controlPosition'> {\n image: ThemeSupporting<ImageProps>;\n enableImageBorderRadius?: boolean;\n margins?: ImageCardMargins;\n direction?: ImageCardDirection;\n backgroundColor?: string;\n url?: string;\n urlTitle?: string;\n target?: string;\n}\n\n// sub-block models\nexport type DividerModel = {\n type: SubBlockType.Divider;\n} & DividerProps;\n\nexport type QuoteModel = {\n type: SubBlockType.Quote;\n} & QuoteProps;\n\nexport type LayoutItemModel = {\n type: SubBlockType.LayoutItem;\n} & LayoutItemProps;\n\nexport type BackgroundCardModel = {\n type: SubBlockType.BackgroundCard;\n} & BackgroundCardProps;\n\n/** @deprecated */\nexport type PriceDetailedModel = {\n type: SubBlockType.PriceDetailed;\n} & PriceDetailedProps;\n\nexport type MediaCardModel = {\n type: SubBlockType.MediaCard;\n} & MediaCardProps;\n\nexport type HubspotFormModel = {\n type: SubBlockType.HubspotForm;\n} & HubspotFormProps;\n\nexport type BannerCardModel = {\n type: SubBlockType.BannerCard;\n} & BannerCardProps;\n\nexport type BasicCardModel = {\n type: SubBlockType.BasicCard;\n} & BasicCardProps;\n\nexport type PriceCardModel = {\n type: SubBlockType.PriceCard;\n} & PriceCardProps;\n\nexport type ImageCardModel = {\n type: SubBlockType.ImageCard;\n} & ImageCardProps;\n\nexport type SubBlockModels =\n | DividerModel\n | QuoteModel\n | PriceDetailedModel\n | MediaCardModel\n | BackgroundCardModel\n | HubspotFormModel\n | BannerCardModel\n | BasicCardModel\n | PriceCardModel\n | LayoutItemModel\n | ImageCardModel;\n\nexport type SubBlock = SubBlockModels;\n"]}
|
|
@@ -7,13 +7,15 @@ const uikit_1 = require("@gravity-ui/uikit");
|
|
|
7
7
|
const components_1 = require("../../components/index.js");
|
|
8
8
|
const utils_1 = require("../../components/Media/Image/utils.js");
|
|
9
9
|
const theme_1 = require("../../context/theme/index.js");
|
|
10
|
+
const hooks_1 = require("../../hooks/index.js");
|
|
10
11
|
const models_1 = require("../../models/index.js");
|
|
11
12
|
const utils_2 = require("../../utils/index.js");
|
|
12
13
|
const Content_1 = tslib_1.__importDefault(require("../Content/Content.js"));
|
|
13
14
|
const b = (0, utils_2.block)('image-card');
|
|
14
15
|
const CONTENT_COL_SIZES = { all: 12, md: 12 };
|
|
15
16
|
const ImageCard = (props) => {
|
|
16
|
-
const { border = 'shadow', title, text, image, enableImageBorderRadius = false, direction = models_1.ImageCardDirection.Direct, margins, backgroundColor, url, target, urlTitle, additionalInfo, links, buttons, list, theme: cardTheme = 'default', size = 's', controlPosition = 'content', } = props;
|
|
17
|
+
const { border = 'shadow', title, text, image, enableImageBorderRadius = false, direction = models_1.ImageCardDirection.Direct, margins, backgroundColor, url, target, urlTitle, additionalInfo, links, buttons, list, theme: cardTheme = 'default', size = 's', controlPosition = 'content', analyticsEvents, } = props;
|
|
18
|
+
const handleAnalytics = (0, hooks_1.useAnalytics)(models_1.DefaultEventNames.CardBase, url);
|
|
17
19
|
const globalTheme = (0, theme_1.useTheme)();
|
|
18
20
|
const areControlsInFooter = controlPosition === 'footer';
|
|
19
21
|
const hasContent = Boolean(text || title || buttons || links || list);
|
|
@@ -21,7 +23,10 @@ const ImageCard = (props) => {
|
|
|
21
23
|
const imageProps = (0, utils_1.getMediaImage)(themedImage);
|
|
22
24
|
const titleId = (0, uikit_1.useUniqId)();
|
|
23
25
|
const cardContent = ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: b('image', { margins }), children: (0, jsx_runtime_1.jsx)(components_1.Image, { className: b('image_inner', { radius: enableImageBorderRadius }), ...imageProps }) }), hasContent && ((0, jsx_runtime_1.jsx)("div", { className: b('content'), children: (0, jsx_runtime_1.jsx)(Content_1.default, { titleId: titleId, title: title, text: text, links: links, buttons: buttons, list: list, theme: cardTheme, additionalInfo: additionalInfo, size: size, colSizes: CONTENT_COL_SIZES, controlPosition: areControlsInFooter ? 'bottom' : 'default' }) }))] }));
|
|
24
|
-
|
|
26
|
+
const onClick = () => {
|
|
27
|
+
handleAnalytics(analyticsEvents);
|
|
28
|
+
};
|
|
29
|
+
return url ? ((0, jsx_runtime_1.jsx)(uikit_1.Link, { href: url, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: b({ border, 'with-content': hasContent, direction }), onClick: onClick, title: urlTitle, style: { backgroundColor }, extraProps: {
|
|
25
30
|
draggable: false,
|
|
26
31
|
onDragStart: (e) => e.preventDefault(),
|
|
27
32
|
}, children: cardContent })) : ((0, jsx_runtime_1.jsx)("div", { className: b({ border, 'with-content': hasContent, direction }), style: { backgroundColor }, children: cardContent }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageCard.js","sourceRoot":"../../../../src","sources":["sub-blocks/ImageCard/ImageCard.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAE/B,6CAAkD;AAElD,0DAAuC;AACvC,iEAAiE;AACjE,wDAA6C;AAE7C,
|
|
1
|
+
{"version":3,"file":"ImageCard.js","sourceRoot":"../../../../src","sources":["sub-blocks/ImageCard/ImageCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport {Link, useUniqId} from '@gravity-ui/uikit';\n\nimport {Image} from '../../components';\nimport {getMediaImage} from '../../components/Media/Image/utils';\nimport {useTheme} from '../../context/theme';\nimport {GridColumnSizesType} from '../../grid';\nimport {useAnalytics} from '../../hooks';\nimport {DefaultEventNames, ImageCardDirection, ImageCardProps} from '../../models';\nimport {block, getThemedValue} from '../../utils';\nimport Content from '../Content/Content';\n\nimport './ImageCard.scss';\n\nconst b = block('image-card');\nconst CONTENT_COL_SIZES: GridColumnSizesType = {all: 12, md: 12};\n\nconst ImageCard = (props: ImageCardProps) => {\n const {\n border = 'shadow',\n title,\n text,\n image,\n enableImageBorderRadius = false,\n direction = ImageCardDirection.Direct,\n margins,\n backgroundColor,\n url,\n target,\n urlTitle,\n additionalInfo,\n links,\n buttons,\n list,\n theme: cardTheme = 'default',\n size = 's',\n controlPosition = 'content',\n analyticsEvents,\n } = props;\n\n const handleAnalytics = useAnalytics(DefaultEventNames.CardBase, url);\n const globalTheme = useTheme();\n const areControlsInFooter = controlPosition === 'footer';\n const hasContent = Boolean(text || title || buttons || links || list);\n const themedImage = getThemedValue(image, globalTheme);\n const imageProps = getMediaImage(themedImage);\n\n const titleId = useUniqId();\n\n const cardContent = (\n <React.Fragment>\n <div className={b('image', {margins})}>\n <Image\n className={b('image_inner', {radius: enableImageBorderRadius})}\n {...imageProps}\n />\n </div>\n {hasContent && (\n <div className={b('content')}>\n <Content\n titleId={titleId}\n title={title}\n text={text}\n links={links}\n buttons={buttons}\n list={list}\n theme={cardTheme}\n additionalInfo={additionalInfo}\n size={size}\n colSizes={CONTENT_COL_SIZES}\n controlPosition={areControlsInFooter ? 'bottom' : 'default'}\n />\n </div>\n )}\n </React.Fragment>\n );\n\n const onClick = () => {\n handleAnalytics(analyticsEvents);\n };\n\n return url ? (\n <Link\n href={url}\n target={target}\n rel={target === '_blank' ? 'noopener noreferrer' : undefined}\n className={b({border, 'with-content': hasContent, direction})}\n onClick={onClick}\n title={urlTitle}\n style={{backgroundColor}}\n extraProps={{\n draggable: false,\n onDragStart: (e: React.DragEvent<HTMLAnchorElement>) => e.preventDefault(),\n }}\n >\n {cardContent}\n </Link>\n ) : (\n <div\n className={b({border, 'with-content': hasContent, direction})}\n style={{backgroundColor}}\n >\n {cardContent}\n </div>\n );\n};\n\nexport default ImageCard;\n"]}
|
|
@@ -107,7 +107,15 @@ unpredictable css rules order in build */
|
|
|
107
107
|
.yfm_constructor.yfm_constructor_size_s p {
|
|
108
108
|
margin-bottom: 8px;
|
|
109
109
|
}
|
|
110
|
-
.yfm_constructor.yfm_constructor_theme_dark
|
|
110
|
+
.yfm_constructor.yfm_constructor_theme_dark h1,
|
|
111
|
+
.yfm_constructor.yfm_constructor_theme_dark h2,
|
|
112
|
+
.yfm_constructor.yfm_constructor_theme_dark h3,
|
|
113
|
+
.yfm_constructor.yfm_constructor_theme_dark h4,
|
|
114
|
+
.yfm_constructor.yfm_constructor_theme_dark h5,
|
|
115
|
+
.yfm_constructor.yfm_constructor_theme_dark h6,
|
|
116
|
+
.yfm_constructor.yfm_constructor_theme_dark span,
|
|
117
|
+
.yfm_constructor.yfm_constructor_theme_dark p,
|
|
118
|
+
.yfm_constructor.yfm_constructor_theme_dark li {
|
|
111
119
|
color: var(--g-color-text-light-primary);
|
|
112
120
|
}
|
|
113
121
|
|
|
@@ -155,7 +155,7 @@ export interface LayoutItemProps extends ClassNameProps, CardLayoutProps, Analyt
|
|
|
155
155
|
fullscreen?: boolean;
|
|
156
156
|
icon?: ThemeSupporting<PositionedIcon>;
|
|
157
157
|
}
|
|
158
|
-
export interface ImageCardProps extends CardBaseProps, CardLayoutProps, Omit<ContentBlockProps, 'colSizes' | 'centered' | 'controlPosition'> {
|
|
158
|
+
export interface ImageCardProps extends CardBaseProps, AnalyticsEventsBase, CardLayoutProps, Omit<ContentBlockProps, 'colSizes' | 'centered' | 'controlPosition'> {
|
|
159
159
|
image: ThemeSupporting<ImageProps>;
|
|
160
160
|
enableImageBorderRadius?: boolean;
|
|
161
161
|
margins?: ImageCardMargins;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sub-blocks.js","sourceRoot":"../../../../src","sources":["models/constructor-items/sub-blocks.ts"],"names":[],"mappings":"AA8BA,MAAM,CAAN,IAAY,YAoBX;AApBD,WAAY,YAAY;IACpB,mCAAmB,CAAA;IACnB,+BAAe,CAAA;IACf;;OAEG;IACH,gDAAgC,CAAA;IAChC,wCAAwB,CAAA;IACxB,0CAA0B,CAAA;IAC1B,0CAA0B,CAAA;IAC1B,kDAAkC,CAAA;IAClC,wCAAwB,CAAA;IACxB,mCAAmB,CAAA;IACnB,4CAA4B,CAAA;IAC5B;;OAEG;IACH,6BAAa,CAAA;IACb,wCAAwB,CAAA;IACxB,wCAAwB,CAAA;AAC5B,CAAC,EApBW,YAAY,KAAZ,YAAY,QAoBvB;AAED,MAAM,CAAN,IAAY,YAGX;AAHD,WAAY,YAAY;IACpB,2BAAW,CAAA;IACX,6BAAa,CAAA;AACjB,CAAC,EAHW,YAAY,KAAZ,YAAY,QAGvB;AAkBD,MAAM,CAAN,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC1B,uCAAiB,CAAA;IACjB,yCAAmB,CAAA;AACvB,CAAC,EAHW,kBAAkB,KAAlB,kBAAkB,QAG7B;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC","sourcesContent":["import {ClassNameProps, GravityIconProps, QuoteType} from '../../models';\nimport {ThemeSupporting} from '../../utils';\nimport {\n HubspotEventData,\n HubspotEventHandlers,\n HubspotFormDefaultValues,\n} from '../../utils/hubspot';\nimport {AnalyticsEventsBase} from '../common';\n\nimport {ContentBlockProps} from './blocks';\nimport {\n AuthorItem,\n ButtonProps,\n CardBaseProps,\n CardLayoutProps,\n ContentTheme,\n DividerSize,\n ImageCardMargins,\n ImageObjectProps,\n ImageProps,\n LayoutItemContentMargin,\n LinkProps,\n MediaProps,\n MediaView,\n PriceDetailedProps,\n TextTheme,\n Themable,\n ThemedImage,\n} from './common';\n\nexport enum SubBlockType {\n Divider = 'divider',\n Quote = 'quote',\n /**\n * @deprecated Will be removed\n */\n PriceDetailed = 'price-detailed',\n MediaCard = 'media-card',\n BannerCard = 'banner-card',\n LayoutItem = 'layout-item',\n BackgroundCard = 'background-card',\n BasicCard = 'basic-card',\n Content = 'content',\n HubspotForm = 'hubspot-form',\n /**\n * @deprecated Will be removed, use BasicCard instead\n */\n Card = 'card',\n PriceCard = 'price-card',\n ImageCard = 'image-card',\n}\n\nexport enum IconPosition {\n Top = 'top',\n Left = 'left',\n}\n\nexport interface PositionedIcon {\n value: ImageProps;\n position?: IconPosition;\n}\n\nexport interface PositionedGravityIcon {\n value: GravityIconProps;\n position?: IconPosition;\n}\n\nexport interface IconWrapperProps {\n icon?: PositionedIcon;\n gravityIcon?: PositionedGravityIcon;\n size?: 's' | 'm' | 'l' | 'xl';\n}\n\nexport enum ImageCardDirection {\n Direct = 'direct',\n Reverse = 'reverse',\n}\n\nexport const SubBlockTypes = Object.values(SubBlockType);\n\nexport interface DividerProps {\n size?: DividerSize;\n border?: boolean;\n}\n\nexport interface HubspotFormProps extends HubspotEventHandlers, AnalyticsEventsBase {\n className?: string;\n theme?: ContentTheme;\n isMobile?: boolean;\n region?: string;\n portalId: string;\n formId: string;\n formInstanceId?: string;\n formClassName?: string;\n\n /**\n * To use this handler for component that is rendered in iframe, set up useLoopBackHubspotEvents hook on top level frame\n */\n onBeforeLoad?: (arg: HubspotEventData) => void;\n\n /**\n * To use this handler for component that is rendered in iframe, set up useLoopBackHubspotEvents hook on top level frame\n */\n onBeforeSubmit?: (arg: HubspotEventData) => void;\n\n /**\n * To use this handler for component that is rendered in iframe, set up useLoopBackHubspotEvents hook on top level frame\n */\n onSubmit?: (arg: HubspotEventData) => void;\n\n /**\n * To use this handler for component that is rendered in iframe, set up useLoopBackHubspotEvents hook on top level frame\n */\n onLoad?: (arg: HubspotEventData) => void;\n hubspotEvents?: string[];\n createDOMElement?: boolean;\n defaultValues?: HubspotFormDefaultValues;\n}\n\n//cards\nexport interface QuoteProps extends Themable, CardBaseProps {\n text?: string;\n // for backward compatibility, yfmText will become property 'text' in major\n yfmText?: string;\n image: ThemedImage;\n logo: ThemeSupporting<ImageProps>;\n color?: string;\n /**\n * @deprecated use property button instead\n */\n url?: string;\n /**\n * @deprecated use property button instead\n */\n urlTitle?: string;\n author?: AuthorItem;\n /**\n * @deprecated use property button instead\n */\n buttonText?: string;\n theme?: TextTheme;\n quoteType?: QuoteType;\n button?: ButtonProps;\n}\n\nexport interface BackgroundCardProps\n extends CardBaseProps,\n AnalyticsEventsBase,\n CardLayoutProps,\n Omit<ContentBlockProps, 'centered' | 'controlPosition'> {\n url?: string;\n urlTitle?: string;\n background?: ThemeSupporting<ImageObjectProps>;\n paddingBottom?: 's' | 'm' | 'l' | 'xl';\n backgroundColor?: string;\n}\n\nexport interface BasicCardProps\n extends CardBaseProps,\n AnalyticsEventsBase,\n CardLayoutProps,\n Omit<ContentBlockProps, 'colSizes' | 'centered' | 'theme' | 'controlPosition'> {\n url: string;\n urlTitle?: string;\n icon?: ThemeSupporting<ImageProps>;\n gravityIcon?: ThemeSupporting<GravityIconProps>;\n target?: string;\n iconPosition?: IconPosition;\n /**\n * @deprecated This property will be removed in future versions\n */\n hoverBackgroundColor?: string;\n}\n\nexport interface BannerCardProps {\n title: string;\n subtitle?: string;\n className?: string;\n image?: ThemeSupporting<string>;\n disableCompress?: boolean;\n color?: ThemeSupporting<string>;\n theme?: TextTheme;\n button?: Pick<ButtonProps, 'text' | 'url' | 'target' | 'theme'>;\n mediaView?: MediaView;\n}\n\nexport interface MediaCardProps extends MediaProps, AnalyticsEventsBase, CardBaseProps {}\n\nexport interface PriceCardProps extends CardBaseProps, Pick<ContentBlockProps, 'theme'> {\n title: string;\n price: string;\n pricePeriod?: string;\n priceDetails?: string;\n description?: string;\n buttons?: ButtonProps[];\n links?: LinkProps[];\n backgroundColor?: string;\n list?: string[];\n}\n\nexport interface LayoutItemProps extends ClassNameProps, CardLayoutProps, AnalyticsEventsBase {\n content: Omit<ContentBlockProps, 'colSizes' | 'centered'>;\n contentMargin?: LayoutItemContentMargin;\n media?: ThemeSupporting<MediaProps>;\n metaInfo?: string[];\n border?: boolean;\n fullscreen?: boolean;\n icon?: ThemeSupporting<PositionedIcon>;\n}\n\nexport interface ImageCardProps\n extends CardBaseProps,\n CardLayoutProps,\n Omit<ContentBlockProps, 'colSizes' | 'centered' | 'controlPosition'> {\n image: ThemeSupporting<ImageProps>;\n enableImageBorderRadius?: boolean;\n margins?: ImageCardMargins;\n direction?: ImageCardDirection;\n backgroundColor?: string;\n url?: string;\n urlTitle?: string;\n target?: string;\n}\n\n// sub-block models\nexport type DividerModel = {\n type: SubBlockType.Divider;\n} & DividerProps;\n\nexport type QuoteModel = {\n type: SubBlockType.Quote;\n} & QuoteProps;\n\nexport type LayoutItemModel = {\n type: SubBlockType.LayoutItem;\n} & LayoutItemProps;\n\nexport type BackgroundCardModel = {\n type: SubBlockType.BackgroundCard;\n} & BackgroundCardProps;\n\n/** @deprecated */\nexport type PriceDetailedModel = {\n type: SubBlockType.PriceDetailed;\n} & PriceDetailedProps;\n\nexport type MediaCardModel = {\n type: SubBlockType.MediaCard;\n} & MediaCardProps;\n\nexport type HubspotFormModel = {\n type: SubBlockType.HubspotForm;\n} & HubspotFormProps;\n\nexport type BannerCardModel = {\n type: SubBlockType.BannerCard;\n} & BannerCardProps;\n\nexport type BasicCardModel = {\n type: SubBlockType.BasicCard;\n} & BasicCardProps;\n\nexport type PriceCardModel = {\n type: SubBlockType.PriceCard;\n} & PriceCardProps;\n\nexport type ImageCardModel = {\n type: SubBlockType.ImageCard;\n} & ImageCardProps;\n\nexport type SubBlockModels =\n | DividerModel\n | QuoteModel\n | PriceDetailedModel\n | MediaCardModel\n | BackgroundCardModel\n | HubspotFormModel\n | BannerCardModel\n | BasicCardModel\n | PriceCardModel\n | LayoutItemModel\n | ImageCardModel;\n\nexport type SubBlock = SubBlockModels;\n"]}
|
|
1
|
+
{"version":3,"file":"sub-blocks.js","sourceRoot":"../../../../src","sources":["models/constructor-items/sub-blocks.ts"],"names":[],"mappings":"AA8BA,MAAM,CAAN,IAAY,YAoBX;AApBD,WAAY,YAAY;IACpB,mCAAmB,CAAA;IACnB,+BAAe,CAAA;IACf;;OAEG;IACH,gDAAgC,CAAA;IAChC,wCAAwB,CAAA;IACxB,0CAA0B,CAAA;IAC1B,0CAA0B,CAAA;IAC1B,kDAAkC,CAAA;IAClC,wCAAwB,CAAA;IACxB,mCAAmB,CAAA;IACnB,4CAA4B,CAAA;IAC5B;;OAEG;IACH,6BAAa,CAAA;IACb,wCAAwB,CAAA;IACxB,wCAAwB,CAAA;AAC5B,CAAC,EApBW,YAAY,KAAZ,YAAY,QAoBvB;AAED,MAAM,CAAN,IAAY,YAGX;AAHD,WAAY,YAAY;IACpB,2BAAW,CAAA;IACX,6BAAa,CAAA;AACjB,CAAC,EAHW,YAAY,KAAZ,YAAY,QAGvB;AAkBD,MAAM,CAAN,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC1B,uCAAiB,CAAA;IACjB,yCAAmB,CAAA;AACvB,CAAC,EAHW,kBAAkB,KAAlB,kBAAkB,QAG7B;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC","sourcesContent":["import {ClassNameProps, GravityIconProps, QuoteType} from '../../models';\nimport {ThemeSupporting} from '../../utils';\nimport {\n HubspotEventData,\n HubspotEventHandlers,\n HubspotFormDefaultValues,\n} from '../../utils/hubspot';\nimport {AnalyticsEventsBase} from '../common';\n\nimport {ContentBlockProps} from './blocks';\nimport {\n AuthorItem,\n ButtonProps,\n CardBaseProps,\n CardLayoutProps,\n ContentTheme,\n DividerSize,\n ImageCardMargins,\n ImageObjectProps,\n ImageProps,\n LayoutItemContentMargin,\n LinkProps,\n MediaProps,\n MediaView,\n PriceDetailedProps,\n TextTheme,\n Themable,\n ThemedImage,\n} from './common';\n\nexport enum SubBlockType {\n Divider = 'divider',\n Quote = 'quote',\n /**\n * @deprecated Will be removed\n */\n PriceDetailed = 'price-detailed',\n MediaCard = 'media-card',\n BannerCard = 'banner-card',\n LayoutItem = 'layout-item',\n BackgroundCard = 'background-card',\n BasicCard = 'basic-card',\n Content = 'content',\n HubspotForm = 'hubspot-form',\n /**\n * @deprecated Will be removed, use BasicCard instead\n */\n Card = 'card',\n PriceCard = 'price-card',\n ImageCard = 'image-card',\n}\n\nexport enum IconPosition {\n Top = 'top',\n Left = 'left',\n}\n\nexport interface PositionedIcon {\n value: ImageProps;\n position?: IconPosition;\n}\n\nexport interface PositionedGravityIcon {\n value: GravityIconProps;\n position?: IconPosition;\n}\n\nexport interface IconWrapperProps {\n icon?: PositionedIcon;\n gravityIcon?: PositionedGravityIcon;\n size?: 's' | 'm' | 'l' | 'xl';\n}\n\nexport enum ImageCardDirection {\n Direct = 'direct',\n Reverse = 'reverse',\n}\n\nexport const SubBlockTypes = Object.values(SubBlockType);\n\nexport interface DividerProps {\n size?: DividerSize;\n border?: boolean;\n}\n\nexport interface HubspotFormProps extends HubspotEventHandlers, AnalyticsEventsBase {\n className?: string;\n theme?: ContentTheme;\n isMobile?: boolean;\n region?: string;\n portalId: string;\n formId: string;\n formInstanceId?: string;\n formClassName?: string;\n\n /**\n * To use this handler for component that is rendered in iframe, set up useLoopBackHubspotEvents hook on top level frame\n */\n onBeforeLoad?: (arg: HubspotEventData) => void;\n\n /**\n * To use this handler for component that is rendered in iframe, set up useLoopBackHubspotEvents hook on top level frame\n */\n onBeforeSubmit?: (arg: HubspotEventData) => void;\n\n /**\n * To use this handler for component that is rendered in iframe, set up useLoopBackHubspotEvents hook on top level frame\n */\n onSubmit?: (arg: HubspotEventData) => void;\n\n /**\n * To use this handler for component that is rendered in iframe, set up useLoopBackHubspotEvents hook on top level frame\n */\n onLoad?: (arg: HubspotEventData) => void;\n hubspotEvents?: string[];\n createDOMElement?: boolean;\n defaultValues?: HubspotFormDefaultValues;\n}\n\n//cards\nexport interface QuoteProps extends Themable, CardBaseProps {\n text?: string;\n // for backward compatibility, yfmText will become property 'text' in major\n yfmText?: string;\n image: ThemedImage;\n logo: ThemeSupporting<ImageProps>;\n color?: string;\n /**\n * @deprecated use property button instead\n */\n url?: string;\n /**\n * @deprecated use property button instead\n */\n urlTitle?: string;\n author?: AuthorItem;\n /**\n * @deprecated use property button instead\n */\n buttonText?: string;\n theme?: TextTheme;\n quoteType?: QuoteType;\n button?: ButtonProps;\n}\n\nexport interface BackgroundCardProps\n extends CardBaseProps,\n AnalyticsEventsBase,\n CardLayoutProps,\n Omit<ContentBlockProps, 'centered' | 'controlPosition'> {\n url?: string;\n urlTitle?: string;\n background?: ThemeSupporting<ImageObjectProps>;\n paddingBottom?: 's' | 'm' | 'l' | 'xl';\n backgroundColor?: string;\n}\n\nexport interface BasicCardProps\n extends CardBaseProps,\n AnalyticsEventsBase,\n CardLayoutProps,\n Omit<ContentBlockProps, 'colSizes' | 'centered' | 'theme' | 'controlPosition'> {\n url: string;\n urlTitle?: string;\n icon?: ThemeSupporting<ImageProps>;\n gravityIcon?: ThemeSupporting<GravityIconProps>;\n target?: string;\n iconPosition?: IconPosition;\n /**\n * @deprecated This property will be removed in future versions\n */\n hoverBackgroundColor?: string;\n}\n\nexport interface BannerCardProps {\n title: string;\n subtitle?: string;\n className?: string;\n image?: ThemeSupporting<string>;\n disableCompress?: boolean;\n color?: ThemeSupporting<string>;\n theme?: TextTheme;\n button?: Pick<ButtonProps, 'text' | 'url' | 'target' | 'theme'>;\n mediaView?: MediaView;\n}\n\nexport interface MediaCardProps extends MediaProps, AnalyticsEventsBase, CardBaseProps {}\n\nexport interface PriceCardProps extends CardBaseProps, Pick<ContentBlockProps, 'theme'> {\n title: string;\n price: string;\n pricePeriod?: string;\n priceDetails?: string;\n description?: string;\n buttons?: ButtonProps[];\n links?: LinkProps[];\n backgroundColor?: string;\n list?: string[];\n}\n\nexport interface LayoutItemProps extends ClassNameProps, CardLayoutProps, AnalyticsEventsBase {\n content: Omit<ContentBlockProps, 'colSizes' | 'centered'>;\n contentMargin?: LayoutItemContentMargin;\n media?: ThemeSupporting<MediaProps>;\n metaInfo?: string[];\n border?: boolean;\n fullscreen?: boolean;\n icon?: ThemeSupporting<PositionedIcon>;\n}\n\nexport interface ImageCardProps\n extends CardBaseProps,\n AnalyticsEventsBase,\n CardLayoutProps,\n Omit<ContentBlockProps, 'colSizes' | 'centered' | 'controlPosition'> {\n image: ThemeSupporting<ImageProps>;\n enableImageBorderRadius?: boolean;\n margins?: ImageCardMargins;\n direction?: ImageCardDirection;\n backgroundColor?: string;\n url?: string;\n urlTitle?: string;\n target?: string;\n}\n\n// sub-block models\nexport type DividerModel = {\n type: SubBlockType.Divider;\n} & DividerProps;\n\nexport type QuoteModel = {\n type: SubBlockType.Quote;\n} & QuoteProps;\n\nexport type LayoutItemModel = {\n type: SubBlockType.LayoutItem;\n} & LayoutItemProps;\n\nexport type BackgroundCardModel = {\n type: SubBlockType.BackgroundCard;\n} & BackgroundCardProps;\n\n/** @deprecated */\nexport type PriceDetailedModel = {\n type: SubBlockType.PriceDetailed;\n} & PriceDetailedProps;\n\nexport type MediaCardModel = {\n type: SubBlockType.MediaCard;\n} & MediaCardProps;\n\nexport type HubspotFormModel = {\n type: SubBlockType.HubspotForm;\n} & HubspotFormProps;\n\nexport type BannerCardModel = {\n type: SubBlockType.BannerCard;\n} & BannerCardProps;\n\nexport type BasicCardModel = {\n type: SubBlockType.BasicCard;\n} & BasicCardProps;\n\nexport type PriceCardModel = {\n type: SubBlockType.PriceCard;\n} & PriceCardProps;\n\nexport type ImageCardModel = {\n type: SubBlockType.ImageCard;\n} & ImageCardProps;\n\nexport type SubBlockModels =\n | DividerModel\n | QuoteModel\n | PriceDetailedModel\n | MediaCardModel\n | BackgroundCardModel\n | HubspotFormModel\n | BannerCardModel\n | BasicCardModel\n | PriceCardModel\n | LayoutItemModel\n | ImageCardModel;\n\nexport type SubBlock = SubBlockModels;\n"]}
|
|
@@ -4,14 +4,16 @@ import { Link, useUniqId } from '@gravity-ui/uikit';
|
|
|
4
4
|
import { Image } from "../../components/index.js";
|
|
5
5
|
import { getMediaImage } from "../../components/Media/Image/utils.js";
|
|
6
6
|
import { useTheme } from "../../context/theme/index.js";
|
|
7
|
-
import {
|
|
7
|
+
import { useAnalytics } from "../../hooks/index.js";
|
|
8
|
+
import { DefaultEventNames, ImageCardDirection } from "../../models/index.js";
|
|
8
9
|
import { block, getThemedValue } from "../../utils/index.js";
|
|
9
10
|
import Content from "../Content/Content.js";
|
|
10
11
|
import './ImageCard.css';
|
|
11
12
|
const b = block('image-card');
|
|
12
13
|
const CONTENT_COL_SIZES = { all: 12, md: 12 };
|
|
13
14
|
const ImageCard = (props) => {
|
|
14
|
-
const { border = 'shadow', title, text, image, enableImageBorderRadius = false, direction = ImageCardDirection.Direct, margins, backgroundColor, url, target, urlTitle, additionalInfo, links, buttons, list, theme: cardTheme = 'default', size = 's', controlPosition = 'content', } = props;
|
|
15
|
+
const { border = 'shadow', title, text, image, enableImageBorderRadius = false, direction = ImageCardDirection.Direct, margins, backgroundColor, url, target, urlTitle, additionalInfo, links, buttons, list, theme: cardTheme = 'default', size = 's', controlPosition = 'content', analyticsEvents, } = props;
|
|
16
|
+
const handleAnalytics = useAnalytics(DefaultEventNames.CardBase, url);
|
|
15
17
|
const globalTheme = useTheme();
|
|
16
18
|
const areControlsInFooter = controlPosition === 'footer';
|
|
17
19
|
const hasContent = Boolean(text || title || buttons || links || list);
|
|
@@ -19,7 +21,10 @@ const ImageCard = (props) => {
|
|
|
19
21
|
const imageProps = getMediaImage(themedImage);
|
|
20
22
|
const titleId = useUniqId();
|
|
21
23
|
const cardContent = (_jsxs(React.Fragment, { children: [_jsx("div", { className: b('image', { margins }), children: _jsx(Image, { className: b('image_inner', { radius: enableImageBorderRadius }), ...imageProps }) }), hasContent && (_jsx("div", { className: b('content'), children: _jsx(Content, { titleId: titleId, title: title, text: text, links: links, buttons: buttons, list: list, theme: cardTheme, additionalInfo: additionalInfo, size: size, colSizes: CONTENT_COL_SIZES, controlPosition: areControlsInFooter ? 'bottom' : 'default' }) }))] }));
|
|
22
|
-
|
|
24
|
+
const onClick = () => {
|
|
25
|
+
handleAnalytics(analyticsEvents);
|
|
26
|
+
};
|
|
27
|
+
return url ? (_jsx(Link, { href: url, target: target, rel: target === '_blank' ? 'noopener noreferrer' : undefined, className: b({ border, 'with-content': hasContent, direction }), onClick: onClick, title: urlTitle, style: { backgroundColor }, extraProps: {
|
|
23
28
|
draggable: false,
|
|
24
29
|
onDragStart: (e) => e.preventDefault(),
|
|
25
30
|
}, children: cardContent })) : (_jsx("div", { className: b({ border, 'with-content': hasContent, direction }), style: { backgroundColor }, children: cardContent }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageCard.js","sourceRoot":"../../../../src","sources":["sub-blocks/ImageCard/ImageCard.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,IAAI,EAAE,SAAS,EAAC,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAC,KAAK,EAAC,kCAAyB;AACvC,OAAO,EAAC,aAAa,EAAC,8CAA2C;AACjE,OAAO,EAAC,QAAQ,EAAC,qCAA4B;AAE7C,OAAO,EAAC,kBAAkB,EAAiB,8BAAqB;
|
|
1
|
+
{"version":3,"file":"ImageCard.js","sourceRoot":"../../../../src","sources":["sub-blocks/ImageCard/ImageCard.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,IAAI,EAAE,SAAS,EAAC,MAAM,mBAAmB,CAAC;AAElD,OAAO,EAAC,KAAK,EAAC,kCAAyB;AACvC,OAAO,EAAC,aAAa,EAAC,8CAA2C;AACjE,OAAO,EAAC,QAAQ,EAAC,qCAA4B;AAE7C,OAAO,EAAC,YAAY,EAAC,6BAAoB;AACzC,OAAO,EAAC,iBAAiB,EAAE,kBAAkB,EAAiB,8BAAqB;AACnF,OAAO,EAAC,KAAK,EAAE,cAAc,EAAC,6BAAoB;AAClD,OAAO,OAAO,8BAA2B;AAEzC,OAAO,iBAAiB,CAAC;AAEzB,MAAM,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC;AAC9B,MAAM,iBAAiB,GAAwB,EAAC,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAC,CAAC;AAEjE,MAAM,SAAS,GAAG,CAAC,KAAqB,EAAE,EAAE;IACxC,MAAM,EACF,MAAM,GAAG,QAAQ,EACjB,KAAK,EACL,IAAI,EACJ,KAAK,EACL,uBAAuB,GAAG,KAAK,EAC/B,SAAS,GAAG,kBAAkB,CAAC,MAAM,EACrC,OAAO,EACP,eAAe,EACf,GAAG,EACH,MAAM,EACN,QAAQ,EACR,cAAc,EACd,KAAK,EACL,OAAO,EACP,IAAI,EACJ,KAAK,EAAE,SAAS,GAAG,SAAS,EAC5B,IAAI,GAAG,GAAG,EACV,eAAe,GAAG,SAAS,EAC3B,eAAe,GAClB,GAAG,KAAK,CAAC;IAEV,MAAM,eAAe,GAAG,YAAY,CAAC,iBAAiB,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC;IACtE,MAAM,WAAW,GAAG,QAAQ,EAAE,CAAC;IAC/B,MAAM,mBAAmB,GAAG,eAAe,KAAK,QAAQ,CAAC;IACzD,MAAM,UAAU,GAAG,OAAO,CAAC,IAAI,IAAI,KAAK,IAAI,OAAO,IAAI,KAAK,IAAI,IAAI,CAAC,CAAC;IACtE,MAAM,WAAW,GAAG,cAAc,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC;IACvD,MAAM,UAAU,GAAG,aAAa,CAAC,WAAW,CAAC,CAAC;IAE9C,MAAM,OAAO,GAAG,SAAS,EAAE,CAAC;IAE5B,MAAM,WAAW,GAAG,CAChB,MAAC,KAAK,CAAC,QAAQ,eACX,cAAK,SAAS,EAAE,CAAC,CAAC,OAAO,EAAE,EAAC,OAAO,EAAC,CAAC,YACjC,KAAC,KAAK,IACF,SAAS,EAAE,CAAC,CAAC,aAAa,EAAE,EAAC,MAAM,EAAE,uBAAuB,EAAC,CAAC,KAC1D,UAAU,GAChB,GACA,EACL,UAAU,IAAI,CACX,cAAK,SAAS,EAAE,CAAC,CAAC,SAAS,CAAC,YACxB,KAAC,OAAO,IACJ,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,SAAS,EAChB,cAAc,EAAE,cAAc,EAC9B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,iBAAiB,EAC3B,eAAe,EAAE,mBAAmB,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,GAC7D,GACA,CACT,IACY,CACpB,CAAC;IAEF,MAAM,OAAO,GAAG,GAAG,EAAE;QACjB,eAAe,CAAC,eAAe,CAAC,CAAC;IACrC,CAAC,CAAC;IAEF,OAAO,GAAG,CAAC,CAAC,CAAC,CACT,KAAC,IAAI,IACD,IAAI,EAAE,GAAG,EACT,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,SAAS,EAC5D,SAAS,EAAE,CAAC,CAAC,EAAC,MAAM,EAAE,cAAc,EAAE,UAAU,EAAE,SAAS,EAAC,CAAC,EAC7D,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,QAAQ,EACf,KAAK,EAAE,EAAC,eAAe,EAAC,EACxB,UAAU,EAAE;YACR,SAAS,EAAE,KAAK;YAChB,WAAW,EAAE,CAAC,CAAqC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE;SAC7E,YAEA,WAAW,GACT,CACV,CAAC,CAAC,CAAC,CACA,cACI,SAAS,EAAE,CAAC,CAAC,EAAC,MAAM,EAAE,cAAc,EAAE,UAAU,EAAE,SAAS,EAAC,CAAC,EAC7D,KAAK,EAAE,EAAC,eAAe,EAAC,YAEvB,WAAW,GACV,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import * as React from 'react';\n\nimport {Link, useUniqId} from '@gravity-ui/uikit';\n\nimport {Image} from '../../components';\nimport {getMediaImage} from '../../components/Media/Image/utils';\nimport {useTheme} from '../../context/theme';\nimport {GridColumnSizesType} from '../../grid';\nimport {useAnalytics} from '../../hooks';\nimport {DefaultEventNames, ImageCardDirection, ImageCardProps} from '../../models';\nimport {block, getThemedValue} from '../../utils';\nimport Content from '../Content/Content';\n\nimport './ImageCard.scss';\n\nconst b = block('image-card');\nconst CONTENT_COL_SIZES: GridColumnSizesType = {all: 12, md: 12};\n\nconst ImageCard = (props: ImageCardProps) => {\n const {\n border = 'shadow',\n title,\n text,\n image,\n enableImageBorderRadius = false,\n direction = ImageCardDirection.Direct,\n margins,\n backgroundColor,\n url,\n target,\n urlTitle,\n additionalInfo,\n links,\n buttons,\n list,\n theme: cardTheme = 'default',\n size = 's',\n controlPosition = 'content',\n analyticsEvents,\n } = props;\n\n const handleAnalytics = useAnalytics(DefaultEventNames.CardBase, url);\n const globalTheme = useTheme();\n const areControlsInFooter = controlPosition === 'footer';\n const hasContent = Boolean(text || title || buttons || links || list);\n const themedImage = getThemedValue(image, globalTheme);\n const imageProps = getMediaImage(themedImage);\n\n const titleId = useUniqId();\n\n const cardContent = (\n <React.Fragment>\n <div className={b('image', {margins})}>\n <Image\n className={b('image_inner', {radius: enableImageBorderRadius})}\n {...imageProps}\n />\n </div>\n {hasContent && (\n <div className={b('content')}>\n <Content\n titleId={titleId}\n title={title}\n text={text}\n links={links}\n buttons={buttons}\n list={list}\n theme={cardTheme}\n additionalInfo={additionalInfo}\n size={size}\n colSizes={CONTENT_COL_SIZES}\n controlPosition={areControlsInFooter ? 'bottom' : 'default'}\n />\n </div>\n )}\n </React.Fragment>\n );\n\n const onClick = () => {\n handleAnalytics(analyticsEvents);\n };\n\n return url ? (\n <Link\n href={url}\n target={target}\n rel={target === '_blank' ? 'noopener noreferrer' : undefined}\n className={b({border, 'with-content': hasContent, direction})}\n onClick={onClick}\n title={urlTitle}\n style={{backgroundColor}}\n extraProps={{\n draggable: false,\n onDragStart: (e: React.DragEvent<HTMLAnchorElement>) => e.preventDefault(),\n }}\n >\n {cardContent}\n </Link>\n ) : (\n <div\n className={b({border, 'with-content': hasContent, direction})}\n style={{backgroundColor}}\n >\n {cardContent}\n </div>\n );\n};\n\nexport default ImageCard;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gravity-ui/page-constructor",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.7.0",
|
|
4
4
|
"description": "Gravity UI Page Constructor",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "commonjs",
|
|
@@ -93,7 +93,8 @@
|
|
|
93
93
|
"playwright:docker": "./scripts/playwright-docker.sh 'npm run playwright'",
|
|
94
94
|
"playwright:docker:update": "./scripts/playwright-docker.sh 'npm run playwright:update'",
|
|
95
95
|
"playwright:docker:clear-cache": "./scripts/playwright-docker.sh clear-cache",
|
|
96
|
-
"playwright:install": "playwright install --with-deps"
|
|
96
|
+
"playwright:install": "playwright install --with-deps",
|
|
97
|
+
"build:playground": "echo wip"
|
|
97
98
|
},
|
|
98
99
|
"dependencies": {
|
|
99
100
|
"@bem-react/classname": "^1.6.0",
|
|
@@ -155,7 +155,7 @@ export interface LayoutItemProps extends ClassNameProps, CardLayoutProps, Analyt
|
|
|
155
155
|
fullscreen?: boolean;
|
|
156
156
|
icon?: ThemeSupporting<PositionedIcon>;
|
|
157
157
|
}
|
|
158
|
-
export interface ImageCardProps extends CardBaseProps, CardLayoutProps, Omit<ContentBlockProps, 'colSizes' | 'centered' | 'controlPosition'> {
|
|
158
|
+
export interface ImageCardProps extends CardBaseProps, AnalyticsEventsBase, CardLayoutProps, Omit<ContentBlockProps, 'colSizes' | 'centered' | 'controlPosition'> {
|
|
159
159
|
image: ThemeSupporting<ImageProps>;
|
|
160
160
|
enableImageBorderRadius?: boolean;
|
|
161
161
|
margins?: ImageCardMargins;
|
package/styles/styles.css
CHANGED
|
@@ -49,7 +49,15 @@ unpredictable css rules order in build */
|
|
|
49
49
|
.yfm_constructor.yfm_constructor_size_s p {
|
|
50
50
|
margin-bottom: 8px;
|
|
51
51
|
}
|
|
52
|
-
.yfm_constructor.yfm_constructor_theme_dark
|
|
52
|
+
.yfm_constructor.yfm_constructor_theme_dark h1,
|
|
53
|
+
.yfm_constructor.yfm_constructor_theme_dark h2,
|
|
54
|
+
.yfm_constructor.yfm_constructor_theme_dark h3,
|
|
55
|
+
.yfm_constructor.yfm_constructor_theme_dark h4,
|
|
56
|
+
.yfm_constructor.yfm_constructor_theme_dark h5,
|
|
57
|
+
.yfm_constructor.yfm_constructor_theme_dark h6,
|
|
58
|
+
.yfm_constructor.yfm_constructor_theme_dark span,
|
|
59
|
+
.yfm_constructor.yfm_constructor_theme_dark p,
|
|
60
|
+
.yfm_constructor.yfm_constructor_theme_dark li {
|
|
53
61
|
color: var(--g-color-text-light-primary);
|
|
54
62
|
}
|
|
55
63
|
|