feat(CoverHero): new component

playroom/snippets.tsx

@@ -3074,7 +3074,66 @@ const heroSnippets = [
               />
             ))}
           />
-
+      `,
+    },
+    {
+        group: 'Hero',
+        name: 'CoverHero',
+        code: `
+        <CoverHero
+          backgroundImage="https://images.unsplash.com/photo-1604869515882-4d10fa4b0492?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80"
+          headline={<Tag type="active">Novedad</Tag>}
+          pretitle="Conecta Max"
+          title="Vuela con la Fibra 1Gb"
+          description="Para teletrabajar, ver series y películas y además, tener varios dispositivos conectados."
+          button={<ButtonPrimary fake>Lo quiero</ButtonPrimary>}
+          extra={<Placeholder />}
+          sideExtra={<Placeholder />}
+        />
+      `,
+    },
+    {
+        group: 'Hero',
+        name: 'CoverHero (video)',
+        code: `
+        <CoverHero
+          backgroundVideo="https://fr-cert1-es.mytelco.io/2O4-xBJqiMlAfLkseq8RkXs_mv2ACV7Hnt20HqXxNl-mK7KLI3M2dAw"
+          headline={<Tag type="active">Novedad</Tag>}
+          pretitle="Conecta Max"poste
+          title="Vuela con la Fibra 1Gb"
+          description="Para teletrabajar, ver series y películas y además, tener varios dispositivos conectados."
+          button={<ButtonPrimary fake>Lo quiero</ButtonPrimary>}
+          extra={<Placeholder />}
+          sideExtra={<Placeholder />}
+        />
+      `,
+    },
+    {
+        group: 'Hero',
+        name: 'CoverHero (carousel)',
+        code: `
+        <Slideshow
+          withBullets
+          items={Array.from({ length: 3 }, (_, idx) => (
+            <CoverHero
+              backgroundImage="https://images.unsplash.com/photo-1604869515882-4d10fa4b0492?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80"
+              headline={<Tag type="active">Headline</Tag>}
+              pretitle="Pretitle"
+              title={["Title", "Title 2", "Title 3"][idx]}
+              description={
+                [
+                  "Description",
+                  "This is a long description with a long text to see how this works",
+                  "",
+                ][idx]
+              }
+              extra={<Placeholder />}
+              sideExtra={<Placeholder />}
+              button={<ButtonPrimary fake>Action</ButtonPrimary>}
+              buttonLink={<ButtonLink href="#">Link</ButtonLink>}
+            />
+          ))}
+        />
       `,
     },
 ];

src/__acceptance_tests__/__ssr_pages__/cover-hero.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import {CoverHero, Tag, ButtonPrimary, Placeholder} from '../../..';
+
+const CarouselTest = (): JSX.Element => (
+    <CoverHero
+        backgroundImage="using-vr.jpg"
+        headline={<Tag type="active">Novedad</Tag>}
+        pretitle="Conecta Max"
+        title="Vuela con la Fibra 1Gb"
+        description="Para teletrabajar, ver series y películas y además, tener varios dispositivos conectados."
+        button={<ButtonPrimary fake>Lo quiero</ButtonPrimary>}
+        extra={<Placeholder />}
+        sideExtra={<Placeholder />}
+    />
+);
+
+export default CarouselTest;

src/__acceptance_tests__/cover-hero-ssr-acceptance-test.tsx

@@ -0,0 +1,5 @@
+import {openSSRPage} from '../test-utils';
+
+test('ssr CoverHero', async () => {
+    await openSSRPage({name: 'cover-hero'});
+});

src/__screenshot_tests__/cover-hero-screenshot-test.tsx

@@ -0,0 +1,246 @@
+import {openStoryPage, screen} from '../test-utils';
+
+const cases = [
+    [
+        'desktop with background image',
+        {
+            device: 'DESKTOP',
+            args: {background: 'image'},
+        },
+    ],
+    [
+        'desktop with background video',
+        {
+            device: 'DESKTOP',
+            args: {background: 'video'},
+        },
+    ],
+    [
+        'desktop with variant inverse',
+        {
+            device: 'DESKTOP',
+            args: {background: 'color from skin', variant: 'inverse'},
+        },
+    ],
+    [
+        'desktop with variant alternative',
+        {
+            device: 'DESKTOP',
+            args: {background: 'color from skin', variant: 'alternative'},
+        },
+    ],
+    [
+        'desktop with variant default',
+        {
+            device: 'DESKTOP',
+            args: {background: 'color from skin', variant: 'default'},
+        },
+    ],
+    [
+        'desktop with extra and sideExtra',
+        {
+            device: 'DESKTOP',
+            args: {withExtra: true, withSideExtra: true},
+        },
+    ],
+    [
+        'mobile with extra and sideExtra',
+        {
+            device: 'MOBILE_IOS',
+            args: {withExtra: true, withSideExtra: true},
+        },
+    ],
+    [
+        'tablet with extra and sideExtra',
+        {
+            device: 'TABLET',
+            args: {withExtra: true, withSideExtra: true},
+        },
+    ],
+    [
+        'desktop centered',
+        {
+            device: 'DESKTOP',
+            args: {centered: true, actions: 'button secondaryButton and link'},
+        },
+    ],
+    [
+        'mobile centered',
+        {
+            device: 'MOBILE_IOS',
+            args: {centered: true, actions: 'button secondaryButton and link'},
+        },
+    ],
+    [
+        'desktop centered with extra and sideExtra',
+        {
+            device: 'DESKTOP',
+            args: {
+                centered: true,
+                withExtra: true,
+                withSideExtra: true,
+                actions: 'button secondaryButton and link',
+            },
+        },
+    ],
+    [
+        'mobile centered with extra and sideExtra',
+        {
+            device: 'MOBILE_IOS',
+            args: {
+                centered: true,
+                withExtra: true,
+                withSideExtra: true,
+                actions: 'button secondaryButton and link',
+            },
+        },
+    ],
+    [
+        'desktop one button',
+        {
+            device: 'DESKTOP',
+            args: {actions: 'button'},
+        },
+    ],
+    [
+        'desktop one link',
+        {
+            device: 'DESKTOP',
+            args: {actions: 'link'},
+        },
+    ],
+    [
+        'desktop two buttons',
+        {
+            device: 'DESKTOP',
+            args: {actions: 'button and secondaryButton'},
+        },
+    ],
+    [
+        'desktop two buttons and link',
+        {
+            device: 'DESKTOP',
+            args: {actions: 'button secondaryButton and link'},
+        },
+    ],
+    [
+        'desktop long text',
+        {
+            device: 'DESKTOP',
+            args: {
+                title: 'Long title '.repeat(10),
+                description: 'This is a long description with a long text to see how this works'.repeat(10),
+            },
+        },
+    ],
+    [
+        'desktop long text with sideExtra',
+        {
+            device: 'DESKTOP',
+            args: {
+                title: 'Long title '.repeat(10),
+                description: 'This is a long description with a long text to see how this works'.repeat(10),
+                withSideExtra: true,
+            },
+        },
+    ],
+    [
+        'desktop long text centered',
+        {
+            device: 'DESKTOP',
+            args: {
+                title: 'Long title '.repeat(10),
+                centered: true,
+                description: 'This is a long description with a long text to see how this works'.repeat(10),
+            },
+        },
+    ],
+    [
+        'mobile long text',
+        {
+            device: 'MOBILE_IOS',
+            args: {
+                title: 'Long title '.repeat(10),
+                description: 'This is a long description with a long text to see how this works'.repeat(10),
+            },
+        },
+    ],
+    [
+        'desktop 16:9 aspect ratio',
+        {
+            device: 'DESKTOP',
+            args: {
+                aspectRatio: '16 9',
+            },
+        },
+    ],
+    [
+        'mobile 7:10 aspect ratio',
+        {
+            device: 'MOBILE_IOS',
+            args: {
+                aspectRatio: '7 10',
+            },
+        },
+    ],
+    [
+        'mobile minHeight 100vh',
+        {
+            device: 'MOBILE_IOS',
+            args: {
+                minHeight: '100vh',
+            },
+        },
+    ],
+    [
+        'desktop minimal',
+        {
+            device: 'DESKTOP',
+            args: {
+                headline: '',
+                pretitle: '',
+                title: 'Title',
+                description: '',
+                actions: 'none',
+            },
+        },
+    ],
+    [
+        'mobile minimal',
+        {
+            device: 'MOBILE_IOS',
+            args: {
+                headline: '',
+                pretitle: '',
+                title: 'Title',
+                description: '',
+                actions: 'none',
+            },
+        },
+    ],
+] as const;
+
+test.each(cases)('CoverHero %s', async (_name, {device, args}) => {
+    await openStoryPage({
+        id: 'components-hero-coverhero--default',
+        device,
+        args,
+    });
+
+    const coverHero = await screen.findByTestId('cover-hero');
+    const image = await coverHero.screenshot();
+    expect(image).toMatchImageSnapshot();
+});
+
+test('CoverHero inside a Slideshow', async () => {
+    await openStoryPage({
+        id: 'components-hero-coverhero--cover-hero-in-slideshow',
+        args: {
+            background: 'image',
+        },
+    });
+
+    const coverHero = await screen.findByTestId('slideshow');
+    const image = await coverHero.screenshot();
+    expect(image).toMatchImageSnapshot();
+});

src/__screenshot_tests__/hero-screenshot-test.tsx

@@ -17,7 +17,7 @@ const getCases = () => {
 
 test.each(getCases())('Hero - %s (%s)', async (background, device) => {
     await openStoryPage({
-        id: 'components-hero--default',
+        id: 'components-hero-hero--default',
         device: device as Device,
         args: {background},
     });
@@ -28,7 +28,7 @@ test.each(getCases())('Hero - %s (%s)', async (background, device) => {
 
 test.each(DEVICES)('Hero - no vertical padding (%s)', async (device) => {
     await openStoryPage({
-        id: 'components-hero--default',
+        id: 'components-hero-hero--default',
         device,
         args: {noPaddingY: true},
     });
@@ -39,7 +39,7 @@ test.each(DEVICES)('Hero - no vertical padding (%s)', async (device) => {
 
 test('Hero - custom height', async () => {
     await openStoryPage({
-        id: 'components-hero--default',
+        id: 'components-hero-hero--default',
         device: 'MOBILE_IOS',
         args: {height: '1000px'},
     });
@@ -50,7 +50,7 @@ test('Hero - custom height', async () => {
 
 test('Hero - background brand in O2-new skin', async () => {
     await openStoryPage({
-        id: 'components-hero--default',
+        id: 'components-hero-hero--default',
         skin: 'O2-new',
         args: {background: 'brand'},
     });