Skip to content

Commit 0017341

Browse files
aeksandlaaeksandla
authored
feat: add Content to Info block
* Add Content into InfoBlock [CLOUDFRONT-11672] * fix: update Info block stories * fix: update styles, refactor stories, update README * fix: put common props in constants * fix: add common props * fix: container paddings * fix: add info about indents * fix: story
1 parent 98f0a7a commit 0017341

File tree

11 files changed

+256
-114
lines changed

11 files changed

+256
-114
lines changed

‎src/blocks/Info/Info.scss‎

Lines changed: 21 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -4,58 +4,43 @@
44
$block: '.#{$ns}info-block';
55

66
#{$block} {
7-
@include add-theme();
8-
9-
&__content-title,
10-
&__sections-title {
11-
@include heading2();
12-
}
13-
14-
&__content {
7+
&__container {
158
background-color: var(--yc-color-base-special);
16-
padding: $indentXXL $indentXL $indentXXXL;
9+
padding: $indentXXL $indentXL;
1710
border-radius: var(--pc-border-radius);
1811
}
1912

20-
&__buttons {
21-
margin-top: $indentM - $indentXS;
13+
&__left,
14+
&__right {
15+
padding-right: $indentXXL;
16+
padding-bottom: $indentXS;
2217
}
2318

24-
&__button {
25-
margin-top: $indentXS;
26-
27-
&:not(:last-child) {
28-
margin-right: $indentXS;
19+
@media (max-width: map-get($gridBreakpoints, 'lg')) {
20+
&__left,
21+
&__right {
22+
padding-bottom: 0;
2923
}
30-
}
31-
32-
&__links {
33-
@include text-size(body-2);
34-
35-
margin-top: $indentS;
36-
}
3724

38-
&__link {
39-
margin-top: 0;
25+
&__container {
26+
padding: $indentXXL $indentXL;
27+
}
4028
}
4129

42-
&__link + &__link {
43-
margin-top: $indentXXS;
44-
}
30+
@media (max-width: map-get($gridBreakpoints, 'md')) {
31+
&__left {
32+
margin-bottom: $indentL;
33+
}
4534

46-
@media (max-width: map-get($gridBreakpoints, 'lg')) {
47-
&__content {
48-
padding: $indentXXL $indentXL;
35+
&__left,
36+
&__right {
37+
padding-right: 0;
4938
}
5039
}
5140

5241
@media (max-width: map-get($gridBreakpoints, 'sm')) {
53-
&__content {
42+
&__container {
5443
padding: $indentXL $indentM;
5544
}
56-
57-
&__buttons {
58-
margin-bottom: $indentXL;
59-
}
6045
}
6146
}

‎src/blocks/Info/Info.tsx‎

Lines changed: 43 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,72 @@
11
import React, {useContext} from 'react';
22

33
import {block, getThemedValue} from '../../utils';
4-
import {InfoBlockProps} from '../../models';
4+
import {ContentTheme, InfoBlockProps, LinkTheme} from '../../models';
55
import {Grid, Row, Col} from '../../grid';
6-
import Button from '../../components/Button/Button';
7-
import Link from '../../components/Link/Link';
86
import {ThemeValueContext} from '../../context/theme/ThemeValueContext';
7+
import Content from '../../sub-blocks/Content/Content';
98

109
import './Info.scss';
1110

1211
const b = block('info-block');
12+
const sizes = {md: 6, all: 12};
1313

1414
export const InfoBlock = (props: InfoBlockProps) => {
1515
const {
1616
backgroundColor,
17-
theme: textTheme = 'dark',
18-
buttons,
17+
theme: blockTheme = 'dark',
18+
buttons = [],
1919
title,
2020
sectionsTitle,
21-
links,
21+
links = [],
22+
rightContent = {},
23+
leftContent = {},
2224
} = props;
2325

2426
const {themeValue: theme} = useContext(ThemeValueContext);
27+
const contentTheme = blockTheme === 'dark' ? 'dark' : 'default';
28+
const rightLinks = [
29+
...(rightContent?.links || []),
30+
...links.map((link) => ({
31+
...link,
32+
arrow: true,
33+
theme: 'normal' as LinkTheme,
34+
})),
35+
];
36+
const leftButtons = [...buttons, ...(leftContent?.buttons || [])];
37+
const commonProps = {
38+
colSizes: {all: 12, md: 12},
39+
className: b('content'),
40+
theme: contentTheme as ContentTheme,
41+
};
2542

2643
return (
27-
<div className={b({theme: textTheme})}>
44+
<div className={b()}>
2845
<div
29-
className={b('content')}
46+
className={b('container')}
3047
style={{backgroundColor: getThemedValue(backgroundColor, theme)}}
3148
>
3249
<Grid>
3350
<Row>
34-
<Col sizes={{lg: 4, sm: 6, all: 12}}>
35-
<h2 className={b('content-title')}>{title}</h2>
36-
{buttons && (
37-
<div className={b('buttons')}>
38-
{buttons.map((button, index) => (
39-
<Button
40-
key={index}
41-
className={b('button')}
42-
size="xl"
43-
{...button}
44-
/>
45-
))}
46-
</div>
47-
)}
51+
<Col sizes={sizes} className={b('left')}>
52+
<Content
53+
title={title || leftContent?.title}
54+
text={leftContent?.text}
55+
links={leftContent?.links}
56+
buttons={leftButtons}
57+
additionalInfo={leftContent?.additionalInfo}
58+
{...commonProps}
59+
/>
4860
</Col>
49-
<Col sizes={{lg: 4, sm: 6, all: 12}} offsets={{lg: 2, md: 0}}>
50-
<h2 className={b('sections-title')}>{sectionsTitle}</h2>
51-
<div className={b('links')}>
52-
{links &&
53-
links.map((link, index) => (
54-
<Link
55-
{...link}
56-
key={index}
57-
className={b('link')}
58-
colorTheme={textTheme}
59-
theme={'normal'}
60-
arrow={true}
61-
/>
62-
))}
63-
</div>
61+
<Col sizes={sizes} className={b('right')}>
62+
<Content
63+
title={sectionsTitle || rightContent?.title}
64+
text={rightContent?.text}
65+
links={rightLinks}
66+
buttons={rightContent?.buttons}
67+
additionalInfo={rightContent?.additionalInfo}
68+
{...commonProps}
69+
/>
6470
</Col>
6571
</Row>
6672
</Grid>

‎src/blocks/Info/README.md‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,10 @@ Info block
22

33
`type: 'info-block'`
44

5-
`title: string` — Title on the right
6-
7-
`sectionsTitle: string` — Title on the left
8-
95
`backgroundColor?: string` — Fill color
106

11-
`buttons?: Button[]` — Buttons on the left
7+
`theme?: 'light' | 'dark'` — Theme (defines the text color)
128

13-
`links?: Button[]` — Links on the right
9+
`rightContent?` - See the [Content](?path=/story/components-content--default&viewMode=docs) component
1410

15-
`theme?: 'light' | 'dark'` — Theme (defines the text color)
11+
`leftContent?` - See the [Content](?path=/story/components-content--default&viewMode=docs) component

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

Lines changed: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import yfm from '@doc-tools/transform';
23
import {Meta, Story} from '@storybook/react/types-6-0';
34
import {InfoBlockModel, InfoBlockProps} from '../../../models';
45
import Info from '../Info';
@@ -15,6 +16,40 @@ const DefaultTemplate: Story<InfoBlockModel> = (args) => (
1516
<PageConstructor content={{blocks: [args]}} />
1617
);
1718

18-
export const Default = DefaultTemplate.bind({});
19+
export const Light = DefaultTemplate.bind({});
20+
export const Dark = DefaultTemplate.bind({});
1921

20-
Default.args = data.default.content as InfoBlockProps;
22+
Light.args = {
23+
...data.light.content,
24+
rightContent: {
25+
...data.light.content.rightContent,
26+
title: data.common.title,
27+
links: data.common.links,
28+
additionalInfo: yfm(data.common.additionalInfo).result.html,
29+
text: yfm(data.common.text).result.html,
30+
},
31+
leftContent: {
32+
...data.light.content.leftContent,
33+
title: data.common.titleWithLink,
34+
links: data.common.links,
35+
additionalInfo: yfm(data.common.additionalInfo).result.html,
36+
text: yfm(data.common.text).result.html,
37+
},
38+
} as InfoBlockProps;
39+
Dark.args = {
40+
...data.dark.content,
41+
rightContent: {
42+
...data.dark.content.rightContent,
43+
title: data.common.title,
44+
links: data.common.links,
45+
additionalInfo: yfm(data.common.additionalInfo).result.html,
46+
text: yfm(data.common.text).result.html,
47+
},
48+
leftContent: {
49+
...data.dark.content.leftContent,
50+
title: data.common.titleWithLink,
51+
links: data.common.links,
52+
additionalInfo: yfm(data.common.additionalInfo).result.html,
53+
text: yfm(data.common.text).result.html,
54+
},
55+
} as InfoBlockProps;

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

Lines changed: 92 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,98 @@
11
{
2-
"default": {
2+
"common": {
3+
"text": "**Ut enim ad minim veniam** [quis nostrud](https://example.com) exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
4+
"additionalInfo": "Duis aute irure dolor in [reprehenderit](https://example.com) n voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
5+
"links": [
6+
{
7+
"url": "#",
8+
"text": "Link",
9+
"theme": "normal",
10+
"arrow": true
11+
},
12+
{
13+
"url": "#",
14+
"text": "Link",
15+
"theme": "normal"
16+
},
17+
{
18+
"url": "#",
19+
"text": "Link",
20+
"theme": "normal"
21+
}
22+
],
23+
"titleWithLink": {
24+
"text": "Lorem ipsum dolor",
25+
"url": "https://example.ru"
26+
},
27+
"title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit"
28+
},
29+
"light": {
330
"content": {
431
"type": "info-block",
5-
"title": "Ready to get started?",
6-
"buttons": [
7-
{
8-
"text": "Get started\r",
9-
"theme": "raised",
10-
"url": "https://example.com"
11-
},
12-
{
13-
"text": "Ask a question",
14-
"theme": "outlined-contrast",
15-
"url": "#contact-form"
16-
}
17-
],
18-
"sectionsTitle": "Useful links",
19-
"links": [
20-
{
21-
"text": "Find a partner",
22-
"url": "/partners/find"
23-
},
24-
{
25-
"text": "Billing",
26-
"url": "/prices"
27-
},
28-
{
29-
"text": "Community chat",
30-
"url": "https://t.me/yandexcloudnews"
31-
}
32-
]
32+
"theme": "light",
33+
"backgroundColor": "#eef3fe",
34+
"rightContent": {
35+
"buttons": [
36+
{
37+
"text": "Button",
38+
"theme": "action",
39+
"url": "#"
40+
}
41+
]
42+
},
43+
"leftContent": {
44+
"buttons": [
45+
{
46+
"text": "Button",
47+
"theme": "action",
48+
"url": "#"
49+
},
50+
{
51+
"text": "Button",
52+
"theme": "action",
53+
"url": "#"
54+
},
55+
{
56+
"text": "Button",
57+
"theme": "action",
58+
"url": "#"
59+
}
60+
]
61+
}
62+
}
63+
},
64+
"dark": {
65+
"content": {
66+
"type": "info-block",
67+
"theme": "dark",
68+
"rightContent": {
69+
"buttons": [
70+
{
71+
"text": "Button",
72+
"theme": "outlined-contrast",
73+
"url": "#"
74+
}
75+
]
76+
},
77+
"leftContent": {
78+
"buttons": [
79+
{
80+
"text": "Button",
81+
"theme": "outlined-contrast",
82+
"url": "#"
83+
},
84+
{
85+
"text": "Button",
86+
"theme": "raised",
87+
"url": "#"
88+
},
89+
{
90+
"text": "Button",
91+
"theme": "outlined-contrast",
92+
"url": "#"
93+
}
94+
]
95+
}
3396
}
3497
}
3598
}

0 commit comments

Comments
 (0)