diff --git a/src/models/constructor-items/common.ts b/src/models/constructor-items/common.ts index cfc40c18f..096b8f146 100644 --- a/src/models/constructor-items/common.ts +++ b/src/models/constructor-items/common.ts @@ -375,7 +375,10 @@ export interface PriceDetailsProps { items?: PriceDetailsSettingsProps[] | PriceDetailsListProps[]; } -export interface PriceItemProps extends PriceDetailsProps, PriceDescriptionProps {} +export interface PriceItemProps + extends PriceDetailsProps, + PriceDescriptionProps, + AnalyticsEventsBase {} export interface PriceFoldableDetailsProps { title: string; diff --git a/src/models/constructor-items/sub-blocks.ts b/src/models/constructor-items/sub-blocks.ts index 27b827f6b..75ddfb11a 100644 --- a/src/models/constructor-items/sub-blocks.ts +++ b/src/models/constructor-items/sub-blocks.ts @@ -100,6 +100,7 @@ export interface QuoteProps extends Themable, CardBaseProps { export interface BackgroundCardProps extends CardBaseProps, + AnalyticsEventsBase, Omit { url?: string; background?: ThemeSupporting; @@ -109,6 +110,7 @@ export interface BackgroundCardProps export interface BasicCardProps extends CardBaseProps, + AnalyticsEventsBase, Omit { url: string; icon?: ImageProps; @@ -126,9 +128,9 @@ export interface BannerCardProps { button: Pick; } -export interface MediaCardProps extends MediaProps, CardBaseProps {} +export interface MediaCardProps extends MediaProps, AnalyticsEventsBase, CardBaseProps {} -export interface LayoutItemProps extends ClassNameProps { +export interface LayoutItemProps extends ClassNameProps, AnalyticsEventsBase { content: Omit; media: MediaProps; metaInfo?: string[]; diff --git a/src/sub-blocks/BackgroundCard/BackgroundCard.tsx b/src/sub-blocks/BackgroundCard/BackgroundCard.tsx index d39215ed7..7bc679a61 100644 --- a/src/sub-blocks/BackgroundCard/BackgroundCard.tsx +++ b/src/sub-blocks/BackgroundCard/BackgroundCard.tsx @@ -23,18 +23,19 @@ const BackgroundCard = (props: BackgroundCardProps) => { theme: cardTheme = 'default', links, buttons, + analyticsEvents, } = props; const {themeValue: theme} = useContext(ThemeValueContext); const hasBackgroundColor = backgroundColor || cardTheme !== 'default'; - const link = hasBackgroundColor || border === 'line' ? undefined : url; const borderType = hasBackgroundColor ? 'none' : border; return ( = (args) => ( ); +const WithUrlTemplate: StoryFn<{items: BackgroundCardProps[]}> = (args) => ( +
+ {args.items.map((item, i) => ( +
+ +
+ ))} +
+); + export const Default = DefaultTemplate.bind({}); export const WithBackgroundImage = DefaultTemplate.bind({}); export const Paddings = PaddingsTemplate.bind({}); export const CardThemes = CardThemesTemplate.bind([]); export const BorderLine = DefaultTemplate.bind({}); export const BackgroundColor = BackgroundColorTemplate.bind({}); +export const WithUrl = WithUrlTemplate.bind({}); const DefaultArgs = { title: data.common.title, @@ -128,3 +139,17 @@ BackgroundColor.args = { ...DefaultArgs, ...data.backgroundColor.content, } as BackgroundCardProps; + +WithUrl.args = { + items: [ + data.cardThemes.content[1], + data.withBackgroundImage.content, + data.borderLine.content, + data.backgroundColor.content, + data.borderNone.content, + ].map((item) => ({ + ...DefaultArgs, + ...item, + url: data.url, + })) as BackgroundCardProps[], +}; diff --git a/src/sub-blocks/BackgroundCard/__stories__/data.json b/src/sub-blocks/BackgroundCard/__stories__/data.json index 5c3d77617..6c15fae03 100644 --- a/src/sub-blocks/BackgroundCard/__stories__/data.json +++ b/src/sub-blocks/BackgroundCard/__stories__/data.json @@ -55,6 +55,12 @@ "border": "line" } }, + "borderNone": { + "content": { + "border": "none" + } + }, + "url": "https://example.com", "paddings": { "title": "Padding Bottom = {{padding}}" }, diff --git a/src/sub-blocks/BackgroundCard/schema.ts b/src/sub-blocks/BackgroundCard/schema.ts index e4d064532..278fea9f4 100644 --- a/src/sub-blocks/BackgroundCard/schema.ts +++ b/src/sub-blocks/BackgroundCard/schema.ts @@ -2,6 +2,7 @@ import _ from 'lodash'; import {ImageObjectProps} from '../../components/Image/schema'; import {BaseProps, CardBase, withTheme} from '../../schema/validators/common'; +import {AnalyticsEventSchema} from '../../schema/validators/event'; import {ContentBase} from '../Content/schema'; const BackgroundCardContentProps = _.omit(ContentBase, ['size']); @@ -25,6 +26,19 @@ export const BackgroundCard = { type: 'string', enum: ['s', 'm', 'l', 'xl'], }, + analyticsEvents: { + oneOf: [ + { + ...AnalyticsEventSchema, + optionName: 'single', + }, + { + type: 'array', + items: AnalyticsEventSchema, + optionName: 'list', + }, + ], + }, }, }, }; diff --git a/src/sub-blocks/BasicCard/__stories__/BasicCard.stories.tsx b/src/sub-blocks/BasicCard/__stories__/BasicCard.stories.tsx index f4f199ea0..6d2984c67 100644 --- a/src/sub-blocks/BasicCard/__stories__/BasicCard.stories.tsx +++ b/src/sub-blocks/BasicCard/__stories__/BasicCard.stories.tsx @@ -60,9 +60,24 @@ const WithBorderTemplate: StoryFn = (args) => ( ); +const WithUrlTemplate: StoryFn = (args) => ( +
+
+ +
+
+ +
+
+ +
+
+); + export const Default = DefaultTemplate.bind({}); export const WithIcon = WithIconTemplate.bind({}); export const WithBorder = WithBorderTemplate.bind({}); +export const WithUrl = WithUrlTemplate.bind({}); const DefaultArgs = { ...data.default.content, @@ -75,3 +90,7 @@ Default.args = { } as BasicCardProps; WithIcon.args = DefaultArgs as BasicCardProps; WithBorder.args = DefaultArgs as BasicCardProps; +WithUrl.args = { + url: data.url, + ...DefaultArgs, +} as BasicCardProps; diff --git a/src/sub-blocks/BasicCard/__stories__/data.json b/src/sub-blocks/BasicCard/__stories__/data.json index 7f8981377..d8e72c0ab 100644 --- a/src/sub-blocks/BasicCard/__stories__/data.json +++ b/src/sub-blocks/BasicCard/__stories__/data.json @@ -10,9 +10,9 @@ "withBorder": { "title": "Card with border {{border}}" }, + "url": "https://example.com", "default": { "content": { - "url": "https://example.com", "title": "Lorem ipsum", "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." } diff --git a/src/sub-blocks/LayoutItem/LayoutItem.tsx b/src/sub-blocks/LayoutItem/LayoutItem.tsx index 24bf6a706..7fdfe3bc7 100644 --- a/src/sub-blocks/LayoutItem/LayoutItem.tsx +++ b/src/sub-blocks/LayoutItem/LayoutItem.tsx @@ -18,6 +18,7 @@ const LayoutItem = ({ border, fullscreen, className, + analyticsEvents, }: LayoutItemProps) => (
{fullscreen && hasFullscreen(media) ? ( @@ -31,11 +32,12 @@ const LayoutItem = ({ {...media} {...fullscreenMediaProps} className={b('media', {border}, mediaClassName)} + analyticsEvents={analyticsEvents} /> )} ) : ( - + )} {metaInfo && }
diff --git a/src/sub-blocks/LayoutItem/schema.ts b/src/sub-blocks/LayoutItem/schema.ts index 31ef2466f..7f254bbb4 100644 --- a/src/sub-blocks/LayoutItem/schema.ts +++ b/src/sub-blocks/LayoutItem/schema.ts @@ -2,6 +2,7 @@ import {omit} from 'lodash'; import metaInfo from '../../components/MetaInfo/schema'; import {BaseProps, MediaProps} from '../../schema/validators/common'; +import {AnalyticsEventSchema} from '../../schema/validators/event'; import {ContentBase} from '../../sub-blocks/Content/schema'; export const LayoutItem = { @@ -19,5 +20,18 @@ export const LayoutItem = { fullscreen: { type: 'boolean', }, + analyticsEvents: { + oneOf: [ + { + ...AnalyticsEventSchema, + optionName: 'single', + }, + { + type: 'array', + items: AnalyticsEventSchema, + optionName: 'list', + }, + ], + }, }, }; diff --git a/src/sub-blocks/MediaCard/MediaCard.tsx b/src/sub-blocks/MediaCard/MediaCard.tsx index 19624b727..4aa8cd7bc 100644 --- a/src/sub-blocks/MediaCard/MediaCard.tsx +++ b/src/sub-blocks/MediaCard/MediaCard.tsx @@ -8,8 +8,13 @@ import './MediaCard.scss'; const b = block('MediaCard'); -const MediaCard = ({border, ...mediaProps}: MediaCardProps) => ( - +const MediaCard = ({border, analyticsEvents, ...mediaProps}: MediaCardProps) => ( + diff --git a/src/sub-blocks/MediaCard/schema.ts b/src/sub-blocks/MediaCard/schema.ts index 3a046e976..6ec523240 100644 --- a/src/sub-blocks/MediaCard/schema.ts +++ b/src/sub-blocks/MediaCard/schema.ts @@ -1,4 +1,5 @@ import {AnimatableProps, BaseProps, CardBase, MediaProps} from '../../schema/validators/common'; +import {AnalyticsEventSchema} from '../../schema/validators/event'; export const MediaCardBlock = { 'media-card': { @@ -9,6 +10,19 @@ export const MediaCardBlock = { ...CardBase, ...MediaProps, ...AnimatableProps, + analyticsEvents: { + oneOf: [ + { + ...AnalyticsEventSchema, + optionName: 'single', + }, + { + type: 'array', + items: AnalyticsEventSchema, + optionName: 'list', + }, + ], + }, }, }, }; diff --git a/src/sub-blocks/PriceDetailed/CombinedPriceDetailed/CombinedPriceDetailed.tsx b/src/sub-blocks/PriceDetailed/CombinedPriceDetailed/CombinedPriceDetailed.tsx index d14df3594..df128a12a 100644 --- a/src/sub-blocks/PriceDetailed/CombinedPriceDetailed/CombinedPriceDetailed.tsx +++ b/src/sub-blocks/PriceDetailed/CombinedPriceDetailed/CombinedPriceDetailed.tsx @@ -6,6 +6,7 @@ import {CardBase} from '../../../components'; import {BREAKPOINTS} from '../../../constants'; import {Col, Grid, GridColumnSize, Row} from '../../../grid'; import { + AnalyticsEventsBase, CardBorder, PriceDescriptionProps, PriceDetailsListProps, @@ -24,7 +25,7 @@ const CombinedPricesGroupSize = { [GridColumnSize.Lg]: 3, }; -interface CombinedPriceDetailedProps { +interface CombinedPriceDetailedProps extends AnalyticsEventsBase { items: PriceItemProps[]; numberGroupItems: number; useMixedView?: boolean; @@ -43,6 +44,7 @@ const CombinedPriceDetailed = (props: CombinedPriceDetailedProps) => { useMixedView, getDescriptionComponent, getDetailsComponent, + analyticsEvents, } = props; const [groupItemsSize, setGroupItemsSize] = useState(numberGroupItems); @@ -103,7 +105,7 @@ const CombinedPriceDetailed = (props: CombinedPriceDetailedProps) => { const chunkedItems = _.chunk(items, groupItemsSize); return ( - + {chunkedItems.map((chunk: PriceItemProps[], id) => { diff --git a/src/sub-blocks/PriceDetailed/SeparatePriceDetailed/SeparatePriceDetailed.tsx b/src/sub-blocks/PriceDetailed/SeparatePriceDetailed/SeparatePriceDetailed.tsx index 9fcf29d0d..6697fdeb1 100644 --- a/src/sub-blocks/PriceDetailed/SeparatePriceDetailed/SeparatePriceDetailed.tsx +++ b/src/sub-blocks/PriceDetailed/SeparatePriceDetailed/SeparatePriceDetailed.tsx @@ -28,8 +28,13 @@ const SeparatePriceDetailed = (props: SeparatePriceDetailedProps) => { return ( - {items.map((item: PriceItemProps, id: number) => ( - + {items.map(({analyticsEvents, ...item}: PriceItemProps, id: number) => ( + {getDescriptionComponent(item)} {getDetailsComponent(item.items)} diff --git a/src/sub-blocks/PriceDetailed/schema.ts b/src/sub-blocks/PriceDetailed/schema.ts index 31ed177e1..83d11183c 100644 --- a/src/sub-blocks/PriceDetailed/schema.ts +++ b/src/sub-blocks/PriceDetailed/schema.ts @@ -1,4 +1,5 @@ import {AnimatableProps, BaseProps, textSize} from '../../schema/validators/common'; +import {AnalyticsEventSchema} from '../../schema/validators/event'; import {filteredArray} from '../../schema/validators/utils'; const PriceDetailedDetailsType = ['marked-list', 'settings']; @@ -162,6 +163,19 @@ const PriceItem = { properties: { ...PriceDetailsProps, ...PriceDescriptionProps, + analyticsEvents: { + oneOf: [ + { + ...AnalyticsEventSchema, + optionName: 'single', + }, + { + type: 'array', + items: AnalyticsEventSchema, + optionName: 'list', + }, + ], + }, }, }; diff --git a/styles/mixins.scss b/styles/mixins.scss index 8ccd1f966..5bf00bae3 100644 --- a/styles/mixins.scss +++ b/styles/mixins.scss @@ -254,7 +254,9 @@ &_border_line, &_border_none { - cursor: default; + @if $hover { + @include card-hover(); + } } &_border_shadow {