From d41019bbf3ef10d7842d301c5464f72083f1d9f7 Mon Sep 17 00:00:00 2001 From: Nikita Gorin <36075690+NikitaCG@users.noreply.github.com> Date: Thu, 24 Aug 2023 14:13:35 +0300 Subject: [PATCH 1/2] feat: add link animation for cards without shadow (#513) --- .../BackgroundCard/BackgroundCard.tsx | 3 +-- .../__stories__/BackgroundCard.stories.tsx | 25 +++++++++++++++++++ .../BackgroundCard/__stories__/data.json | 6 +++++ .../__stories__/BasicCard.stories.tsx | 19 ++++++++++++++ .../BasicCard/__stories__/data.json | 2 +- styles/mixins.scss | 4 ++- 6 files changed, 55 insertions(+), 4 deletions(-) diff --git a/src/sub-blocks/BackgroundCard/BackgroundCard.tsx b/src/sub-blocks/BackgroundCard/BackgroundCard.tsx index d39215ed7..7ee02ecb0 100644 --- a/src/sub-blocks/BackgroundCard/BackgroundCard.tsx +++ b/src/sub-blocks/BackgroundCard/BackgroundCard.tsx @@ -27,13 +27,12 @@ const BackgroundCard = (props: BackgroundCardProps) => { const {themeValue: theme} = useContext(ThemeValueContext); const hasBackgroundColor = backgroundColor || cardTheme !== 'default'; - const link = hasBackgroundColor || border === 'line' ? undefined : url; const borderType = hasBackgroundColor ? 'none' : border; return ( diff --git a/src/sub-blocks/BackgroundCard/__stories__/BackgroundCard.stories.tsx b/src/sub-blocks/BackgroundCard/__stories__/BackgroundCard.stories.tsx index e670ad849..d8a0399ce 100644 --- 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 = (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/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/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 { From 12db1d370bef31c4e78a4fa8f9ccb928bc85e74e Mon Sep 17 00:00:00 2001 From: Nik Tverd <61203447+niktverd@users.noreply.github.com> Date: Wed, 13 Sep 2023 21:54:40 +0600 Subject: [PATCH 2/2] feat: add analyticsEvents to BackgroundCard (#556) * feat: add analyticsEvents to BackgroundCard --- src/models/constructor-items/common.ts | 5 ++++- src/models/constructor-items/sub-blocks.ts | 6 ++++-- src/sub-blocks/BackgroundCard/BackgroundCard.tsx | 2 ++ src/sub-blocks/BackgroundCard/schema.ts | 14 ++++++++++++++ src/sub-blocks/LayoutItem/LayoutItem.tsx | 4 +++- src/sub-blocks/LayoutItem/schema.ts | 14 ++++++++++++++ src/sub-blocks/MediaCard/MediaCard.tsx | 9 +++++++-- src/sub-blocks/MediaCard/schema.ts | 14 ++++++++++++++ .../CombinedPriceDetailed.tsx | 6 ++++-- .../SeparatePriceDetailed.tsx | 9 +++++++-- src/sub-blocks/PriceDetailed/schema.ts | 14 ++++++++++++++ 11 files changed, 87 insertions(+), 10 deletions(-) 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 7ee02ecb0..7bc679a61 100644 --- a/src/sub-blocks/BackgroundCard/BackgroundCard.tsx +++ b/src/sub-blocks/BackgroundCard/BackgroundCard.tsx @@ -23,6 +23,7 @@ const BackgroundCard = (props: BackgroundCardProps) => { theme: cardTheme = 'default', links, buttons, + analyticsEvents, } = props; const {themeValue: theme} = useContext(ThemeValueContext); @@ -34,6 +35,7 @@ const BackgroundCard = (props: BackgroundCardProps) => { className={b({padding: paddingBottom, theme: cardTheme})} url={url} border={borderType} + analyticsEvents={analyticsEvents} > (
{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', + }, + ], + }, }, };