Merge branch 'master' into atoledano-poster-card-background

playroom/components/index.tsx

@@ -171,7 +171,7 @@ const PreviewToolsControls: React.FC<PreviewToolsControlsProps> = ({
         );
     } else {
         return (
-            <div className={`${styles.controls} ${styles.desktopControls}`}>
+            <div className={styles.controls}>
                 <div className={styles.tabs}>
                     <Tabs
                         tabs={Object.values(themesMap).map(({icon}) => ({text: '', icon}))}
@@ -338,7 +338,7 @@ export const PreviewTools = ({
         return (
             <>
                 {controls}
-                <div style={{height: 56}} />
+                <div className={styles.controlsHeight} />
                 {children}
             </>
         );

playroom/preview-tools.css.ts

@@ -2,6 +2,15 @@ import {globalStyle, style} from '@vanilla-extract/css';
 import {mq, skinVars} from '../src';
 import {sprinkles} from '../src/sprinkles.css';
 
+export const controlsHeight = style({
+    height: 57,
+    '@media': {
+        [mq.desktopOrBigger]: {
+            height: 59,
+        },
+    },
+});
+
 export const controls = style([
     sprinkles({
         position: 'fixed',
@@ -15,19 +24,15 @@ export const controls = style([
         gap: 16,
         zIndex: 2,
         background: 'white',
+        borderBottom: `1px solid ${skinVars.colors.divider}`,
     },
+    controlsHeight,
 ]);
 
 globalStyle(`${controls} *`, {outline: 'none'});
 
 export const flexSpacer = sprinkles({flex: 1});
 
-export const desktopControls = style({
-    borderBottom: `1px solid ${skinVars.colors.divider}`,
-    height: 57,
-    paddingRight: 16,
-});
-
 export const tabs = style({
     flexBasis: '73%',
     whiteSpace: 'nowrap',

src/__screenshot_tests__/divider-screenshot-test.tsx

@@ -7,3 +7,11 @@ test('Divider', async () => {
 
     expect(await story.screenshot()).toMatchImageSnapshot();
 });
+
+test('Divider - inverse', async () => {
+    await openStoryPage({id: 'components-divider--default', args: {inverse: true}});
+
+    const story = await screen.findByTestId('divider-story');
+
+    expect(await story.screenshot()).toMatchImageSnapshot();
+});

src/__screenshot_tests__/header-screenshot-test.tsx

@@ -5,25 +5,22 @@ import type {Device} from '../test-utils';
 const DEVICES: Array<Device> = ['MOBILE_IOS', 'DESKTOP'];
 
 test.each`
-    device          | isInverse
+    device          | inverse
     ${'MOBILE_IOS'} | ${true}
     ${'MOBILE_IOS'} | ${false}
     ${'DESKTOP'}    | ${true}
     ${'DESKTOP'}    | ${false}
-`(
-    'Header in $device isInverse=$isInverse',
-    async ({device, isInverse}: {device: Device; isInverse: boolean}) => {
-        await openStoryPage({
-            id: 'components-headers-header--default',
-            device,
-            args: {isInverse},
-        });
+`('Header in $device inverse=$inverse', async ({device, inverse}: {device: Device; inverse: boolean}) => {
+    await openStoryPage({
+        id: 'components-headers-header--default',
+        device,
+        args: {inverse},
+    });
 
-        const story = await screen.findByTestId('header-layout');
-        const image = await story.screenshot();
-        expect(image).toMatchImageSnapshot();
-    }
-);
+    const story = await screen.findByTestId('header-layout');
+    const image = await story.screenshot();
+    expect(image).toMatchImageSnapshot();
+});
 
 test('Header vertical extra in desktop', async () => {
     await openStoryPage({
@@ -99,8 +96,12 @@ test.each(DEVICES)('Header with large text', async (device) => {
 
 test('Header with truncation and color overrides', async () => {
     await openStoryPage({
-        id: 'components-headers-header--rich-texts',
+        id: 'components-headers-header--default',
         device: 'MOBILE_IOS',
+        args: {
+            pretitle: Array(20).fill('more text').join(' - '),
+            truncatePretitle: true,
+        },
     });
 
     const story = await screen.findByTestId('header-layout');

src/__screenshot_tests__/hero-screenshot-test.tsx

@@ -1,109 +1,27 @@
 import {openStoryPage, screen} from '../test-utils';
 
-test('Hero (default)', async () => {
+import type {Device} from '../test-utils';
+
+const DEVICES = ['MOBILE_IOS', 'DESKTOP'];
+const BACKGROUND = ['default', 'brand'];
+
+const getCases = () => {
+    const cases = [];
+    for (const background of BACKGROUND) {
+        for (const device of DEVICES) {
+            cases.push([background, device]);
+        }
+    }
+    return cases;
+};
+
+test.each(getCases())('Hero - %s (%s)', async (background, device) => {
     await openStoryPage({
-        id: 'components-hero-component--default',
-        device: 'MOBILE_IOS',
-        args: {
-            media: 'image',
-            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,
-            actions: 'button and link',
-            background: 'default',
-            height: '100vh',
-            aspectRatio: '16:9',
-        },
+        id: 'components-hero--default',
+        device: device as Device,
+        args: {background},
     });
 
-    const heroDefault = await screen.findByTestId('hero');
-    expect(await heroDefault.screenshot()).toMatchImageSnapshot();
-
-    await openStoryPage({
-        id: 'components-hero-component--default',
-        device: 'MOBILE_IOS',
-        args: {
-            media: 'image',
-            headlineType: 'promo',
-            headline: 'Hero',
-            pretitle: 'Pretitle',
-            title: 'Title',
-            withExtra: true,
-            actions: 'button and link',
-            background: 'brand',
-            height: '100vh',
-            aspectRatio: '16:9',
-        },
-    });
-
-    const heroBrand = await screen.findByTestId('hero');
-    expect(await heroBrand.screenshot()).toMatchImageSnapshot();
-});
-
-test('Hero desktop', async () => {
-    await openStoryPage({
-        id: 'components-hero-component--default',
-        device: 'DESKTOP',
-        args: {
-            media: 'image',
-            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,
-            actions: 'button and link',
-            background: 'default',
-            height: '100vh',
-            aspectRatio: '16:9',
-            desktopMediaPosition: 'left',
-        },
-    });
-
-    const heroDefault = await screen.findByTestId('hero');
-    expect(await heroDefault.screenshot()).toMatchImageSnapshot();
-
-    await openStoryPage({
-        id: 'components-hero-component--default',
-        device: 'DESKTOP',
-        args: {
-            media: 'image',
-            headlineType: 'promo',
-            headline: 'Hero',
-            pretitle: 'Pretitle',
-            title: 'Title',
-            withExtra: true,
-            actions: 'button and link',
-            background: 'brand',
-            height: '100vh',
-            aspectRatio: '16:9',
-            desktopMediaPosition: 'right',
-        },
-    });
-
-    const heroBrand = await screen.findByTestId('hero');
-    expect(await heroBrand.screenshot()).toMatchImageSnapshot();
-});
-
-test('Hero slideshow (mobile)', async () => {
-    await openStoryPage({
-        id: 'components-hero-slideshow--default',
-        device: 'MOBILE_IOS',
-    });
-
-    const slideshowMobile = await screen.findByTestId('hero');
-    expect(await slideshowMobile.screenshot()).toMatchImageSnapshot();
-});
-
-test('Hero slideshow (desktop)', async () => {
-    await openStoryPage({
-        id: 'components-hero-slideshow--default',
-        device: 'DESKTOP',
-    });
-
-    const slideshowDesktop = await screen.findByTestId('hero');
-    expect(await slideshowDesktop.screenshot()).toMatchImageSnapshot();
+    const story = await screen.findByTestId('hero');
+    expect(await story.screenshot()).toMatchImageSnapshot();
 });