Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: support prop list in all content usecases #828

Merged
merged 6 commits into from
Mar 28, 2024
Merged

feat: support prop list in all content usecases #828

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0cd344e
feat: add story for form with content list
NikitaCG Feb 26, 2024
6af1197
feat: add story with content list to Info and Questions
NikitaCG Feb 26, 2024
3a27f51
feat: add story with content list in TabTextContent
NikitaCG Feb 26, 2024
7598a44
feat: add story with content list in BackgroundCard
NikitaCG Feb 26, 2024
cc0edff
feat: add story with content list in LayoutItem
NikitaCG Feb 26, 2024
6c401ab
fix: fix comments
NikitaCG Mar 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions src/blocks/ExtendedFeatures/__stories__/ExtendedFeatures.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,10 @@ const DefaultTemplate: StoryFn<ExtendedFeaturesBlockModel> = (args) => (
const extendedFeaturesItems = (items: ExtendedFeaturesItem[]) => {
return items.map((item) => ({
...item,
list: item.list?.map((listItem) => ({
...listItem,
text: listItem?.text && yfmTransform(listItem.text),
})),
text: item.text && yfmTransform(item.text),
additionalInfo: item.additionalInfo && yfmTransform(item.additionalInfo),
}));
Expand Down
41 changes: 38 additions & 3 deletions src/blocks/Form/__stories__/Form.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,23 @@ import {v4 as uuidv4} from 'uuid';

import {yfmTransform} from '../../../../.storybook/utils';
import {PageConstructor} from '../../../containers/PageConstructor';
import {FormBlockDirection, FormBlockModel, isHubspotDataForm} from '../../../models';
import {
ContentItemProps,
FormBlockDirection,
FormBlockModel,
isHubspotDataForm,
} from '../../../models';
import FormBlock from '../Form';

import data from './data.json';

const transformedContentList = data.list.map((item) => {
return {
...item,
text: item?.text && yfmTransform(item.text),
};
}) as ContentItemProps[];

export default {
title: 'Blocks/Form',
component: FormBlock,
Expand All @@ -36,7 +48,26 @@ const __getFormData = (formData: FormBlockModel['formData']) => {
const DefaultTemplate: StoryFn<FormBlockModel> = (args) => (
<PageConstructor
content={{
blocks: [{...args, formData: __getFormData(args.formData)}],
blocks: [
{
...args,
formData: __getFormData(args.formData),
},
],
}}
/>
);

const WithContentListTemplate: StoryFn<FormBlockModel> = (args) => (
<PageConstructor
content={{
blocks: [
{
...args,
formData: __getFormData(args.formData),
textContent: {list: transformedContentList, title: 'WithContentList'},
},
],
}}
/>
);
Expand All @@ -54,7 +85,10 @@ const ContentDirectionTemplate: StoryFn<FormBlockModel> = (args) => (
{
...args,
direction: FormBlockDirection.ContentForm,
textContent: {...args.textContent, title: 'ContentForm'},
textContent: {
...args.textContent,
title: 'ContentForm',
},
formData: __getFormData(args.formData),
},
{
Expand Down Expand Up @@ -85,6 +119,7 @@ export const WithBackgroundColor = ContentDirectionTemplate.bind({});
export const WithBackgroundImage = ContentDirectionTemplate.bind({});
export const DarkTheme = ContentDirectionTemplate.bind({});
export const FormData = FormDataTemplate.bind({});
export const WithContentList = WithContentListTemplate.bind({});

WithBackgroundColor.args = data.withBackground;

Expand Down
28 changes: 27 additions & 1 deletion src/blocks/Form/__stories__/data.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,5 +49,31 @@
"customFormSection": "cloud"
}
}
}
},
"list": [
{
"icon": {
"light": "/story-assets/icon_1_light.svg",
"dark": "/story-assets/icon_1_dark.svg"
},
"title": "Lorem ipsum",
"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."
},
{
"icon": {
"light": "/story-assets/icon_3_light.svg",
"dark": "/story-assets/icon_3_dark.svg"
},
"title": "Lorem ipsum ipsum",
"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."
},
{
"icon": {
"light": "/story-assets/icon_2_light.svg",
"dark": "/story-assets/icon_2_dark.svg"
},
"title": "Lorem ipsum",
"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."
}
]
}
2 changes: 2 additions & 0 deletions src/blocks/Info/Info.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ export const InfoBlock = (props: InfoBlockProps) => {
title={title || leftContent?.title}
text={leftContent?.text}
links={leftContent?.links}
list={leftContent?.list}
buttons={leftButtons}
additionalInfo={leftContent?.additionalInfo}
{...commonProps}
Expand All @@ -63,6 +64,7 @@ export const InfoBlock = (props: InfoBlockProps) => {
title={sectionsTitle || rightContent?.title}
text={rightContent?.text}
links={rightLinks}
list={rightContent?.list}
buttons={rightContent?.buttons}
additionalInfo={rightContent?.additionalInfo}
{...commonProps}
Expand Down
26 changes: 25 additions & 1 deletion src/blocks/Info/__stories__/Info.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,18 @@ import {Meta, StoryFn} from '@storybook/react';

import {yfmTransform} from '../../../../.storybook/utils';
import {PageConstructor} from '../../../containers/PageConstructor/PageConstructor';
import {InfoBlockModel, InfoBlockProps} from '../../../models';
import {ContentItemProps, InfoBlockModel, InfoBlockProps} from '../../../models';
import Info from '../Info';

import data from './data.json';

const transformedContentList = data.common.list.map((item) => {
return {
...item,
text: item?.text && yfmTransform(item.text),
};
}) as ContentItemProps[];

export default {
title: 'Blocks/Info',
component: Info,
Expand All @@ -19,6 +26,7 @@ const DefaultTemplate: StoryFn<InfoBlockModel> = (args) => (
);

export const Default = DefaultTemplate.bind({});
export const WithContentList = DefaultTemplate.bind({});
export const LightTheme = DefaultTemplate.bind({});

const transformedText = yfmTransform(data.common.text);
Expand Down Expand Up @@ -50,3 +58,19 @@ LightTheme.args = {
text: transformedText,
},
} as InfoBlockProps;

WithContentList.args = {
...data.light.content,
leftContent: {
...data.dark.content.leftContent,
title: data.common.title,
text: transformedText,
list: transformedContentList,
},
rightContent: {
title: data.common.title,
links: data.common.links,
text: transformedText,
list: transformedContentList,
},
} as InfoBlockProps;
26 changes: 26 additions & 0 deletions src/blocks/Info/__stories__/data.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,32 @@
"arrow": true
}
],
"list": [
{
"icon": {
"light": "/story-assets/icon_1_light.svg",
"dark": "/story-assets/icon_1_dark.svg"
},
"title": "Lorem ipsum",
"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."
},
{
"icon": {
"light": "/story-assets/icon_3_light.svg",
"dark": "/story-assets/icon_3_dark.svg"
},
"title": "Lorem ipsum ipsum",
"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."
},
{
"icon": {
"light": "/story-assets/icon_2_light.svg",
"dark": "/story-assets/icon_2_dark.svg"
},
"title": "Lorem ipsum",
"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."
}
],
"title": "Lorem ipsum dolor sit amet"
},
"light": {
Expand Down
3 changes: 2 additions & 1 deletion src/blocks/Questions/Questions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import './Questions.scss';
const b = block('QuestionsBlock');

const QuestionsBlock = (props: QuestionsProps) => {
const {title, text, additionalInfo, links, buttons, items} = props;
const {title, text, additionalInfo, links, buttons, items, list} = props;
const [opened, setOpened] = useState<number[]>([0]);

const toggleItem = (index: number) => {
Expand All @@ -38,6 +38,7 @@ const QuestionsBlock = (props: QuestionsProps) => {
text={text}
additionalInfo={additionalInfo}
links={links}
list={list}
buttons={buttons}
colSizes={{all: 12, md: 12}}
/>
Expand Down
2 changes: 2 additions & 0 deletions src/blocks/Questions/__stories__/Questions.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,9 @@ const DefaultTemplate: StoryFn<QuestionsBlockModel> = (args) => (
export const Default = DefaultTemplate.bind({});
export const TextWithListDash = DefaultTemplate.bind({});
export const TextWithListBullet = DefaultTemplate.bind({});
export const WithContentList = DefaultTemplate.bind({});

Default.args = data.default.content as QuestionsProps;
WithContentList.args = {...data.default.content, list: data.common.list} as QuestionsProps;
TextWithListDash.args = data.textWithListDash.content as QuestionsProps;
TextWithListBullet.args = data.textWithListBullet.content as QuestionsProps;
28 changes: 28 additions & 0 deletions src/blocks/Questions/__stories__/data.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,32 @@
{
"common": {
"list": [
{
"icon": {
"light": "/story-assets/icon_1_light.svg",
"dark": "/story-assets/icon_1_dark.svg"
},
"title": "Lorem ipsum",
"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."
},
{
"icon": {
"light": "/story-assets/icon_3_light.svg",
"dark": "/story-assets/icon_3_dark.svg"
},
"title": "Lorem ipsum ipsum",
"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."
},
{
"icon": {
"light": "/story-assets/icon_2_light.svg",
"dark": "/story-assets/icon_2_dark.svg"
},
"title": "Lorem ipsum",
"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."
}
]
},
"default": {
"content": {
"type": "questions-block",
Expand Down
46 changes: 22 additions & 24 deletions src/blocks/Tabs/TabsTextContent/TabsTextContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,31 +21,29 @@ export const TabsTextContent = ({
centered,
contentSize = 's',
showMedia,
data,
data: {media, title, text, additionalInfo, link, links, buttons, list},
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

but data could be undefined, no?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

data is required prop, inside data we have partial fields like media and we check his existence.

imageProps,
isReverse,
}: TextContentProps) => {
const isImage = data?.media || imageProps;
return (
<Col sizes={{all: 12, md: showMedia ? 4 : 8}} className={b({centered: centered})}>
<div
className={b('wrapper', {
reverse: isReverse,
'no-image': !isImage,
})}
>
<Content
title={data.title}
text={data.text}
additionalInfo={data.additionalInfo}
size={contentSize}
links={[...(data.link ? [data.link] : []), ...(data.links || [])]}
buttons={data.buttons}
colSizes={{all: 12}}
/>
</div>
</Col>
);
};
}: TextContentProps) => (
<Col sizes={{all: 12, md: showMedia ? 4 : 8}} className={b({centered: centered})}>
<div
className={b('wrapper', {
reverse: isReverse,
'no-image': !(media || imageProps),
})}
>
<Content
title={title}
text={text}
additionalInfo={additionalInfo}
size={contentSize}
list={list}
links={[...(link ? [link] : []), ...(links || [])]}
buttons={buttons}
colSizes={{all: 12}}
/>
</div>
</Col>
);

export default TabsTextContent;
6 changes: 6 additions & 0 deletions src/blocks/Tabs/__stories__/Tabs.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,12 @@ const DefaultArgs = {
items: data.default.content.items.map((item) => ({
...item,
text: yfmTransform(item.text),
list:
item.list &&
item.list.map((listItem) => ({
...listItem,
text: yfmTransform(listItem.text),
})),
additionalInfo: item.additionalInfo && yfmTransform(item.additionalInfo),
caption: item.caption && yfmTransform(item.caption),
})),
Expand Down
23 changes: 23 additions & 0 deletions src/blocks/Tabs/__stories__/data.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,29 @@
"url": "#"
}
],
"list": [
{
"icon": {
"light": "/story-assets/icon_1_light.svg",
"dark": "/story-assets/icon_1_dark.svg"
},
"text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
},
{
"icon": {
"light": "/story-assets/icon_3_light.svg",
"dark": "/story-assets/icon_3_dark.svg"
},
"text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
},
{
"icon": {
"light": "/story-assets/icon_2_light.svg",
"dark": "/story-assets/icon_2_dark.svg"
},
"text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
}
],
"media": {
"light": {
"image": "/story-assets/img_8-12_white.png"
Expand Down
1 change: 1 addition & 0 deletions src/models/constructor-items/blocks.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -372,6 +372,7 @@ export interface ContentItemProps {
export interface ContentListProps {
list: ContentItemProps[];
size: ContentSize;
theme?: ContentTheme;
}

export interface ContentBlockProps {
Expand Down
2 changes: 2 additions & 0 deletions src/sub-blocks/BackgroundCard/BackgroundCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ const BackgroundCard = (props: BackgroundCardProps) => {
analyticsEvents,
urlTitle,
controlPosition = 'content',
list,
} = props;

const titleId = useUniqId();
Expand Down Expand Up @@ -60,6 +61,7 @@ const BackgroundCard = (props: BackgroundCardProps) => {
theme={cardTheme}
links={areControlsInFooter ? undefined : links}
buttons={areControlsInFooter ? undefined : buttons}
list={list}
colSizes={{all: 12, md: 12}}
/>
</CardBase.Content>
Expand Down
Loading
Loading