feat: add analyticsEvents to BackgroundCard & add link animation for cards without shadow (#559)

* feat: add link animation for cards without shadow (#513)

* feat: add analyticsEvents to BackgroundCard (#556)

---------

Co-authored-by: Nikita Gorin <[email protected]>

Author: niktverd

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;

src/models/constructor-items/sub-blocks.ts

@@ -100,6 +100,7 @@ export interface QuoteProps extends Themable, CardBaseProps {
 
 export interface BackgroundCardProps
     extends CardBaseProps,
+        AnalyticsEventsBase,
         Omit<ContentBlockProps, 'colSizes' | 'centered'> {
     url?: string;
     background?: ThemeSupporting<ImageObjectProps>;
@@ -109,6 +110,7 @@ export interface BackgroundCardProps
 
 export interface BasicCardProps
     extends CardBaseProps,
+        AnalyticsEventsBase,
         Omit<ContentBlockProps, 'colSizes' | 'centered' | 'size' | 'theme'> {
     url: string;
     icon?: ImageProps;
@@ -126,9 +128,9 @@ export interface BannerCardProps {
     button: Pick<ButtonProps, 'text' | 'url' | 'target'>;
 }
 
-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<ContentBlockProps, 'colSizes' | 'centered' | 'size'>;
     media: MediaProps;
     metaInfo?: string[];

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 (
         <CardBase
             className={b({padding: paddingBottom, theme: cardTheme})}
-            url={link}
+            url={url}
             border={borderType}
+            analyticsEvents={analyticsEvents}
         >
             <CardBase.Content>
                 <BackgroundImage

src/sub-blocks/BackgroundCard/__stories__/BackgroundCard.stories.tsx

@@ -85,12 +85,23 @@ const BackgroundColorTemplate: StoryFn<BackgroundCardProps> = (args) => (
     </div>
 );
 
+const WithUrlTemplate: StoryFn<{items: BackgroundCardProps[]}> = (args) => (
+    <div style={{display: 'flex'}}>
+        {args.items.map((item, i) => (
+            <div style={{maxWidth: '400px', padding: '0 8px'}} key={i}>
+                <BackgroundCard {...item} />
+            </div>
+        ))}
+    </div>
+);
+
 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[],
+};

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}}"
   },

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',
+                    },
+                ],
+            },
         },
     },
 };

src/sub-blocks/BasicCard/__stories__/BasicCard.stories.tsx

@@ -60,9 +60,24 @@ const WithBorderTemplate: StoryFn<BasicCardProps> = (args) => (
     </div>
 );
 
+const WithUrlTemplate: StoryFn<BasicCardProps> = (args) => (
+    <div style={{display: 'flex', padding: '40px 0'}}>
+        <div style={{maxWidth: '400px', padding: '0 8px'}}>
+            <BasicCard {...args} title={getCardWithBorderTitle('shadow')} />
+        </div>
+        <div style={{maxWidth: '400px', padding: '0 8px'}}>
+            <BasicCard {...args} border="line" title={getCardWithBorderTitle('line')} />
+        </div>
+        <div style={{maxWidth: '400px', padding: '0 8px'}}>
+            <BasicCard {...args} border="none" title={getCardWithBorderTitle('none')} />
+        </div>
+    </div>
+);
+
 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;

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."
     }

src/sub-blocks/LayoutItem/LayoutItem.tsx

@@ -18,6 +18,7 @@ const LayoutItem = ({
     border,
     fullscreen,
     className,
+    analyticsEvents,
 }: LayoutItemProps) => (
     <div className={b(null, className)}>
         {fullscreen && hasFullscreen(media) ? (
@@ -31,11 +32,12 @@ const LayoutItem = ({
                         {...media}
                         {...fullscreenMediaProps}
                         className={b('media', {border}, mediaClassName)}
+                        analyticsEvents={analyticsEvents}
                     />
                 )}
             </FullscreenMedia>
         ) : (
-            <Media {...media} className={b('media', {border})} />
+            <Media {...media} className={b('media', {border})} analyticsEvents={analyticsEvents} />
         )}
         {metaInfo && <MetaInfo items={metaInfo} className={b('meta-info')} />}
         <div className={b('content')}>

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',
+                },
+            ],
+        },
     },
 };