fix: storybook and test for row block

Telefonica · Jul 7, 2023 · 7f2c4c9 · 7f2c4c9
1 parent ec64bb1
commit 7f2c4c9
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 24 deletions.
diff --git a/...ts__/__image_snapshots__/blocks-screenshot-test-tsx-blocks-row-block-1-snap.png b/...ts__/__image_snapshots__/blocks-screenshot-test-tsx-blocks-row-block-1-snap.png
diff --git a/...ts__/__image_snapshots__/blocks-screenshot-test-tsx-blocks-row-block-2-snap.png b/...ts__/__image_snapshots__/blocks-screenshot-test-tsx-blocks-row-block-2-snap.png
diff --git a/src/community/__screenshot_tests__/blocks-screenshot-test.tsx b/src/community/__screenshot_tests__/blocks-screenshot-test.tsx
@@ -37,14 +37,10 @@ test.each`
     expect(image).toMatchImageSnapshot();
 });
 
-test.each`
-    stackingGroup
-    ${false}      | ${true}
-`('Blocks Row Block', async ({stackingGroup}) => {
+test('Blocks Row Block', async () => {
     await openStoryPage({
         id: 'community-blocks--block-row',
         device: 'MOBILE_IOS',
-        args: {stackingGroup},
     });
 
     const stepper = await screen.findByTestId('row-block');

diff --git a/src/community/__stories__/blocks-story.tsx b/src/community/__stories__/blocks-story.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {Avatar, Image, Box, ResponsiveLayout, StackingGroup, Tag} from '../..';
+import {Avatar, Image, Box, ResponsiveLayout, StackingGroup, Tag, Stack} from '../..';
 import {
     HighlightedValueBlock,
     InformationBlock,
@@ -28,23 +28,29 @@ type RowBlockArgs = {
 export const BlockRow: StoryComponent<RowBlockArgs> = ({title, description, stackingGroup}) => {
     return (
         <ResponsiveLayout>
-            <Box paddingY={24} dataAttributes={{testid: 'row-block'}}>
-                <RowBlock
-                    title={title}
-                    description={description}
-                    stackingGroup={
-                        stackingGroup ? (
-                            <StackingGroup stacked maxItems={3} moreItemsStyle={{type: 'circle', size: 40}}>
-                                <Avatar size={40} src={imgExample} />
-                                <Avatar size={40} src={imgExample} />
-                                <Avatar size={40} src={imgExample} />
-                                <Avatar size={40} src={imgExample} />
-                                <Avatar size={40} src={imgExample} />
-                                <Avatar size={40} src={imgExample} />
-                            </StackingGroup>
-                        ) : undefined
-                    }
-                />
+            <Box paddingY={24}>
+                <Stack space={24} dataAttributes={{testid: 'row-block'}}>
+                    <RowBlock
+                        title={title}
+                        stackingGroup={
+                            stackingGroup ? (
+                                <StackingGroup
+                                    stacked
+                                    maxItems={3}
+                                    moreItemsStyle={{type: 'circle', size: 40}}
+                                >
+                                    <Avatar size={40} src={imgExample} />
+                                    <Avatar size={40} src={imgExample} />
+                                    <Avatar size={40} src={imgExample} />
+                                    <Avatar size={40} src={imgExample} />
+                                    <Avatar size={40} src={imgExample} />
+                                    <Avatar size={40} src={imgExample} />
+                                </StackingGroup>
+                            ) : undefined
+                        }
+                    />
+                    <RowBlock title={title} description={description} />
+                </Stack>
             </Box>
         </ResponsiveLayout>
     );
@@ -54,7 +60,7 @@ BlockRow.storyName = 'RowBlock';
 BlockRow.args = {
     title: 'title',
     description: 'description',
-    stackingGroup: false,
+    stackingGroup: true,
 };
 
 type SimpleBlockArgs = {