feat(CoverHero): new component

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

@@ -0,0 +1,197 @@
+import {openStoryPage} 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},
+        },
+    ],
+    [
+        'mobile centered',
+        {
+            device: 'MOBILE_IOS',
+            args: {centered: true},
+        },
+    ],
+    [
+        'desktop centered with extra and sideExtra',
+        {
+            device: 'DESKTOP',
+            args: {centered: true, withExtra: true, withSideExtra: true},
+        },
+    ],
+    [
+        'mobile centered with extra and sideExtra',
+        {
+            device: 'MOBILE_IOS',
+            args: {centered: true, withExtra: true, withSideExtra: true},
+        },
+    ],
+    [
+        'desktop one button',
+        {
+            device: 'DESKTOP',
+            args: {actions: 'button'},
+        },
+    ],
+    [
+        'desktop one link',
+        {
+            device: 'DESKTOP',
+            args: {actions: '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,
+            },
+        },
+    ],
+    [
+        '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: 'button',
+            },
+        },
+    ],
+    [
+        'mobile minimal',
+        {
+            device: 'MOBILE_IOS',
+            args: {
+                headline: '',
+                pretitle: '',
+                title: 'Title',
+                description: '',
+                actions: 'button',
+            },
+        },
+    ],
+] as const;
+
+test.each(cases)('CoverHero %s', async (_name, {device, args}) => {
+    const page = await openStoryPage({
+        id: 'components-hero-coverhero--default',
+        device,
+        args,
+    });
+
+    const image = await page.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'},
     });

src/__stories__/cover-hero-story.tsx

@@ -0,0 +1,160 @@
+import * as React from 'react';
+import {CoverHero, ButtonPrimary, ButtonLink, Tag, Placeholder, skinVars} from '..';
+import usingVrImg from './images/using-vr.jpg';
+import beachImg from './images/beach.jpg';
+import beachVideo from './videos/beach.mp4';
+
+import type {TagType} from '..';
+
+export default {
+    title: 'Components/Hero/CoverHero',
+    parameters: {
+        fullScreen: true,
+    },
+};
+
+type Args = {
+    background: 'image' | 'video' | 'custom color' | 'color from skin';
+    backgroundColorCustom: string;
+    backgroundColorFromSkin: string;
+    variant: 'default' | 'inverse' | 'alternative';
+    headlineType: TagType;
+    headline: string;
+    pretitle: string;
+    title: string;
+    description: string;
+    withExtra: boolean;
+    withSideExtra: boolean;
+    actions: 'button' | 'link' | 'button and link';
+    minHeight: string | undefined;
+    aspectRatio: '1:1' | '16:9' | '7:10' | '4:3' | 'auto';
+    centered: boolean;
+    noPaddingY: boolean;
+};
+
+export const Default: StoryComponent<Args> = ({
+    background,
+    backgroundColorCustom,
+    backgroundColorFromSkin,
+    variant,
+    headlineType,
+    headline,
+    pretitle,
+    title,
+    description,
+    withExtra,
+    withSideExtra,
+    actions,
+    minHeight,
+    aspectRatio,
+    centered,
+    noPaddingY,
+}) => {
+    const backgroundProps =
+        background === 'image'
+            ? {
+                  backgroundImage: usingVrImg,
+              }
+            : background === 'video'
+            ? {
+                  backgroundVideo: beachVideo,
+                  poster: beachImg,
+              }
+            : {
+                  backgroundColor: backgroundColorFromSkin || backgroundColorCustom,
+                  variant,
+              };
+
+    const button = actions.includes('button') ? <ButtonPrimary fake>Action</ButtonPrimary> : undefined;
+    const buttonLink = actions.includes('link') ? <ButtonLink href="#">Link</ButtonLink> : undefined;
+
+    return (
+        <CoverHero
+            headline={headline ? <Tag type={headlineType}>{headline}</Tag> : undefined}
+            pretitle={pretitle}
+            title={title}
+            description={description}
+            extra={withExtra ? <Placeholder /> : undefined}
+            sideExtra={withSideExtra ? <Placeholder /> : undefined}
+            button={button}
+            buttonLink={buttonLink}
+            minHeight={minHeight}
+            aspectRatio={aspectRatio}
+            centered={centered}
+            noPaddingY={noPaddingY}
+            {...backgroundProps}
+        />
+    );
+};
+
+Default.storyName = 'CoverHero';
+
+Default.args = {
+    background: 'image',
+    backgroundColorCustom: '',
+    backgroundColorFromSkin: '',
+    variant: 'default',
+    headlineType: 'promo',
+    headline: 'Hero',
+    pretitle: 'Pretitle',
+    title: 'Title',
+    description: 'This is a long description with a long text to see how this works',
+    withExtra: false,
+    withSideExtra: false,
+    actions: 'button and link',
+    minHeight: undefined,
+    aspectRatio: 'auto',
+    centered: false,
+    noPaddingY: false,
+};
+
+Default.argTypes = {
+    headlineType: {
+        options: ['promo', 'active', 'inactive', 'success', 'warning', 'error'],
+        control: {type: 'select'},
+    },
+    background: {
+        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'},
+    },
+    actions: {
+        options: ['button', 'link', 'button and link'],
+        control: {type: 'select'},
+    },
+    minHeight: {
+        control: {type: 'text'},
+    },
+    aspectRatio: {
+        options: ['1 1', '16 9', '7 10', '4 3', 'auto'],
+        mapping: {
+            '1 1': '1:1',
+            '16 9': '16:9',
+            '7 10': '7:10',
+            '4 3': '4:3',
+        },
+        control: {
+            type: 'select',
+            labels: {
+                '1 1': '1:1',
+                '16 9': '16:9',
+                '7 10': '7:10',
+                '4 3': '4:3',
+            },
+        },
+    },
+};