From 3a62201351b462625828dbbb365fbf545c6a93fe Mon Sep 17 00:00:00 2001 From: Abel Toledano Date: Thu, 3 Aug 2023 15:46:24 +0200 Subject: [PATCH 1/9] WEB-1498 feat(PosterCard): allow backgroundColor/variant --- src/__stories__/poster-card-story.tsx | 26 ++++++++++++++++--- src/__type_tests__/card-type-test.tsx | 13 +++++++++- src/card.tsx | 37 ++++++++++++++++++++++++--- 3 files changed, 69 insertions(+), 7 deletions(-) diff --git a/src/__stories__/poster-card-story.tsx b/src/__stories__/poster-card-story.tsx index 2e78319a63..44f2828d42 100644 --- a/src/__stories__/poster-card-story.tsx +++ b/src/__stories__/poster-card-story.tsx @@ -30,7 +30,9 @@ const BACKGROUND_VIDEO_POSTER_SRC = beachImg; type PosterCardArgs = { asset: 'icon' | 'circle + icon' | 'image' | 'circle + image'; - background: 'image' | 'video'; + background: 'image' | 'video' | 'color'; + backgroundColor: string; + variant: 'default' | 'inverse' | 'alternative'; headlineType: TagType; headline: string; pretitle: string; @@ -47,6 +49,8 @@ type PosterCardArgs = { export const Default: StoryComponent = ({ asset = 'icon', background, + backgroundColor, + variant, headline, headlineType, pretitle, @@ -85,9 +89,14 @@ export const Default: StoryComponent = ({ : undefined, backgroundImage: BACKGROUND_IMAGE_SRC, } - : { + : background === 'video' + ? { backgroundVideo: BACKGROUND_VIDEO_SRC, poster: BACKGROUND_VIDEO_POSTER_SRC, + } + : { + backgroundColor, + variant, }; const wrongBackgroundProps = @@ -168,6 +177,8 @@ Default.args = { asset: 'icon', headlineType: 'promo', background: 'image', + backgroundColor: '', + variant: 'default', headline: 'Priority', pretitle: 'Pretitle', title: 'Title', @@ -189,8 +200,17 @@ Default.argTypes = { control: {type: 'select'}, }, background: { - options: ['image', 'video'], + options: ['image', 'video', 'color'], + control: {type: 'select'}, + }, + backgroundColor: { + control: {type: 'color'}, + if: {arg: 'background', eq: 'color'}, + }, + variant: { + options: ['default', 'inverse', 'alternative'], control: {type: 'select'}, + if: {arg: 'background', eq: 'color'}, }, aspectRatio: { options: ['1:1', '16:9', '7:10', '9:10', 'auto'], diff --git a/src/__type_tests__/card-type-test.tsx b/src/__type_tests__/card-type-test.tsx index 82cf03cf4a..e36743772b 100644 --- a/src/__type_tests__/card-type-test.tsx +++ b/src/__type_tests__/card-type-test.tsx @@ -31,6 +31,11 @@ import Image from '../image'; onPress={() => {}} trackingEvent={{name: 'do-something'}} />; +; +; +; +; +; // @ts-expect-error onPress and href can't be used together {}} href="/" />; @@ -42,8 +47,14 @@ import Image from '../image'; ; // @ts-expect-error backgroundImage and backgroundVideo can't be used together ; -// @ts-expect-error backgroundImage or backgroundVideo are mandatory +// @ts-expect-error backgroundImage and backgroundColor can't be used together +; +// @ts-expect-error backgroundVideo and backgroundColor can't be used together +; +// @ts-expect-error backtroundColor, backgroundImage or backgroundVideo are mandatory ; +// @ts-expect-error if you set a custom backgroundColor, you should specify the variant +; (isTouchable: boolean) => ; (isTouchable: boolean) => ; diff --git a/src/card.tsx b/src/card.tsx index ec6e30c186..b5ccad2782 100644 --- a/src/card.tsx +++ b/src/card.tsx @@ -24,6 +24,7 @@ import {assignInlineVars} from '@vanilla-extract/dynamic'; import Inline from './inline'; import {getPrefixedDataAttributes} from './utils/dom'; +import type {Variant} from './theme-variant-context'; import type {PressHandler} from './touchable'; import type {VideoElement, VideoSource} from './video'; import type {ButtonLink, ButtonPrimary, ButtonSecondary} from './button'; @@ -1185,8 +1186,19 @@ type PosterCardWithVideoProps = Omit backgroundVideoRef?: React.RefObject; }; +type PosterCardWithBackgroundColorProps = PosterCardBaseProps & { + backgroundColor?: string; +} & ExclusifyUnion< + | { + variant: Variant; + } + | { + isInverse: boolean; + } + >; + type PosterCardProps = MaybeTouchableCard< - ExclusifyUnion + ExclusifyUnion >; const POSTER_CARD_MIN_WIDTH = 140; @@ -1212,6 +1224,9 @@ export const PosterCard = React.forwardRef( titleLinesMax, description, descriptionLinesMax, + variant, + isInverse, + backgroundColor, ...touchableProps }, ref @@ -1231,6 +1246,22 @@ export const PosterCard = React.forwardRef( const isTouchable = touchableProps.href || touchableProps.to || touchableProps.onPress; + const calcBackgroundColor = () => { + if (backgroundColor) { + return backgroundColor; + } + + const normalizedVariant = variant || (isInverse ? 'inverse' : 'default'); + + return { + default: vars.colors.backgroundContainer, + inverse: isExternalInverse + ? vars.colors.backgroundContainerBrandOverInverse + : vars.colors.backgroundBrand, + alternative: vars.colors.backgroundAlternative, + }[normalizedVariant]; + }; + return ( ( className={styles.boxed} width="100%" minHeight="100%" - isInverse + isInverse={!!backgroundImage || !!backgroundVideo || isInverse || variant === 'inverse'} background={ backgroundImage || backgroundVideo ? isExternalInverse ? vars.colors.backgroundContainerBrandOverInverse : vars.colors.backgroundContainer - : undefined + : calcBackgroundColor() } > Date: Fri, 11 Aug 2023 10:44:22 +0200 Subject: [PATCH 2/9] improve story controls --- src/__stories__/poster-card-story.tsx | 28 ++++++++++++++++++--------- 1 file changed, 19 insertions(+), 9 deletions(-) diff --git a/src/__stories__/poster-card-story.tsx b/src/__stories__/poster-card-story.tsx index ed13cd72ef..6b7c2a72c5 100644 --- a/src/__stories__/poster-card-story.tsx +++ b/src/__stories__/poster-card-story.tsx @@ -30,8 +30,9 @@ const BACKGROUND_VIDEO_POSTER_SRC = beachImg; type PosterCardArgs = { asset: 'circle with icon' | 'circle with image' | 'none'; - background: 'image' | 'video' | 'color'; - backgroundColor: string; + background: 'image' | 'video' | 'color' | 'custom color' | 'color from skin'; + backgroundColorCustom: string; + backgroundColorFromSkin: string; variant: 'default' | 'inverse' | 'alternative'; headlineType: TagType; headline: string; @@ -49,7 +50,8 @@ type PosterCardArgs = { export const Default: StoryComponent = ({ asset, background, - backgroundColor, + backgroundColorCustom, + backgroundColorFromSkin, variant, headline, headlineType, @@ -95,7 +97,7 @@ export const Default: StoryComponent = ({ poster: BACKGROUND_VIDEO_POSTER_SRC, } : { - backgroundColor, + backgroundColor: backgroundColorFromSkin || backgroundColorCustom, variant, }; @@ -177,7 +179,8 @@ Default.args = { asset: 'none', headlineType: 'promo', background: 'image', - backgroundColor: '', + backgroundColorCustom: '', + backgroundColorFromSkin: '', variant: 'default', headline: 'Priority', pretitle: 'Pretitle', @@ -190,6 +193,7 @@ Default.args = { height: 'auto', aspectRatio: 'auto', }; + Default.argTypes = { asset: { options: ['circle with icon', 'circle with image', 'none'], @@ -200,17 +204,23 @@ Default.argTypes = { control: {type: 'select'}, }, background: { - options: ['image', 'video', 'color'], + options: ['image', 'video', 'color from skin', 'custom color'], control: {type: 'select'}, }, - backgroundColor: { + backgroundColorCustom: { control: {type: 'color'}, - if: {arg: 'background', eq: 'color'}, + if: {arg: 'background', eq: 'custom color'}, + }, + backgroundColorFromSkin: { + control: {type: 'select'}, + options: {'none (determined by variant)': '', ...skinVars.colors}, + if: {arg: 'background', eq: 'color from skin'}, }, variant: { options: ['default', 'inverse', 'alternative'], control: {type: 'select'}, - if: {arg: 'background', eq: 'color'}, + // this control should only be visible when background is set to 'color from skin' or 'custom color' + // if: {arg: 'background', eq: 'color'}, }, aspectRatio: { options: ['1:1', '16:9', '7:10', '9:10', 'auto'], From 06ef0fcc3ac57fb021b2c5fdaafe97f004f435cb Mon Sep 17 00:00:00 2001 From: Abel Toledano Date: Fri, 11 Aug 2023 10:48:16 +0200 Subject: [PATCH 3/9] fix hover --- src/card.css.ts | 16 ---------------- src/card.tsx | 14 ++++++++++---- 2 files changed, 10 insertions(+), 20 deletions(-) diff --git a/src/card.css.ts b/src/card.css.ts index c03a2695b3..b45246980c 100644 --- a/src/card.css.ts +++ b/src/card.css.ts @@ -279,22 +279,6 @@ export const snapCardTouchableHover = style([ }, ]); -export const snapCardTouchableHoverTransparent = style([ - snapCardTouchableBase, - { - display: 'flex', - height: '100%', - - '@media': { - [mq.supportsHover]: { - ':hover': { - backgroundColor: 'transparent', - }, - }, - }, - }, -]); - export const displayCardContainer = sprinkles({ width: '100%', height: '100%', diff --git a/src/card.tsx b/src/card.tsx index c87c338e78..62dc7b5a86 100644 --- a/src/card.tsx +++ b/src/card.tsx @@ -1256,14 +1256,13 @@ export const PosterCard = React.forwardRef( const {textPresets} = useTheme(); const isTouchable = touchableProps.href || touchableProps.to || touchableProps.onPress; + const normalizedVariant = variant || (isInverse ? 'inverse' : 'default'); const calcBackgroundColor = () => { if (backgroundColor) { return backgroundColor; } - const normalizedVariant = variant || (isInverse ? 'inverse' : 'default'); - return { default: vars.colors.backgroundContainer, inverse: isExternalInverse @@ -1273,6 +1272,13 @@ export const PosterCard = React.forwardRef( }[normalizedVariant]; }; + const overlayStyle = + backgroundImage || backgroundVideo + ? styles.touchableCardOverlayMedia + : normalizedVariant === 'inverse' + ? styles.touchableCardOverlayInverse + : styles.touchableCardOverlay; + return ( ( className={styles.boxed} width="100%" minHeight="100%" - isInverse={!!backgroundImage || !!backgroundVideo || isInverse || variant === 'inverse'} + isInverse={!!backgroundImage || !!backgroundVideo || normalizedVariant === 'inverse'} background={ backgroundImage || backgroundVideo ? isExternalInverse @@ -1304,7 +1310,7 @@ export const PosterCard = React.forwardRef( className={styles.touchable} aria-label={ariaLabel} > - {isTouchable &&
} + {isTouchable &&
}
From 73c27fb4950a0ca0290bf845285c80cbe7ad59d4 Mon Sep 17 00:00:00 2001 From: Abel Toledano Date: Fri, 11 Aug 2023 10:53:26 +0200 Subject: [PATCH 4/9] fix top actions in story --- src/__stories__/poster-card-story.tsx | 24 ++++++++++++++---------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/src/__stories__/poster-card-story.tsx b/src/__stories__/poster-card-story.tsx index 6b7c2a72c5..300bd14e0a 100644 --- a/src/__stories__/poster-card-story.tsx +++ b/src/__stories__/poster-card-story.tsx @@ -76,19 +76,22 @@ export const Default: StoryComponent = ({ icon = ; } + const topActionsProps = { + onClose: closable ? () => {} : undefined, + actions: withTopAction + ? [ + { + Icon: IconLightningRegular, + onPress: () => {}, + label: 'Lightning', + }, + ] + : undefined, + }; const backgroundProps = background === 'image' ? { - onClose: closable ? () => {} : undefined, - actions: withTopAction - ? [ - { - Icon: IconLightningRegular, - onPress: () => {}, - label: 'Lightning', - }, - ] - : undefined, + ...topActionsProps, backgroundImage: BACKGROUND_IMAGE_SRC, } : background === 'video' @@ -97,6 +100,7 @@ export const Default: StoryComponent = ({ poster: BACKGROUND_VIDEO_POSTER_SRC, } : { + ...topActionsProps, backgroundColor: backgroundColorFromSkin || backgroundColorCustom, variant, }; From 2a9a62a5d9a81aaa7940accb36e9687a4cb69fd4 Mon Sep 17 00:00:00 2001 From: Abel Toledano Date: Fri, 11 Aug 2023 11:18:28 +0200 Subject: [PATCH 5/9] add some tests --- ...rd-with-custom-background-color-1-snap.png | Bin 0 -> 8478 bytes ...custom-background-color-inverse-1-snap.png | Bin 0 -> 8134 bytes ...r-card-with-variant-alternative-1-snap.png | Bin 0 -> 8275 bytes ...oster-card-with-variant-default-1-snap.png | Bin 0 -> 8330 bytes ...oster-card-with-variant-inverse-1-snap.png | Bin 0 -> 7708 bytes .../poster-card-screenshot-test.tsx | 39 ++++++++++++++++++ src/__stories__/poster-card-story.tsx | 1 + 7 files changed, 40 insertions(+) create mode 100644 src/__screenshot_tests__/__image_snapshots__/poster-card-screenshot-test-tsx-poster-card-with-custom-background-color-1-snap.png create mode 100644 src/__screenshot_tests__/__image_snapshots__/poster-card-screenshot-test-tsx-poster-card-with-custom-background-color-inverse-1-snap.png create mode 100644 src/__screenshot_tests__/__image_snapshots__/poster-card-screenshot-test-tsx-poster-card-with-variant-alternative-1-snap.png create mode 100644 src/__screenshot_tests__/__image_snapshots__/poster-card-screenshot-test-tsx-poster-card-with-variant-default-1-snap.png create mode 100644 src/__screenshot_tests__/__image_snapshots__/poster-card-screenshot-test-tsx-poster-card-with-variant-inverse-1-snap.png diff --git a/src/__screenshot_tests__/__image_snapshots__/poster-card-screenshot-test-tsx-poster-card-with-custom-background-color-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/poster-card-screenshot-test-tsx-poster-card-with-custom-background-color-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..4a4b3b92ad3d636018829ebe5327762baacb3017 GIT binary patch literal 8478 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 T)BFQzG&1l*LoI~HlQ;hbn>Y!q literal 0 HcmV?d00001 diff --git a/src/__screenshot_tests__/__image_snapshots__/poster-card-screenshot-test-tsx-poster-card-with-custom-background-color-inverse-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/poster-card-screenshot-test-tsx-poster-card-with-custom-background-color-inverse-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..c6628e0b2beabab0200330af7dab4bbe00ed7c44 GIT binary patch literal 8134 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 literal 0 HcmV?d00001 diff --git a/src/__screenshot_tests__/__image_snapshots__/poster-card-screenshot-test-tsx-poster-card-with-variant-alternative-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/poster-card-screenshot-test-tsx-poster-card-with-variant-alternative-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..0db9acff8951ca22c79a3edd407b8b8859419d7e GIT binary patch literal 8275 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 literal 0 HcmV?d00001 diff --git a/src/__screenshot_tests__/__image_snapshots__/poster-card-screenshot-test-tsx-poster-card-with-variant-default-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/poster-card-screenshot-test-tsx-poster-card-with-variant-default-1-snap.png new file mode 100644 index 0000000000000000000000000000000000000000..b646a77653ee380ae7fc930e035408d530cffd3e GIT binary patch literal 8330 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 xwrT26LTt)abjri+A-WW3dD-6Yh3; { expect(image).toMatchImageSnapshot(); }); + +test.each(['inverse', 'alternative', 'default'])('PosterCard with variant %s', async (variant) => { + await openStoryPage({ + id: 'components-cards-poster-card--default', + args: {variant, background: 'color from skin'}, + }); + + const posterCard = await screen.findByTestId('main-poster-card'); + + const image = await posterCard.screenshot(); + + expect(image).toMatchImageSnapshot(); +}); + +test('PosterCard with custom background color', async () => { + await openStoryPage({ + id: 'components-cards-poster-card--default', + args: {background: 'custom color', backgroundColorCustom: '#ff0'}, + }); + + const posterCard = await screen.findByTestId('main-poster-card'); + + const image = await posterCard.screenshot(); + + expect(image).toMatchImageSnapshot(); +}); + +test('PosterCard with custom background color inverse', async () => { + await openStoryPage({ + id: 'components-cards-poster-card--default', + args: {background: 'custom color', backgroundColorCustom: '#000', variant: 'inverse'}, + }); + + const posterCard = await screen.findByTestId('main-poster-card'); + + const image = await posterCard.screenshot(); + + expect(image).toMatchImageSnapshot(); +}); diff --git a/src/__stories__/poster-card-story.tsx b/src/__stories__/poster-card-story.tsx index 300bd14e0a..704a844897 100644 --- a/src/__stories__/poster-card-story.tsx +++ b/src/__stories__/poster-card-story.tsx @@ -128,6 +128,7 @@ export const Default: StoryComponent = ({ return ( {headline} : undefined} From 05c0337239b896d826d118d9ff893a77acb6c471 Mon Sep 17 00:00:00 2001 From: Abel Toledano Date: Fri, 11 Aug 2023 11:20:56 +0200 Subject: [PATCH 6/9] fix story background type --- src/__stories__/poster-card-story.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/__stories__/poster-card-story.tsx b/src/__stories__/poster-card-story.tsx index 704a844897..46a3c7ea47 100644 --- a/src/__stories__/poster-card-story.tsx +++ b/src/__stories__/poster-card-story.tsx @@ -30,7 +30,7 @@ const BACKGROUND_VIDEO_POSTER_SRC = beachImg; type PosterCardArgs = { asset: 'circle with icon' | 'circle with image' | 'none'; - background: 'image' | 'video' | 'color' | 'custom color' | 'color from skin'; + background: 'image' | 'video' | 'custom color' | 'color from skin'; backgroundColorCustom: string; backgroundColorFromSkin: string; variant: 'default' | 'inverse' | 'alternative'; From 25ca4814f60a004e2a851c4460238c6dbfcef00f Mon Sep 17 00:00:00 2001 From: Abel Toledano Date: Fri, 11 Aug 2023 11:27:04 +0200 Subject: [PATCH 7/9] fix top actions style --- src/card.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/card.tsx b/src/card.tsx index 62dc7b5a86..2d27b2009d 100644 --- a/src/card.tsx +++ b/src/card.tsx @@ -1403,7 +1403,17 @@ export const PosterCard = React.forwardRef(
- + ); } From 757bad4023b21805203feb3724f79cb3dd728142 Mon Sep 17 00:00:00 2001 From: Abel Toledano Date: Fri, 11 Aug 2023 13:45:15 +0200 Subject: [PATCH 8/9] snippets --- playroom/snippets.tsx | 43 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/playroom/snippets.tsx b/playroom/snippets.tsx index b2200f180e..21c837ac5b 100644 --- a/playroom/snippets.tsx +++ b/playroom/snippets.tsx @@ -796,6 +796,49 @@ const cardSnippets: Array = [ } />`, }, + { + group: 'Cards', + name: 'PosterCard inverse', + code: ` + Headline} + pretitle="Pretitle" + title="Title" + description="Description" + isInverse + onClose={() => {}} + onPress={() => {alert({ title: "pressed" });}} + actions={[ + { + Icon: IconLightningRegular, + onPress: () => {}, + label: "Lightning", + }, + ]} + />`, + }, + { + group: 'Cards', + name: 'PosterCard with backgroundColor', + code: ` + Headline} + pretitle="Pretitle" + title="Title" + description="Description" + backgroundColor={colors.promo} + isInverse + onClose={() => {}} + onPress={() => {alert({ title: "pressed" });}} + actions={[ + { + Icon: IconLightningRegular, + onPress: () => {}, + label: "Lightning", + }, + ]} + />`, + }, { group: 'Cards', From a24796c1b6a76f3b303fef59163f38e8eef33cff Mon Sep 17 00:00:00 2001 From: Abel Toledano Date: Fri, 11 Aug 2023 15:06:48 +0200 Subject: [PATCH 9/9] fix typpo --- src/__type_tests__/card-type-test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/__type_tests__/card-type-test.tsx b/src/__type_tests__/card-type-test.tsx index e36743772b..cf04ec4e38 100644 --- a/src/__type_tests__/card-type-test.tsx +++ b/src/__type_tests__/card-type-test.tsx @@ -51,7 +51,7 @@ import Image from '../image'; ; // @ts-expect-error backgroundVideo and backgroundColor can't be used together ; -// @ts-expect-error backtroundColor, backgroundImage or backgroundVideo are mandatory +// @ts-expect-error backgroundColor, backgroundImage or backgroundVideo are mandatory ; // @ts-expect-error if you set a custom backgroundColor, you should specify the variant ;