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]>
gravity-ui · Sep 13, 2023 · ecf0fca · ecf0fca
1 parent f2b321c
commit ecf0fca
Show file tree

Hide file tree

Showing 16 changed files with 142 additions and 14 deletions.
diff --git 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
@@ -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[];

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

diff --git a/src/sub-blocks/BackgroundCard/__stories__/BackgroundCard.stories.tsx b/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[],
+};
diff --git 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
@@ -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
@@ -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;
diff --git 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
@@ -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')}>

diff --git 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
@@ -8,8 +8,13 @@ import './MediaCard.scss';
 
 const b = block('MediaCard');
 
-const MediaCard = ({border, ...mediaProps}: MediaCardProps) => (
-    <CardBase className={b()} bodyClassName={b('body')} border={border}>
+const MediaCard = ({border, analyticsEvents, ...mediaProps}: MediaCardProps) => (
+    <CardBase
+        className={b()}
+        bodyClassName={b('body')}
+        border={border}
+        analyticsEvents={analyticsEvents}
+    >
         <CardBase.Content>
             <Media {...mediaProps} />
         </CardBase.Content>

diff --git 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
@@ -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<number>(numberGroupItems);
@@ -103,7 +105,7 @@ const CombinedPriceDetailed = (props: CombinedPriceDetailedProps) => {
     const chunkedItems = _.chunk(items, groupItemsSize);
 
     return (
-        <CardBase className={b()} border={border}>
+        <CardBase className={b()} border={border} analyticsEvents={analyticsEvents}>
             <CardBase.Content>
                 <Grid>
                     {chunkedItems.map((chunk: PriceItemProps[], id) => {

diff --git 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 (
         <Fragment>
-            {items.map((item: PriceItemProps, id: number) => (
-                <CardBase key={id} className={b()} border={border}>
+            {items.map(({analyticsEvents, ...item}: PriceItemProps, id: number) => (
+                <CardBase
+                    key={id}
+                    className={b()}
+                    border={border}
+                    analyticsEvents={analyticsEvents}
+                >
                     <CardBase.Content>
                         {getDescriptionComponent(item)}
                         {getDetailsComponent(item.items)}

diff --git 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
@@ -254,7 +254,9 @@
 
     &_border_line,
     &_border_none {
-        cursor: default;
+        @if $hover {
+            @include card-hover();
+        }
     }
 
     &_border_shadow {