PosterCard-background

playroom/snippets.tsx

@@ -764,6 +764,7 @@ const cardSnippets: Array<Snippet> = [
           headline={<Tag type="promo">Headline</Tag>}
           pretitle="Pretitle"
           title="Title"
+          isInverse={true}
           description="Description"
           backgroundImage="https://source.unsplash.com/900x900/?landscape"
           onClose={() => {}}
@@ -785,6 +786,7 @@ const cardSnippets: Array<Snippet> = [
           headline={<Tag type="promo">Headline</Tag>}
           pretitle="Pretitle"
           title="Title"
+          isInverse={true}
           description="Description"
           backgroundVideo="https://fr-cert1-es.mytelco.io/2O4-xBJqiMlAfLkseq8RkXs_mv2ACV7Hnt20HqXxNl-mK7KLI3M2dAw"
           poster="https://source.unsplash.com/900x900/?landscape"
@@ -797,6 +799,27 @@ const cardSnippets: Array<Snippet> = [
         />`,
     },
 
+    {
+        group: 'Cards',
+        name: 'PosterCard background color',
+        code: `
+      <PosterCard
+        headline={<Tag type="promo">Headline</Tag>}
+        pretitle="Pretitle"
+        title="Title"
+        isInverse={true}
+        description="Description"
+        backgroundColor={colors.backgroundBrandSecondary}
+        poster="https://source.unsplash.com/900x900/?landscape"
+        onPress={() => {alert({ title: "pressed" });}}
+        button={
+          <ButtonPrimary small href="https://google.com">
+            Action
+          </ButtonPrimary>
+        }
+      />`,
+    },
+
     {
         group: 'Cards',
         name: 'NakedCard with Image',

src/__stories__/poster-card-story.tsx

@@ -41,6 +41,8 @@ type PosterCardArgs = {
     withTopAction: boolean;
     width: string;
     height: string;
+    inverse: boolean;
+    backgroundColor?: string;
     aspectRatio: '1:1' | '16:9' | '7:10' | '9:10' | 'auto';
 };
 
@@ -58,6 +60,8 @@ export const Default: StoryComponent<PosterCardArgs> = ({
     width,
     height,
     aspectRatio,
+    backgroundColor,
+    inverse,
 }) => {
     let icon;
     if (asset === 'circle with icon') {
@@ -110,6 +114,20 @@ export const Default: StoryComponent<PosterCardArgs> = ({
                   poster: 'test',
               };
 
+    const backgroundColorProps = {
+        onClose: closable ? () => {} : undefined,
+        actions: withTopAction
+            ? [
+                  {
+                      Icon: IconLightningRegular,
+                      onPress: () => {},
+                      label: 'Lightning',
+                  },
+              ]
+            : undefined,
+        backgroundColor: 'test',
+    };
+
     return (
         <Stack space={32} dataAttributes={{testid: 'poster-card'}}>
             <PosterCard
@@ -123,6 +141,7 @@ export const Default: StoryComponent<PosterCardArgs> = ({
                 width={width}
                 height={height}
                 aspectRatio={aspectRatio}
+                isInverse={inverse}
                 onPress={onPress ? () => null : undefined}
             />
 
@@ -138,6 +157,7 @@ export const Default: StoryComponent<PosterCardArgs> = ({
                 width={width}
                 height={height}
                 aspectRatio={aspectRatio}
+                isInverse={inverse}
                 onPress={onPress ? () => null : undefined}
             />
 
@@ -155,10 +175,28 @@ export const Default: StoryComponent<PosterCardArgs> = ({
                         width={width}
                         height={height}
                         aspectRatio={aspectRatio}
+                        isInverse={inverse}
                         onPress={onPress ? () => null : undefined}
                     />
                 </Box>
             </ResponsiveLayout>
+
+            <Title1>NO MEDIA</Title1>
+            <PosterCard
+                {...backgroundColorProps}
+                icon={icon}
+                headline={headline ? <Tag type={headlineType}>{headline}</Tag> : undefined}
+                pretitle={pretitle}
+                title={title}
+                description={description}
+                aria-label="Poster card fallback inverse label"
+                width={width}
+                height={height}
+                aspectRatio={aspectRatio}
+                isInverse={inverse}
+                onPress={onPress ? () => null : undefined}
+                backgroundColor={backgroundColor}
+            />
         </Stack>
     );
 };
@@ -168,6 +206,7 @@ Default.args = {
     asset: 'none',
     headlineType: 'promo',
     background: 'image',
+    backgroundColor: 'backgroundContainerBrand',
     headline: 'Priority',
     pretitle: 'Pretitle',
     title: 'Title',
@@ -178,6 +217,7 @@ Default.args = {
     width: 'auto',
     height: 'auto',
     aspectRatio: 'auto',
+    inverse: true,
 };
 Default.argTypes = {
     asset: {
@@ -196,6 +236,10 @@ Default.argTypes = {
         options: ['1:1', '16:9', '7:10', '9:10', 'auto'],
         control: {type: 'select'},
     },
+    backgroundColor: {
+        mapping: skinVars.colors,
+        control: {type: 'text'},
+    },
 };
 
 export const Group: StoryComponent = () => {

src/__type_tests__/card-type-test.tsx

@@ -42,7 +42,6 @@ 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
 <PosterCard title="title" />;
 
 (isTouchable: boolean) => <SnapCard title="title" href={isTouchable ? '/' : undefined} />;

src/card.tsx

@@ -1184,14 +1184,16 @@ interface PosterCardBaseProps {
     titleLinesMax?: number;
     description?: string;
     descriptionLinesMax?: number;
+    isInverse?: boolean;
+    backgroundColor?: string;
 }
 
 interface PosterCardWithImageProps extends PosterCardBaseProps {
-    backgroundImage: string;
+    backgroundImage?: string;
 }
 
 type PosterCardWithVideoProps = Omit<PosterCardBaseProps, 'actions' | 'onClose'> & {
-    backgroundVideo: VideoSource;
+    backgroundVideo?: VideoSource;
     poster?: string;
     backgroundVideoRef?: React.RefObject<VideoElement>;
 };
@@ -1223,6 +1225,8 @@ export const PosterCard = React.forwardRef<HTMLDivElement, PosterCardProps>(
             titleLinesMax,
             description,
             descriptionLinesMax,
+            isInverse = true,
+            backgroundColor,
             ...touchableProps
         },
         ref
@@ -1258,7 +1262,7 @@ export const PosterCard = React.forwardRef<HTMLDivElement, PosterCardProps>(
                     className={styles.boxed}
                     width="100%"
                     minHeight="100%"
-                    isInverse
+                    isInverse={isInverse}
                     background={
                         backgroundImage || backgroundVideo
                             ? isExternalInverse
@@ -1275,7 +1279,10 @@ export const PosterCard = React.forwardRef<HTMLDivElement, PosterCardProps>(
                     >
                         {isTouchable && <div className={styles.touchableCardOverlayMedia} />}
 
-                        <div className={styles.displayCardContainer}>
+                        <div
+                            className={styles.displayCardContainer}
+                            style={backgroundColor ? {background: backgroundColor} : undefined}
+                        >
                             <ThemeVariant isInverse={isExternalInverse}>
                                 <div className={styles.displayCardBackground}>
                                     {backgroundVideo ? video : backgroundImage ? image : undefined}