feat(PosterCard): allow backgroundColor/variant

src/__screenshot_tests__/poster-card-screenshot-test.tsx

@@ -125,3 +125,42 @@ test.each(TESTABLE_DEVICES)('PosterCard with asset in %s', async (device) => {
 
     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();
+});

src/__stories__/poster-card-story.tsx

@@ -30,7 +30,10 @@ const BACKGROUND_VIDEO_POSTER_SRC = beachImg;
 
 type PosterCardArgs = {
     asset: 'circle with icon' | 'circle with image' | 'none';
-    background: 'image' | 'video';
+    background: 'image' | 'video' | 'custom color' | 'color from skin';
+    backgroundColorCustom: string;
+    backgroundColorFromSkin: string;
+    variant: 'default' | 'inverse' | 'alternative';
     headlineType: TagType;
     headline: string;
     pretitle: string;
@@ -47,6 +50,9 @@ type PosterCardArgs = {
 export const Default: StoryComponent<PosterCardArgs> = ({
     asset,
     background,
+    backgroundColorCustom,
+    backgroundColorFromSkin,
+    variant,
     headline,
     headlineType,
     pretitle,
@@ -70,24 +76,33 @@ export const Default: StoryComponent<PosterCardArgs> = ({
         icon = <Circle size={40} backgroundImage={avatarImg} />;
     }
 
+    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'
+            ? {
                   backgroundVideo: BACKGROUND_VIDEO_SRC,
                   poster: BACKGROUND_VIDEO_POSTER_SRC,
+              }
+            : {
+                  ...topActionsProps,
+                  backgroundColor: backgroundColorFromSkin || backgroundColorCustom,
+                  variant,
               };
 
     const wrongBackgroundProps =
@@ -113,6 +128,7 @@ export const Default: StoryComponent<PosterCardArgs> = ({
     return (
         <Stack space={32} dataAttributes={{testid: 'poster-card'}}>
             <PosterCard
+                dataAttributes={{testid: 'main-poster-card'}}
                 {...backgroundProps}
                 icon={icon}
                 headline={headline ? <Tag type={headlineType}>{headline}</Tag> : undefined}
@@ -168,6 +184,9 @@ Default.args = {
     asset: 'none',
     headlineType: 'promo',
     background: 'image',
+    backgroundColorCustom: '',
+    backgroundColorFromSkin: '',
+    variant: 'default',
     headline: 'Priority',
     pretitle: 'Pretitle',
     title: 'Title',
@@ -179,6 +198,7 @@ Default.args = {
     height: 'auto',
     aspectRatio: 'auto',
 };
+
 Default.argTypes = {
     asset: {
         options: ['circle with icon', 'circle with image', 'none'],
@@ -189,8 +209,23 @@ Default.argTypes = {
         control: {type: 'select'},
     },
     background: {
-        options: ['image', 'video'],
+        options: ['image', 'video', 'color from skin', 'custom color'],
+        control: {type: 'select'},
+    },
+    backgroundColorCustom: {
+        control: {type: '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'},
+        // 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'],

src/__type_tests__/card-type-test.tsx

@@ -31,6 +31,11 @@ import Image from '../image';
     onPress={() => {}}
     trackingEvent={{name: 'do-something'}}
 />;
+<PosterCard title="title" isInverse />;
+<PosterCard title="title" variant="inverse" />;
+<PosterCard title="title" variant="alternative" />;
+<PosterCard title="title" isInverse backgroundColor="red" />;
+<PosterCard title="title" variant="inverse" backgroundColor="red" />;
 
 // @ts-expect-error onPress and href can't be used together
 <PosterCard title="title" onPress={() => {}} href="/" />;
@@ -42,8 +47,14 @@ import Image from '../image';
 <PosterCard title="title" trackingEvent={{name: 'do-something'}} />;
 // @ts-expect-error backgroundImage and backgroundVideo can't be used together
 <PosterCard title="title" backgroundImage="" backgroundVideo="" />;
-// @ts-expect-error backgroundImage or backgroundVideo are mandatory
+// @ts-expect-error backgroundImage and backgroundColor can't be used together
+<PosterCard title="title" backgroundImage="" backgroundColor="" />;
+// @ts-expect-error backgroundVideo and backgroundColor can't be used together
+<PosterCard title="title" backgroundVideo="" backgroundColor="" />;
+// @ts-expect-error backtroundColor, backgroundImage or backgroundVideo are mandatory
 <PosterCard title="title" />;
+// @ts-expect-error if you set a custom backgroundColor, you should specify the variant
+<PosterCard title="title" backgroundColor="red" />;
 
 (isTouchable: boolean) => <SnapCard title="title" href={isTouchable ? '/' : undefined} />;
 (isTouchable: boolean) => <SnapCard title="title" to={isTouchable ? '/' : undefined} />;

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%',

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';
@@ -1196,8 +1197,19 @@ type PosterCardWithVideoProps = Omit<PosterCardBaseProps, 'actions' | 'onClose'>
     backgroundVideoRef?: React.RefObject<VideoElement>;
 };
 
+type PosterCardWithBackgroundColorProps = PosterCardBaseProps & {
+    backgroundColor?: string;
+} & ExclusifyUnion<
+        | {
+              variant: Variant;
+          }
+        | {
+              isInverse: boolean;
+          }
+    >;
+
 type PosterCardProps = MaybeTouchableCard<
-    ExclusifyUnion<PosterCardWithImageProps | PosterCardWithVideoProps>
+    ExclusifyUnion<PosterCardWithImageProps | PosterCardWithVideoProps | PosterCardWithBackgroundColorProps>
 >;
 
 const POSTER_CARD_MIN_WIDTH = 140;
@@ -1223,6 +1235,9 @@ export const PosterCard = React.forwardRef<HTMLDivElement, PosterCardProps>(
             titleLinesMax,
             description,
             descriptionLinesMax,
+            variant,
+            isInverse,
+            backgroundColor,
             ...touchableProps
         },
         ref
@@ -1241,6 +1256,28 @@ export const PosterCard = React.forwardRef<HTMLDivElement, PosterCardProps>(
         const {textPresets} = useTheme();
 
         const isTouchable = touchableProps.href || touchableProps.to || touchableProps.onPress;
+        const normalizedVariant = variant || (isInverse ? 'inverse' : 'default');
+
+        const calcBackgroundColor = () => {
+            if (backgroundColor) {
+                return backgroundColor;
+            }
+
+            return {
+                default: vars.colors.backgroundContainer,
+                inverse: isExternalInverse
+                    ? vars.colors.backgroundContainerBrandOverInverse
+                    : vars.colors.backgroundBrand,
+                alternative: vars.colors.backgroundAlternative,
+            }[normalizedVariant];
+        };
+
+        const overlayStyle =
+            backgroundImage || backgroundVideo
+                ? styles.touchableCardOverlayMedia
+                : normalizedVariant === 'inverse'
+                ? styles.touchableCardOverlayInverse
+                : styles.touchableCardOverlay;
 
         return (
             <CardContainer
@@ -1258,13 +1295,13 @@ export const PosterCard = React.forwardRef<HTMLDivElement, PosterCardProps>(
                     className={styles.boxed}
                     width="100%"
                     minHeight="100%"
-                    isInverse
+                    isInverse={!!backgroundImage || !!backgroundVideo || normalizedVariant === 'inverse'}
                     background={
                         backgroundImage || backgroundVideo
                             ? isExternalInverse
                                 ? vars.colors.backgroundContainerBrandOverInverse
                                 : vars.colors.backgroundContainer
-                            : undefined
+                            : calcBackgroundColor()
                     }
                 >
                     <BaseTouchable
@@ -1273,7 +1310,7 @@ export const PosterCard = React.forwardRef<HTMLDivElement, PosterCardProps>(
                         className={styles.touchable}
                         aria-label={ariaLabel}
                     >
-                        {isTouchable && <div className={styles.touchableCardOverlayMedia} />}
+                        {isTouchable && <div className={overlayStyle} />}
 
                         <div className={styles.displayCardContainer}>
                             <ThemeVariant isInverse={isExternalInverse}>
@@ -1366,7 +1403,17 @@ export const PosterCard = React.forwardRef<HTMLDivElement, PosterCardProps>(
                         </div>
                     </BaseTouchable>
                 </InternalBoxed>
-                <CardActionsGroup onClose={onClose} actions={actions} type="media" />
+                <CardActionsGroup
+                    onClose={onClose}
+                    actions={actions}
+                    type={
+                        !!backgroundImage || !!backgroundVideo
+                            ? 'media'
+                            : normalizedVariant === 'inverse'
+                            ? 'inverse'
+                            : 'default'
+                    }
+                />
             </CardContainer>
         );
     }