fix(Hero): use background instead of backgroundColor to support gradi…

…ents (#1091) Issue: [Link](https://jira.tid.es/browse/WEB-1822)
Telefonica · Apr 23, 2024 · f4ba119 · f4ba119 · github-actions · Apr 23, 2024
1 parent edd7173
commit f4ba119
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 22 deletions.
diff --git a/...ots__/hero-screenshot-test-tsx-hero-background-brand-in-o-2-new-skin-1-snap.png b/...ots__/hero-screenshot-test-tsx-hero-background-brand-in-o-2-new-skin-1-snap.png
diff --git a/src/__screenshot_tests__/hero-screenshot-test.tsx b/src/__screenshot_tests__/hero-screenshot-test.tsx
@@ -47,3 +47,14 @@ test('Hero - custom height', async () => {
     const story = await screen.findByTestId('hero');
     expect(await story.screenshot()).toMatchImageSnapshot();
 });
+
+test('Hero - background brand in O2-new skin', async () => {
+    await openStoryPage({
+        id: 'components-hero--default',
+        skin: 'O2-new',
+        args: {background: 'brand'},
+    });
+
+    const story = await screen.findByTestId('hero');
+    expect(await story.screenshot()).toMatchImageSnapshot();
+});
diff --git a/src/hero.css.ts b/src/hero.css.ts
@@ -1,7 +1,8 @@
-import {createVar, fallbackVar, style} from '@vanilla-extract/css';
+import {createVar, fallbackVar, style, styleVariants} from '@vanilla-extract/css';
 import * as mq from './media-queries.css';
 import {sprinkles} from './sprinkles.css';
 import {vars as responsiveLayoutVars} from './responsive-layout.css';
+import {vars as skinVars} from './skins/skin-contract.css';
 
 const height = createVar();
 
@@ -43,11 +44,43 @@ export const layout = style({
     },
 });
 
-export const mediaContainer = style({
+export const contentContainer = style({
     '@media': {
         [mq.tabletOrSmaller]: {
             width: 'auto',
-            margin: `0 calc(-1 * ${responsiveLayoutSideMargin})`,
+            margin: `0 ${responsiveLayoutSideMargin}`,
         },
     },
 });
+
+export const expandedContent = style({
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
+});
+
+export const contentWrapper = style([
+    expandedContent,
+    {
+        width: 'auto',
+        margin: `0 calc(-1 * ${responsiveLayoutSideMargin})`,
+    },
+]);
+
+export const containerBackground = styleVariants({
+    default: {
+        background: skinVars.colors.background,
+    },
+    alternative: {
+        background: skinVars.colors.backgroundAlternative,
+    },
+    brand: {
+        background: skinVars.colors.backgroundBrand,
+    },
+    'brand-secondary': {
+        background: skinVars.colors.backgroundBrandSecondary,
+    },
+    none: {
+        background: 'transparent',
+    },
+});
diff --git a/src/hero.tsx b/src/hero.tsx
@@ -124,14 +124,6 @@ type HeroProps = {
     desktopMediaPosition?: 'left' | 'right';
 };
 
-const BACKGROUND_COLOR = {
-    default: vars.colors.background,
-    alternative: vars.colors.backgroundAlternative,
-    brand: vars.colors.backgroundBrand,
-    'brand-secondary': vars.colors.backgroundBrandSecondary,
-    none: 'transparent',
-};
-
 const Hero = React.forwardRef<HTMLDivElement, HeroProps>(
     (
         {
@@ -160,7 +152,6 @@ const Hero = React.forwardRef<HTMLDivElement, HeroProps>(
                         {...getPrefixedDataAttributes({'component-name': 'Hero', ...dataAttributes})}
                         ref={ref}
                         style={{
-                            backgroundColor: BACKGROUND_COLOR[background],
                             ...(height === '100vh' ? {maxHeight: '-webkit-fill-available'} : {}), // Hack to avoid issues in Safari with 100vh
                             ...applyCssVars({
                                 [styles.vars.height]: height ?? '100%',
@@ -171,14 +162,24 @@ const Hero = React.forwardRef<HTMLDivElement, HeroProps>(
                         })}
                     >
                         <Layout isInverse={isInverse} isInsideSlideShow={isInsideSlideShow}>
-                            <div className={styles.mediaContainer}>{media}</div>
-                            <Box
-                                paddingTop={24}
-                                paddingBottom={isInsideSlideShow ? 48 : noPaddingY ? 0 : 24}
-                                className={styles.layout}
-                            >
-                                <HeroContent {...rest} />
-                            </Box>
+                            <div className={classnames(styles.contentWrapper)}>
+                                {media}
+
+                                <div
+                                    className={classnames(
+                                        styles.containerBackground[background],
+                                        styles.expandedContent
+                                    )}
+                                >
+                                    <Box
+                                        paddingTop={24}
+                                        paddingBottom={isInsideSlideShow ? 48 : noPaddingY ? 0 : 24}
+                                        className={classnames(styles.layout, styles.contentContainer)}
+                                    >
+                                        <HeroContent {...rest} />
+                                    </Box>
+                                </div>
+                            </div>
                         </Layout>
                     </div>
                 </div>
@@ -209,13 +210,15 @@ const Hero = React.forwardRef<HTMLDivElement, HeroProps>(
                     {...getPrefixedDataAttributes({'component-name': 'Hero', ...dataAttributes})}
                     ref={ref}
                     style={{
-                        backgroundColor: BACKGROUND_COLOR[background],
                         ...(height === '100vh' ? {maxHeight: '-webkit-fill-available'} : {}), // Hack to avoid issues in Safari with 100vh
                         ...applyCssVars({
                             [styles.vars.height]: height ?? '100%',
                         }),
                     }}
-                    className={sprinkles({height: '100%'})}
+                    className={classnames(
+                        sprinkles({height: '100%'}),
+                        styles.containerBackground[background]
+                    )}
                 >
                     <Layout isInverse={isInverse}>
                         <GridLayout