Fix/update form block (#687)

* fix: form block mobile padding * fix: update form-block storybook
gravity-ui · Nov 10, 2023 · e3b5f79 · e3b5f79
1 parent f1c17ef
commit e3b5f79
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 67 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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"
+      }
     }
   }
 }