From e3b5f795ab095b696c973072d7039bd36e8a6023 Mon Sep 17 00:00:00 2001
From: Sergey <148218517+qradle-yndx@users.noreply.github.com>
Date: Fri, 10 Nov 2023 14:57:15 +0300
Subject: [PATCH] Fix/update form block (#687)

* fix: form block mobile padding

* fix: update form-block storybook
---
 src/blocks/Form/Form.scss                    | 12 +---
 src/blocks/Form/Form.tsx                     |  8 +--
 src/blocks/Form/__stories__/Form.mdx         |  4 +-
 src/blocks/Form/__stories__/Form.stories.tsx | 62 ++++++++++++++----
 src/blocks/Form/__stories__/data.json        | 69 +++++++++-----------
 5 files changed, 88 insertions(+), 67 deletions(-)

diff --git a/src/blocks/Form/Form.scss b/src/blocks/Form/Form.scss
index 425cd535a..0f4cd1ec5 100644
--- a/src/blocks/Form/Form.scss
+++ b/src/blocks/Form/Form.scss
@@ -196,16 +196,8 @@ $largeBorderRadius: 32px;
             padding: 0 $indentXXXS;
 
             #{$root}__row {
-                padding-top: $indentL;
-
-                &_padding-bottom {
-                    &_m {
-                        padding-bottom: $indentM;
-                    }
-                    &_l {
-                        padding-bottom: $indentL;
-                    }
-                }
+                padding-top: $indentM;
+                padding-bottom: $indentM;
 
                 &_direction {
                     &_form-content,
diff --git a/src/blocks/Form/Form.tsx b/src/blocks/Form/Form.tsx
index ef1de0e61..4b7fe02eb 100644
--- a/src/blocks/Form/Form.tsx
+++ b/src/blocks/Form/Form.tsx
@@ -26,8 +26,9 @@ const FormBlock: React.FC<FormBlockProps> = (props) => {
     const [contentLoaded, setContentLoaded] = useState(false);
     const isMobile = useContext(MobileContext);
 
-    const hasImage = background && (background.src || background.desktop);
-    const paddingBottom = background && background.style?.backgroundColor && !hasImage ? 'l' : 'm'; // bigger padding for case with background color and no image
+    const withBackground = Boolean(
+        background && (background.src || background.desktop || background.style?.backgroundColor),
+    );
     const onContentLoad = useCallback(() => {
         setContentLoaded(true);
     }, []);
@@ -47,7 +48,7 @@ const FormBlock: React.FC<FormBlockProps> = (props) => {
     return (
         <div
             className={b({
-                'with-background': Boolean(background),
+                'with-background': withBackground,
                 'form-type': formType,
             })}
         >
@@ -67,7 +68,6 @@ const FormBlock: React.FC<FormBlockProps> = (props) => {
                     }
                     className={b('row', {
                         direction,
-                        'padding-bottom': paddingBottom,
                     })}
                 >
                     <Col sizes={colSizes} className={b('content-col')}>
diff --git a/src/blocks/Form/__stories__/Form.mdx b/src/blocks/Form/__stories__/Form.mdx
index 3b177fe89..35ee34a7d 100644
--- a/src/blocks/Form/__stories__/Form.mdx
+++ b/src/blocks/Form/__stories__/Form.mdx
@@ -17,8 +17,6 @@ import * as FormBlockStories from './Form.stories.tsx';
 
 `direction?: 'form-content' | 'content-form' | 'center'` - Direction.
 
-`image?: string | {src: string; alt?: string;}` — Image.
-
-`backgroundColor?: string` — Bg color.
+`background?: BackgroundImage` — See [background](?path=/story/components-pics-video-datalens-backgroundimage--docs&viewMode=docs) properties.
 
 </StoryTemplate>
diff --git a/src/blocks/Form/__stories__/Form.stories.tsx b/src/blocks/Form/__stories__/Form.stories.tsx
index 9d12caaab..4aafeffa2 100644
--- a/src/blocks/Form/__stories__/Form.stories.tsx
+++ b/src/blocks/Form/__stories__/Form.stories.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 
 import {Meta, StoryFn} from '@storybook/react';
+import {v4 as uuidv4} from 'uuid';
 
 import {PageConstructor} from '../../../containers/PageConstructor';
-import {FormBlockDirection, FormBlockModel} from '../../../models';
+import {FormBlockDirection, FormBlockModel, isHubspotDataForm} from '../../../models';
 import FormBlock from '../Form';
 
 import data from './data.json';
@@ -18,35 +19,70 @@ export default {
     },
 } as Meta;
 
+const __getFormData = (formData: FormBlockModel['formData']) => {
+    const id = uuidv4();
+    return isHubspotDataForm(formData)
+        ? {hubspot: {...formData.hubspot, formInstanceId: id}}
+        : {yandex: formData.yandex};
+};
+
 const DefaultTemplate: StoryFn<FormBlockModel> = (args) => (
+    <PageConstructor
+        content={{
+            blocks: [{...args, formData: __getFormData(args.formData)}],
+        }}
+    />
+);
+
+const ContentDirectionTemplate: StoryFn<FormBlockModel> = (args) => (
     <PageConstructor
         content={{
             blocks: [
                 {
                     ...args,
-                    title: 'Yandex form',
-                    formData: {yandex: data.formData.yandex}, //yandex form
+                    direction: FormBlockDirection.FormContent,
+                    textContent: {...args.textContent, title: 'FormContent'},
+                    formData: __getFormData(args.formData),
+                },
+                {
+                    ...args,
+                    direction: FormBlockDirection.ContentForm,
+                    textContent: {...args.textContent, title: 'ContentForm'},
+                    formData: __getFormData(args.formData),
                 },
                 {
                     ...args,
-                    title: 'Hubspot form',
-                    formData: {hubspot: data.formData.hubspot}, //hubspot form
+                    direction: FormBlockDirection.Center,
+                    textContent: {...args.textContent, title: 'Center'},
+                    formData: __getFormData(args.formData),
                 },
             ],
         }}
     />
 );
 
+const FormDataTemplate: StoryFn<FormBlockModel> = (args) => (
+    <React.Fragment>
+        <ContentDirectionTemplate {...args} />
+        <ContentDirectionTemplate
+            {...args}
+            {...(data.default as FormBlockModel)}
+            {...data.withBackground}
+        />
+    </React.Fragment>
+);
+
 export const Default = DefaultTemplate.bind({});
-export const ContentDirection = DefaultTemplate.bind({});
-export const WithBackgroundColor = DefaultTemplate.bind({});
-export const WithBackgroundImage = DefaultTemplate.bind({});
-export const DarkTheme = DefaultTemplate.bind({});
+export const ContentDirection = ContentDirectionTemplate.bind({});
+export const WithBackgroundColor = ContentDirectionTemplate.bind({});
+export const WithBackgroundImage = ContentDirectionTemplate.bind({});
+export const DarkTheme = ContentDirectionTemplate.bind({});
+export const FormData = FormDataTemplate.bind({});
 
-ContentDirection.args = {...data.сontentDirection.content} as FormBlockModel;
+WithBackgroundColor.args = data.withBackground;
 
-WithBackgroundColor.args = {...data.withBackground.content} as FormBlockModel;
+WithBackgroundImage.args = data.withBackgroundImage;
 
-WithBackgroundImage.args = {...data.withBackgroundImage.content} as FormBlockModel;
+DarkTheme.args = data.darkTheme as FormBlockModel;
 
-DarkTheme.args = {...data.darkTheme.content} as FormBlockModel;
+FormData.args = {...data.yandexForm, ...data.withBackgroundImage};
diff --git a/src/blocks/Form/__stories__/data.json b/src/blocks/Form/__stories__/data.json
index 419c0f94e..2586ae65f 100644
--- a/src/blocks/Form/__stories__/data.json
+++ b/src/blocks/Form/__stories__/data.json
@@ -4,56 +4,51 @@
     "textContent": {
       "title": "Lorem ipsum dolor sit amet",
       "text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
-    }
-  },
-  "сontentDirection": {
-    "content": {
-      "direction": "content-form"
+    },
+    "title": "Hubspot form",
+    "formData": {
+      "hubspot": {
+        "region": "eu1",
+        "portalId": "25764979",
+        "formId": "a3eb06a6-e8ce-45d4-81bd-7fadb7dab313"
+      }
     }
   },
   "withBackground": {
-    "content": {
-      "background": {
-        "style": {
-          "backgroundColor": "#EFF2F8"
-        }
+    "background": {
+      "style": {
+        "backgroundColor": "#EFF2F8"
       }
     }
   },
   "withBackgroundImage": {
-    "content": {
-      "background": {
-        "src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/content-bg-img_light.png",
-        "disableCompress": true
-      }
+    "background": {
+      "src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/content-bg-img_light.png",
+      "disableCompress": true
     }
   },
   "darkTheme": {
-    "content": {
-      "textContent": {
-        "theme": "dark",
-        "title": "Black form background color",
-        "text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit:</p> <ul> <li> <p>Lorem ipsum</p> </li> <li> <p>Lorem ipsum</p> </li> <li> <p>Lorem ipsum</p> </li> </ul>"
-      },
-      "direction": "form-content",
-      "background": {
-        "style": {
-          "backgroundColor": "#262626"
-        }
+    "textContent": {
+      "theme": "dark",
+      "title": "Black form background color",
+      "text": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit:</p> <ul> <li> <p>Lorem ipsum</p> </li> <li> <p>Lorem ipsum</p> </li> <li> <p>Lorem ipsum</p> </li> </ul>"
+    },
+    "direction": "form-content",
+    "background": {
+      "style": {
+        "backgroundColor": "#262626"
       }
     }
   },
-  "formData": {
-    "yandex": {
-      "theme": "default",
-      "id": "61a4e639d4d24e0dbba36f5c",
-      "metrikaGoals": ["events_form_submit"],
-      "customFormSection": "cloud"
-    },
-    "hubspot": {
-      "region": "eu1",
-      "portalId": "25764979",
-      "formId": "a3eb06a6-e8ce-45d4-81bd-7fadb7dab313"
+  "yandexForm": {
+    "title": "Yandex Form",
+    "formData": {
+      "yandex": {
+        "theme": "default",
+        "id": "61a4e639d4d24e0dbba36f5c",
+        "metrikaGoals": ["events_form_submit"],
+        "customFormSection": "cloud"
+      }
     }
   }
 }