Skip to content

Commit 2da30c9

Browse files
aeksandlaaeksandla
authored
chore: update form story (#1276)
1 parent 0f1f0c2 commit 2da30c9

File tree

3 files changed

+76
-111
lines changed

3 files changed

+76
-111
lines changed

‎src/blocks/Form/Form.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const b = block('form-block');
2121

2222
const colSizes = {[GridColumnSize.Lg]: 6, [GridColumnSize.All]: 12};
2323

24-
const FormBlock = (props: FormBlockProps) => {
24+
const Form = (props: FormBlockProps) => {
2525
const {formData, title, textContent, direction = FormBlockDirection.Center, background} = props;
2626
const [contentLoaded, setContentLoaded] = React.useState(false);
2727
const isMobile = React.useContext(MobileContext);
@@ -120,4 +120,4 @@ const FormBlock = (props: FormBlockProps) => {
120120
);
121121
};
122122

123-
export default FormBlock;
123+
export default Form;

‎src/blocks/Form/__stories__/Form.stories.tsx‎

Lines changed: 67 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,90 @@
1-
import * as React from 'react';
2-
31
import {Meta, StoryFn} from '@storybook/react';
42
import {v4 as uuidv4} from 'uuid';
53

6-
import {yfmTransform} from '../../../../.storybook/utils';
7-
import {PageConstructor} from '../../../containers/PageConstructor';
8-
import {FormBlockDirection, FormBlockModel, isHubspotDataForm} from '../../../models';
4+
import {blockTransform} from '../../../../.storybook/utils';
5+
import {FormBlockDirection, FormBlockModel, FormBlockProps} from '../../../models';
96
import FormBlock from '../Form';
107

118
import data from './data.json';
129

1310
export default {
1411
title: 'Blocks/Form',
1512
component: FormBlock,
16-
args: {
17-
...data.default,
18-
textContent: {
19-
...data.default.textContent,
20-
text: yfmTransform(data.default.textContent.text),
21-
},
22-
},
23-
argTypes: {
24-
type: {control: false},
25-
direction: {options: Object.values(FormBlockDirection), control: {type: 'select'}},
26-
},
2713
} as Meta;
2814

29-
const __getFormData = (formData: FormBlockModel['formData']): FormBlockModel['formData'] => {
30-
const id = uuidv4();
31-
return isHubspotDataForm(formData)
32-
? ({hubspot: {...formData.hubspot, formInstanceId: id}} as FormBlockModel['formData'])
33-
: {yandex: formData.yandex};
34-
};
15+
const DIRECTIONS_VARIANTS = [
16+
FormBlockDirection.FormContent,
17+
FormBlockDirection.ContentForm,
18+
FormBlockDirection.Center,
19+
].map((direction) => ({
20+
...data.default,
21+
direction,
22+
formData: {hubspot: {...data.default.formData.hubspot, formInstanceId: uuidv4()}},
23+
}));
3524

3625
const DefaultTemplate: StoryFn<FormBlockModel> = (args) => (
37-
<PageConstructor
38-
content={{
39-
blocks: [
40-
{
41-
...args,
42-
formData: __getFormData(args.formData),
43-
},
44-
],
45-
}}
46-
/>
26+
<FormBlock {...(blockTransform(args) as FormBlockProps)} />
4727
);
4828

49-
const ContentDirectionTemplate: StoryFn<FormBlockModel> = (args) => (
50-
<PageConstructor
51-
content={{
52-
blocks: [
53-
{
54-
...args,
55-
direction: FormBlockDirection.FormContent,
56-
textContent: {...args.textContent, title: 'FormContent'},
57-
formData: __getFormData(args.formData),
58-
},
59-
{
60-
...args,
61-
direction: FormBlockDirection.ContentForm,
62-
textContent: {
63-
...args.textContent,
64-
title: 'ContentForm',
65-
},
66-
formData: __getFormData(args.formData),
67-
},
68-
{
69-
...args,
70-
direction: FormBlockDirection.Center,
71-
textContent: {...args.textContent, title: 'Center'},
72-
formData: __getFormData(args.formData),
73-
},
74-
],
75-
}}
76-
/>
77-
);
78-
79-
const FormDataTemplate: StoryFn<FormBlockModel> = (args) => (
80-
<React.Fragment>
81-
<ContentDirectionTemplate {...args} />
82-
<ContentDirectionTemplate
83-
{...args}
84-
{...(data.default as FormBlockModel)}
85-
{...data.withBackground}
86-
/>
87-
</React.Fragment>
29+
const VariantsTemplate: StoryFn<Record<number, FormBlockModel>> = (args) => (
30+
<div>
31+
{Object.values(args).map((arg, index) => (
32+
<div key={index} style={{marginBottom: '96px'}}>
33+
<FormBlock {...(blockTransform(arg) as FormBlockProps)} />
34+
</div>
35+
))}
36+
</div>
8837
);
8938

9039
export const Default = DefaultTemplate.bind({});
91-
export const ContentDirection = ContentDirectionTemplate.bind({});
92-
export const WithBackgroundColor = ContentDirectionTemplate.bind({});
93-
export const WithBackgroundImage = ContentDirectionTemplate.bind({});
94-
export const DarkTheme = ContentDirectionTemplate.bind({});
95-
export const FormData = FormDataTemplate.bind({});
40+
export const ContentDirection = VariantsTemplate.bind([]);
41+
export const WithBackgroundColor = VariantsTemplate.bind([]);
42+
export const WithBackgroundImage = VariantsTemplate.bind([]);
43+
export const DarkTheme = VariantsTemplate.bind([]);
44+
export const FormData = VariantsTemplate.bind([]);
45+
46+
Default.args = data.default as FormBlockModel;
47+
48+
ContentDirection.args = DIRECTIONS_VARIANTS as FormBlockModel[];
49+
ContentDirection.parameters = {
50+
controls: {
51+
include: Object.keys(DIRECTIONS_VARIANTS),
52+
},
53+
};
9654

97-
WithBackgroundColor.args = data.withBackground;
55+
WithBackgroundColor.args = DIRECTIONS_VARIANTS.map((variant) => ({
56+
...variant,
57+
...data.withBackground,
58+
})) as FormBlockModel[];
59+
WithBackgroundColor.parameters = {
60+
controls: {
61+
include: Object.keys(DIRECTIONS_VARIANTS),
62+
},
63+
};
9864

99-
WithBackgroundImage.args = data.withBackgroundImage;
65+
WithBackgroundImage.args = DIRECTIONS_VARIANTS.map((variant) => ({
66+
...variant,
67+
...data.withBackgroundImage,
68+
})) as FormBlockModel[];
69+
WithBackgroundImage.parameters = {
70+
controls: {
71+
include: Object.keys(DIRECTIONS_VARIANTS),
72+
},
73+
};
10074

101-
DarkTheme.args = data.darkTheme as FormBlockModel;
75+
DarkTheme.args = DIRECTIONS_VARIANTS.map((variant) => ({
76+
...variant,
77+
...data.darkTheme,
78+
})) as FormBlockModel[];
79+
DarkTheme.parameters = {
80+
controls: {
81+
include: Object.keys(DIRECTIONS_VARIANTS),
82+
},
83+
};
10284

103-
FormData.args = {...data.yandexForm, ...data.withBackgroundImage};
85+
FormData.args = [data.default, data.yandexForm] as FormBlockModel[];
86+
FormData.parameters = {
87+
controls: {
88+
include: Object.keys(FormData.args),
89+
},
90+
};

‎src/blocks/Form/__stories__/data.json‎

Lines changed: 7 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -44,16 +44,20 @@
4444
"textContent": {
4545
"theme": "dark",
4646
"title": "Black form background color",
47-
"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>"
47+
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit: \n* Lorem ipsum \n* Lorem ipsum \n* Lorem ipsum"
4848
},
49-
"direction": "form-content",
5049
"background": {
5150
"style": {
5251
"backgroundColor": "#262626"
5352
}
5453
}
5554
},
5655
"yandexForm": {
56+
"type": "form-block",
57+
"textContent": {
58+
"title": "Lorem ipsum dolor sit amet",
59+
"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."
60+
},
5761
"title": "Yandex Form",
5862
"formData": {
5963
"yandex": {
@@ -62,31 +66,5 @@
6266
"customFormSection": "cloud"
6367
}
6468
}
65-
},
66-
"list": [
67-
{
68-
"icon": {
69-
"light": "/story-assets/icon_1_light.svg",
70-
"dark": "/story-assets/icon_1_dark.svg"
71-
},
72-
"title": "Lorem ipsum",
73-
"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."
74-
},
75-
{
76-
"icon": {
77-
"light": "/story-assets/icon_3_light.svg",
78-
"dark": "/story-assets/icon_3_dark.svg"
79-
},
80-
"title": "Lorem ipsum ipsum",
81-
"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."
82-
},
83-
{
84-
"icon": {
85-
"light": "/story-assets/icon_2_light.svg",
86-
"dark": "/story-assets/icon_2_dark.svg"
87-
},
88-
"title": "Lorem ipsum",
89-
"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."
90-
}
91-
]
69+
}
9270
}

0 commit comments

Comments
 (0)