chore(FullWidthBackground): update story (#1320)

* chore(FullWidthBackground): update story

* chore: delete argTypes from story

---------

Co-authored-by: Anastasiia Kurochkina

Author: KurochkinaAnastasia

src/components/FullWidthBackground/__snapshots__/FullWidthBackground.visual.test.tsx-snapshots/FullWidthBackground-default-light-chromium-linux.png

@@ -5,18 +5,40 @@ import FullWidthBackground, {FullWidthBackgroundProps} from '../FullWidthBackgro
 import data from './data.json';
 
 export default {
-    component: FullWidthBackground,
     title: 'Components/FullWidthBackground',
+    component: FullWidthBackground,
 } as Meta;
 
-const DefaultTemplate: StoryFn<FullWidthBackgroundProps> = (args) => (
-    <div style={{height: '100px'}}>
-        <FullWidthBackground {...args}>Children</FullWidthBackground>
-    </div>
-);
+const DefaultTemplate: StoryFn<FullWidthBackgroundProps> = (args) => {
+    return (
+        <div
+            style={{
+                height: '100px',
+            }}
+            key={args.theme}
+        >
+            <FullWidthBackground {...args}>
+                <div
+                    style={{
+                        padding: '20px',
+                        margin: '20px',
+                    }}
+                >
+                    Children
+                </div>
+            </FullWidthBackground>
+        </div>
+    );
+};
 
 export const Default = DefaultTemplate.bind({});
 export const Rounded = DefaultTemplate.bind({});
 
-Default.args = data.default.content as FullWidthBackgroundProps;
-Rounded.args = data.rounded.content as FullWidthBackgroundProps;
+Default.args = data.default as FullWidthBackgroundProps;
+
+Rounded.args = data.rounded as FullWidthBackgroundProps;
+Rounded.parameters = {
+    controls: {
+        include: Object.keys(data.rounded),
+    },
+};

src/components/FullWidthBackground/__snapshots__/FullWidthBackground.visual.test.tsx-snapshots/FullWidthBackground-default-light-webkit-linux.png

@@ -1,18 +1,14 @@
 {
   "default": {
-    "content": {
-      "style": {
-        "backgroundColor": "#ffbe5c"
-      },
-      "theme": "default"
+    "theme": "default",
+    "style": {
+      "backgroundColor": "#ffbe5c"
     }
   },
   "rounded": {
-    "content": {
-      "style": {
-        "backgroundColor": "#ffbe5c"
-      },
-      "theme": "rounded"
+    "theme": "rounded",
+    "style": {
+      "backgroundColor": "#ffbe5c"
     }
   }
 }

src/components/FullWidthBackground/__snapshots__/FullWidthBackground.visual.test.tsx-snapshots/FullWidthBackground-rounded-light-chromium-linux.png

@@ -0,0 +1,19 @@
+import {test} from '../../../../playwright/core/index';
+
+import {Default, Rounded} from './helpers';
+
+test.describe('FullWidthBackground', () => {
+    test('default', async ({mount, expectScreenshot, defaultDelay, page}) => {
+        await page.setViewportSize({width: 850, height: 150});
+        await mount(<Default />);
+        await defaultDelay();
+        await expectScreenshot({skipTheme: 'dark'});
+    });
+
+    test('rounded', async ({mount, expectScreenshot, defaultDelay, page}) => {
+        await page.setViewportSize({width: 850, height: 150});
+        await mount(<Rounded />);
+        await defaultDelay();
+        await expectScreenshot({skipTheme: 'dark'});
+    });
+});

src/components/FullWidthBackground/__snapshots__/FullWidthBackground.visual.test.tsx-snapshots/FullWidthBackground-rounded-light-webkit-linux.png

@@ -0,0 +1,29 @@
+import {composeStories} from '@storybook/react';
+
+import * as FullWidthBackgroundStories from '../__stories__/FullWidthBackground.stories';
+
+const stories = composeStories(FullWidthBackgroundStories);
+
+export const Default = () => (
+    <div
+        style={{
+            width: '800px',
+            height: '100px',
+            position: 'relative',
+        }}
+    >
+        <stories.Default />
+    </div>
+);
+
+export const Rounded = () => (
+    <div
+        style={{
+            width: '800px',
+            height: '100px',
+            position: 'relative',
+        }}
+    >
+        <stories.Rounded />
+    </div>
+);