feat: add hubspot form to form-block storybook cases. merge backgroun…

…d props
gravity-ui · Oct 26, 2023 · 0531522 · 0531522
1 parent 3b2bebb
commit 0531522
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 39 deletions.
diff --git a/src/blocks/Form/Form.tsx b/src/blocks/Form/Form.tsx
@@ -1,6 +1,6 @@
 import React, {useCallback, useContext, useMemo, useState} from 'react';
 
-import {Media, Title} from '../../components';
+import {BackgroundImage, Title} from '../../components';
 import {MobileContext} from '../../context/mobileContext';
 import {Col, Grid, GridAlignItems, GridColumnSize, Row} from '../../grid';
 import type {FormBlockProps} from '../../models';
@@ -22,19 +22,12 @@ const b = block('form-block');
 const colSizes = {[GridColumnSize.Lg]: 6, [GridColumnSize.All]: 12};
 
 const FormBlock: React.FC<FormBlockProps> = (props) => {
-    const {
-        formData,
-        title,
-        textContent,
-        image,
-        direction = FormBlockDirection.Center,
-        backgroundColor,
-    } = props;
+    const {formData, title, textContent, direction = FormBlockDirection.Center, background} = props;
     const [contentLoaded, setContentLoaded] = useState(false);
     const isMobile = useContext(MobileContext);
 
-    const withBackground = Boolean(backgroundColor) || Boolean(image);
-    const paddingBottom = Boolean(backgroundColor) && !image ? 'l' : 'm'; // bigger padding for case with background and no image
+    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 onContentLoad = useCallback(() => {
         setContentLoaded(true);
     }, []);
@@ -52,14 +45,13 @@ const FormBlock: React.FC<FormBlockProps> = (props) => {
     return (
         <div
             className={b({
-                'with-background': withBackground,
+                'with-background': Boolean(background),
                 'form-type': formType,
             })}
         >
-            {withBackground && (
-                <Media
-                    image={image}
-                    color={backgroundColor}
+            {background && (
+                <BackgroundImage
+                    {...background}
                     className={b('media')}
                     imageClassName={b('image')}
                 />

diff --git a/src/blocks/Form/__stories__/Form.stories.tsx b/src/blocks/Form/__stories__/Form.stories.tsx
@@ -19,19 +19,32 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<FormBlockModel> = (args) => (
-    <PageConstructor content={{blocks: [args]}} />
+    <PageConstructor
+        content={{
+            blocks: [
+                {
+                    ...args,
+                    formData: {yandex: data.formData.yandex}, //yandex form
+                },
+                {
+                    ...args,
+                    formData: {hubspot: data.formData.hubspot}, //hubspot form
+                },
+            ],
+        }}
+    />
 );
 
 export const Default = DefaultTemplate.bind({});
 export const ContentForm = DefaultTemplate.bind({});
-export const Background = DefaultTemplate.bind({});
-export const Image = DefaultTemplate.bind({});
-export const Black = DefaultTemplate.bind({});
+export const WithBackgroundColor = DefaultTemplate.bind({});
+export const WithBackgroundImage = DefaultTemplate.bind({});
+export const DarkTheme = DefaultTemplate.bind({});
 
 ContentForm.args = {...data.contentForm.content} as FormBlockModel;
 
-Background.args = {...data.background.content} as FormBlockModel;
+WithBackgroundColor.args = {...data.withBackground.content} as FormBlockModel;
 
-Image.args = {...data.image.content} as FormBlockModel;
+WithBackgroundImage.args = {...data.withBackgroundImage.content} as FormBlockModel;
 
-Black.args = {...data.black.content} as FormBlockModel;
+DarkTheme.args = {...data.darkTheme.content} as FormBlockModel;
diff --git a/src/blocks/Form/__stories__/data.json b/src/blocks/Form/__stories__/data.json
@@ -1,12 +1,6 @@
 {
   "default": {
     "type": "form-block",
-    "formData": {
-      "yandex": {
-        "id": "10034371.a94dac9d3bd19f65c9616db0297348ad8d063db0",
-        "metrikaGoals": ["events_form_submit"]
-      }
-    },
     "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."
@@ -17,28 +11,47 @@
       "direction": "content-form"
     }
   },
-  "background": {
+  "withBackground": {
     "content": {
-      "backgroundColor": "#EFF2F8"
+      "background": {
+        "style": {
+          "backgroundColor": "#EFF2F8"
+        }
+      }
     }
   },
-  "image": {
+  "withBackgroundImage": {
     "content": {
-      "image": {
-        "src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/img-mini_4-12_light.png",
+      "background": {
+        "src": "https://storage.yandexcloud.net/cloud-www-assets/constructor/storybook/images/content-bg-img_light.png",
         "disableCompress": true
       }
     }
   },
-  "black": {
+  "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",
-      "backgroundColor": "#262626"
+      "background": {
+        "style": {
+          "backgroundColor": "#262626"
+        }
+      }
+    }
+  },
+  "formData": {
+    "yandex": {
+      "id": "61a4e639d4d24e0dbba36f5c",
+      "metrikaGoals": ["events_form_submit"]
+    },
+    "hubspot": {
+      "region": "eu1",
+      "portalId": "25764979",
+      "formId": "a3eb06a6-e8ce-45d4-81bd-7fadb7dab313"
     }
   }
 }
diff --git a/src/models/constructor-items/blocks.ts b/src/models/constructor-items/blocks.ts
@@ -18,7 +18,6 @@ import {
     HeaderOffset,
     HeaderWidth,
     ImageDeviceProps,
-    ImageProps,
     Justify,
     LegendTableMarkerType,
     LinkProps,
@@ -402,8 +401,7 @@ export interface FormBlockProps {
     title?: string;
     textContent?: Omit<ContentBlockProps, 'centered' | 'colSizes' | 'size'>;
     direction?: FormBlockDirection;
-    image?: ImageProps;
-    backgroundColor?: string;
+    background?: BackgroundImageProps;
 }
 
 //block models