feat(Nakedcard): new component

playroom/snippets.tsx

@@ -794,6 +794,59 @@ const cardSnippets: Array<Snippet> = [
           }
         />`,
     },
+
+    {
+        group: 'Cards',
+        name: 'NakedCard with Image',
+        code: `
+        <NakedCard
+            media={<Image src="https://picsum.photos/1200/1200" aspectRatio="16:9"/>}
+            headline={<Tag type="promo">Headline</Tag>}
+            pretitle="Pretitle"
+            title="Title"
+            subtitle="Subtitle"
+            description="Description"
+            extra={<Placeholder />}
+            button={
+                <ButtonPrimary small onPress={() => {}}>
+                    Action
+                </ButtonPrimary>
+            }
+            buttonLink={<ButtonLink onPress={() => {}}>Link</ButtonLink>}
+        />`,
+    },
+    {
+        group: 'Cards',
+        name: 'NakedCard with Video',
+        code: `
+        <NakedCard
+            media={<Video src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" aspectRatio="16:9" />}
+            headline={<Tag color={colors.promo}>headline</Tag>}
+            pretitle="Pretitle"
+            title="Title"
+            subtitle="Subtitle"
+            description="Description"
+            extra={<Placeholder />}
+            button={
+                <ButtonPrimary small onPress={() => {}}>
+                    Action
+                </ButtonPrimary>
+            }
+            buttonLink={<ButtonLink onPress={() => {}}>Link</ButtonLink>}
+        />`,
+    },
+
+    {
+        group: 'Cards',
+        name: 'SmallNakedCard',
+        code: `
+        <SmallNakedCard
+            media={<Image src="https://picsum.photos/1200/1200" aspectRatio="16:9"/>}
+            title="Title"
+            subtitle="Subtitle"
+            description="Description"
+        />`,
+    },
 ];
 
 const titlesSnippets: Array<Snippet> = [
@@ -1984,6 +2037,11 @@ export default [
         name: 'Image',
         code: `<Image src="https://picsum.photos/1200/1200" aspectRatio="16:9" />`,
     },
+    {
+        group: 'Media',
+        name: 'Image circular',
+        code: `<Image circular src="https://picsum.photos/1200/1200" />`,
+    },
     ...carouselSnippets,
     ...avatarSnippets,
     ...alertSnippets,

src/__screenshot_tests__/naked-card-screenshot-test.tsx

@@ -0,0 +1,161 @@
+import {openStoryPage, screen, setRootFontSize} from '../test-utils';
+
+import type {Device} from '../test-utils';
+
+const TESTABLE_DEVICES: Array<Device> = ['MOBILE_IOS', 'DESKTOP'];
+
+test.each(TESTABLE_DEVICES)('NakedCard in %s', async (device) => {
+    await openStoryPage({
+        id: 'components-cards-nakedcard--default',
+        device,
+    });
+
+    const nakedCard = await screen.findByTestId('naked-card');
+    const image = await nakedCard.screenshot({captureBeyondViewport: true});
+
+    expect(image).toMatchImageSnapshot();
+});
+
+test.each(TESTABLE_DEVICES)('NakedCard with large fontSize in %s', async (device) => {
+    await openStoryPage({
+        id: 'components-cards-nakedcard--default',
+        device,
+    });
+
+    await setRootFontSize(32);
+
+    const nakedCard = await screen.findByTestId('naked-card');
+    const image = await nakedCard.screenshot({captureBeyondViewport: true});
+
+    expect(image).toMatchImageSnapshot();
+});
+
+test('NakedCard group', async () => {
+    const page = await openStoryPage({
+        id: 'components-cards-nakedcard--group',
+    });
+
+    const image = await page.screenshot({fullPage: true});
+
+    expect(image).toMatchImageSnapshot();
+});
+
+test('NakedCard with extra ', async () => {
+    await openStoryPage({
+        id: 'components-cards-nakedcard--default',
+        device: 'MOBILE_IOS',
+        args: {
+            withExtra: true,
+            actions: 'button and link',
+        },
+    });
+
+    const nakedCard = await screen.findByTestId('naked-card');
+    const image = await nakedCard.screenshot({captureBeyondViewport: true});
+
+    expect(image).toMatchImageSnapshot();
+});
+
+test('NakedCard with circular image ', async () => {
+    await openStoryPage({
+        id: 'components-cards-nakedcard--default',
+        device: 'MOBILE_IOS',
+        args: {
+            media: 'circular image',
+        },
+    });
+
+    const nakedCard = await screen.findByTestId('naked-card');
+    const image = await nakedCard.screenshot({captureBeyondViewport: true});
+
+    expect(image).toMatchImageSnapshot();
+});
+
+test('NakedCard closeable', async () => {
+    await openStoryPage({
+        id: 'components-cards-nakedcard--default',
+        device: 'MOBILE_IOS',
+        args: {
+            actions: 'button and link',
+            closable: true,
+        },
+    });
+
+    const nakedCard = await screen.findByTestId('naked-card');
+    const image = await nakedCard.screenshot({captureBeyondViewport: true});
+
+    expect(image).toMatchImageSnapshot();
+});
+
+test('NakedCard with top actions', async () => {
+    await openStoryPage({
+        id: 'components-cards-nakedcard--default',
+        device: 'MOBILE_IOS',
+        args: {
+            actions: 'button and link',
+            withTopAction: true,
+        },
+    });
+
+    const nakedCard = await screen.findByTestId('naked-card');
+    const image = await nakedCard.screenshot({captureBeyondViewport: true});
+
+    expect(image).toMatchImageSnapshot();
+});
+
+test.each(TESTABLE_DEVICES)('SmallNakedCard in %s', async (device) => {
+    await openStoryPage({
+        id: 'components-cards-nakedcard--small',
+        device,
+    });
+
+    const smallNakedCard = await screen.findByTestId('small-naked-card');
+    const image = await smallNakedCard.screenshot({captureBeyondViewport: true});
+
+    expect(image).toMatchImageSnapshot();
+});
+
+test.each(TESTABLE_DEVICES)('SmallNakedCard with large fontSize in %s', async (device) => {
+    await openStoryPage({
+        id: 'components-cards-nakedcard--small',
+        device,
+    });
+
+    await setRootFontSize(32);
+
+    const smallNakedCard = await screen.findByTestId('small-naked-card');
+    const image = await smallNakedCard.screenshot({captureBeyondViewport: true});
+
+    expect(image).toMatchImageSnapshot();
+});
+
+test('SmallNakedCard with extra ', async () => {
+    await openStoryPage({
+        id: 'components-cards-nakedcard--small',
+        device: 'MOBILE_IOS',
+        args: {
+            withExtra: true,
+            actions: 'button and link',
+        },
+    });
+
+    const smallNakedCard = await screen.findByTestId('small-naked-card');
+    const image = await smallNakedCard.screenshot({captureBeyondViewport: true});
+
+    expect(image).toMatchImageSnapshot();
+});
+
+test('SmallNakedCard with circular image ', async () => {
+    await openStoryPage({
+        id: 'components-cards-nakedcard--small',
+        device: 'MOBILE_IOS',
+        args: {
+            media: 'circular image',
+        },
+    });
+
+    const smallNakedCard = await screen.findByTestId('small-naked-card');
+    const image = await smallNakedCard.screenshot({captureBeyondViewport: true});
+
+    expect(image).toMatchImageSnapshot();
+});